文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网页布局的几种方式有哪些_做网页建议用哪种布局

大家好，又见面了，我是你们的朋友全栈君 固定布局 　　为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 　　...这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。...为了兼容 IE，采用的是浮动方式来实现栅格系统： 即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。 　　Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。...对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为 flex 布局，行内元素也可以使用。

3K20

TW洞见 | 用“五个为什么”写CSS

问题找到了，但如何解决呢，虽然我在项目组内做了几次分享，还经常在Code Review的时候提出一些问题，却还是收效甚微。有时候知道什么是正确的很容易，但知道如何才能做到正确却很难。...Dev：“如果我不加最大宽度，页面上那个元素左边就会多出一部分，不然加个margin外边距可以吗？” UI Dev：“这个...我也不确定，我从没遇到过这样的问题，一定是哪里有问题。”...Dev：“好啊，CSS的问题也困扰我好久了，能解决就最好了。” UI Dev：“首先问问，为什么要给元素加最大宽度呢？” Dev：“因为不加就就会多出一部分呀。”...UI Dev：“那为什么这个元素会多一部分呢？” Dev：“因为没加最大宽度，开个玩笑，别生气，其实我也不确定，不过用DevTools看了一下，好像它的父元素的宽度也不对。”...有经验的UI Dev有时会通过经验来判断，直接写出这种class，Bootstrap这类框架就是这样的，但没有或较少经验的开发者就会产生疑惑。

80160
您找到你想要的搜索结果了吗？
是的
没有找到

Jump Start Bootstrap 第2章

Bootstrap建议我们应该把所有的行和列放在一个容器内，以确保正确的对齐和填充;Bootstrap中有两种类型的容器类:container和container-fluid，前者在浏览器窗口中创建一个固定宽度的容器...为了获得更好的结果，建议使用一个单独的容器，其中包含所有行。...但在大型显示器上如何呢？在上面的代码中，我们没有指定该元素在大型显示器上的表现。进一步的，Bootstrap将自动沿用在超小显示器上指定的布局。...最后，我们有一个完整的HTML页面响应式，可以手动调整浏览器宽度，动态地观察布局变化。我希望您在理解引导程序的网格系统时发现这个案例研究很有用。...由于我们在这里启动了一个新行，其中的任何列都可以跨12格，但是这一行的宽度将被限制到它的父类的宽度。 让我们用一个例子来说明这个问题。

2.9K40

下手响应式及断点设置分析

对于pc端，我们一般设置主体内容固定宽度居中，所以就以此作为断点；而平板竖屏因为宽度比较窄，所以都会全部占满空间，所以768px就代表了这个宽度；而544px其实我也不知道到底是某个平板的宽度（这个平板很小...（这个问题有知道的请告诉我下，查了很多资料都没找到） 现在看起来一下明白了，那么我们是否可以直接拷贝过来使用就可以呢？ 怎么使用这些断点？...全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点...的超大屏就没有意思了。...其实这个部分才是最难的，涉及到图片，table，nav等如何显示，一篇文章也说不完，所以推荐下一些学习的资源： RESPONSIVE IMAGES 101 最后推荐一本书《响应式Web设计》

67630

下手响应式及断点设置分析

对于pc端，我们一般设置主体内容固定宽度居中，所以就以此作为断点；而平板竖屏因为宽度比较窄，所以都会全部占满空间，所以768px就代表了这个宽度；而544px其实我也不知道到底是某个平板的宽度（这个平板很小...（这个问题有知道的请告诉我下，查了很多资料都没找到） 现在看起来一下明白了，那么我们是否可以直接拷贝过来使用就可以呢？ 怎么使用这些断点？...全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点...的超大屏就没有意思了。...其实这个部分才是最难的，涉及到图片，table，nav等如何显示，一篇文章也说不完，所以推荐下一些学习的资源： RESPONSIVE IMAGES 101 最后推荐一本书《响应式Web设计》

77410

下手响应式及断点设置分析

对于pc端，我们一般设置主体内容固定宽度居中，所以就以此作为断点；而平板竖屏因为宽度比较窄，所以都会全部占满空间，所以768px就代表了这个宽度；而544px其实我也不知道到底是某个平板的宽度（这个平板很小...（这个问题有知道的请告诉我下，查了很多资料都没找到） 现在看起来一下明白了，那么我们是否可以直接拷贝过来使用就可以呢？ 怎么使用这些断点？...全兼容模式一般内容体为流式，可以采用刚才的bootstrap关键断点，再额外增加一些局部断点美化页面以提升体验；而pc+平板的其实也比较简单，设置窄屏，宽屏，超大屏即可；最后对于只针对手机的则直接不设置断点...的超大屏就没有意思了。...其实这个部分才是最难的，涉及到图片，table，nav等如何显示，一篇文章也说不完，所以推荐下一些学习的资源： RESPONSIVE IMAGES 101 最后推荐一本书《响应式Web设计》

1.4K70

从box-sizing:border-box属性入手，来了解盒模型

大家好，又见面了，我是你们的朋友全栈君。...为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。...相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline...解决这类问题，可以用以下CSS： display:block; margin:0 auto; max-width:100%; 前两条属性display:block,margin:...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。

1.5K10

Bootstrap实战 - 瀑布流布局

简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式： 外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式； 行 .row 样式，必须包含在...，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。...目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。 官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。...给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 应该显示多少列，计算一个相对合理的布局方式。...IE 的兼容性更好一些，因为 Windows7 捆绑安装 IE 浏览器的缘故，国内使用 IE 的群体非常庞大，这使得我们在制作网页时不得不考虑 IE 浏览器的兼容问题。

2.8K40

移动端WEB开发之响应式布局

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...--解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题-->     <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js...预先定义好<em>的</em>样式来使用 可通过添加类名修改<em>Bootstrap</em> 原来<em>的</em>样式，注意权重<em>问题</em> 学好<em>Bootstrap</em> <em>的</em>关键在于知道它定义了哪些样式，以及这些样式能实现什么样<em>的</em>效果(去官网查找) 2.5....container（<em>bootstrap</em>里面设置了左右15px<em>的</em>内边距 ，加了row后会去掉container盒子<em>的</em>内边距） 响应式布局<em>的</em><em>容器</em> 固定<em>宽度</em> 大屏 ( >=1200px) <em>宽度</em>定为

4K20

移动开发之响应布局

响应时需要一个父级作为布局容器，来配合子集元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化...顾名思义就是一套框架，它有一套完整的网页功能解决方案。...1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断地更新迭代 让开发更简单，提高了开发的效率 2.2Bootstrap 使用 在现阶段我们还没有接触...容器，Bootstrap预先定义好了这个类，叫.container它提供了两个作此用处的类。...=1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap

2.2K20

移动端WEB开发之响应式布局

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...预先定义好的样式来使用 修改Bootstrap 原来的样式，注意权重问题 学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 2.5 bootstrap布局容器....container 响应式布局的容器 固定宽度 大屏 ( >=1200px) 宽度定为 1170px 中屏 ( >=992px) 宽度定为 970px 小屏 ( >=768px)...宽度定为 750px 超小屏 (100%) .container-fluid 流式布局容器 百分百宽度 占据全部视口（viewport）的容器。

3.4K31

html5开发手机端网页(移动端web开发的几种方式)

大家好，又见面了，我是你们的朋友全栈君。 最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？...段亮觉得有以下几点： 一、没有完整的思路和流程 就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。...（为广大不会UI设计的程序员，提供了福音） 2.上手快 你可以专心解决问题，冗繁的细节都丢给Bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。...目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。...如下图： 或者用火狐的测试工具：按shift+ctrl+M进行查看。 写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。

6.6K40

前端移动web-day05学习笔记

框架作用：提高开发人员的工作效率（ctrl + c/v 复制粘贴即可） 2.如何使用Bootstrap框架（该流程适用于所有的第三方框架） a.进官网:http://www.bootcss.com/...这个框架就是别人已经写好的css和JavaScript，我们要使用它，首先需要把这些样式和javascript相关文件下载下来，然后在我们的页面中引用这些文件就可以使用这个框架了，直接在这个网站下载，下载地址为...container尺寸是固定的（1170,970,750,100%） container-fluid的尺寸是铺满全屏: 100% b.row:行 默认没有高度，背景色、边框 默认宽度为100% 继承版心的宽度...：响应式版心容器 默认样式： 没有高度、边框、颜色 左右15px的padding 宽度是响应式 屏幕宽度 < 768 宽度100% 768 <= 屏幕宽度 < 992 宽度...750 992 <= 屏幕宽度 < 1200 宽度970 1200 <= 屏幕宽度 < 1200 宽度1170 container-fluid：流式版心容器 默认样式： 没有高度、边框

2.9K20

移动开发-响应式

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介.../ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身...--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--> 布局容器: Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类 container 类: 响应式布局的容器 固定宽度 大屏...类: 流式布局容器 百分百宽度 占据全部视口 (viewport) 的容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

2.4K20

web移动端开发(7)上传码云+响应式布局_bootstrap框架

这个计算再也不想用了,写的我累死了...还是这个插件比较香，但是嵌套还是不错的 后面越学越难,有点乱,晚点要重新看一遍....优点 标准化的html+css编码规范 提供了一套简介,直接,强悍的组件 有自己的生态圈,不断的更新迭代 让开发更简单,提高了开发的效率 bootstrap使用 在现阶段我们还没有接触js相关课程...布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器,bootstrap预先定义好了这个类,加.container,它提供了两个作此用处的类.很多东西都是预定义好的...我现在在.contain这个类里写了一个123,可以看到左右是有15px的边距的,而且也可以自适应....bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份.

2.8K11

JavaWeb之简单分页查询分析及代码

，后来配合休息和药，才基本恢复了，上个学期末学校的事也是多了一些，很多时间都用在了课业或者看一些技术书上，所以停更了算挺久，非常抱歉，很感谢即使停更，大家也没有离我而去，从今天起，我接着开始更新一些文章...但是如果存在一定数据量的情况下，这种方式着实有一些尴尬，他并没有解决了我们服务端的任何问题，反而会让用户在等待响应数据耗时过多，体验不佳，不过它仍然是一种分页方式 在这里我们重点讲解后端分页，所以我们简单的演示一下...，也把代码贴出来，由于我们 html 中使用的是 BootStrap 前端框架，所以我们借助了 bootstrap-table 这个前端分页插件 ?...-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。...总结 这篇文章到这里就基本结束了，这个样式是我参考某马中的一个样式布的局，使用 HTML + Ajax 替代了 JSP 然后后端的代码也对应全改写了 ，不过可以说是最简单的一种分页了，比较适合在JavaWeb

2.7K20

【Java 进阶篇】深入了解 Bootstrap 栅格系统

本文将深入介绍 Bootstrap 栅格系统，面向初学者，帮助您充分了解如何使用它来构建响应式网页。 什么是 Bootstrap 栅格系统？...现在，让我们逐步分解这个示例的关键部分： container：容器是 Bootstrap 栅格系统的最外层包裹元素。它用于包含行（row）和列（col）以及其他内容。...容器的作用是确保内容在不同屏幕尺寸上居中对齐，并提供一些内边距，以便内容不会触及屏幕的边缘。 row：行是一组列的容器。每行（row）在页面上都是水平排列的，可以包含一个或多个列（col）。...行的主要作用是创建列的组合，使它们在同一水平线上对齐。 col-sm-4：列是页面的主要构建块，用于包含实际的内容。在这个示例中，我们使用了三个列，每个列占据了4个网格列的宽度，总和为12列。...-- 列3（仅在大屏幕上显示） --> 在这个示例中，我们有三列，每列都根据不同的断点设置了不同的宽度。

25120

第124天：移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...1、由于轮播图片超宽造成的影响 　　- 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度 　　- 而且Bootstrap的样式中默认将图片的max-width...，最终背景图片的大小是300\*600 　　　　* 因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300\*600 （3） contain 　　　　+..."大图路径"） 　　　　+ 通过JS的方式获取屏幕的宽度； 　　　　+ 判断屏幕宽度是否小于一定的值（如：768） 　　　　+ 根据判断情况决定使用具体的大图还是小图 三、javascript...， - 当用户手动调整页面宽度过后没有及时发生变化， - 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题 1 function 窗口变化后执行的函数名(){ 2 //

6.2K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券