-
2021-06-14 02:59:03常见网页布局
* {
margin: 0;
padding: 0;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: #ff80c0;
margin: 0 auto;
}
li {
list-style: none;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: #8000ff;
margin-right: 10px;
}
/* 中间要空格 */
.box .last{
margin-right: 0;
}
.footer {
height: 200px;
background-color: #00ffff;
margin-top: 10px;
}
top- 1
- 2
- 3
- 4
一键复制
编辑
Web IDE
原始数据
按行查看
历史
更多相关内容 -
CSS网页布局实例 常见的12种网页布局
2020-09-25 13:59:46在一个国外网站看到的12种常见的div+css布局模板，是可以根据屏幕分辨路自适应宽度的动态布局，感觉很好。 -
常见网页布局
2022-07-25 14:35:58常见布局展开全文浮动布局注意点
-
先有标准流的父盒子排列，再才在父盒子里面添加子盒子，子盒子在父盒子里面浮动；
-
父盒子里面的子盒子一旦有一个浮动，所有子盒子都应该浮动
-
浮动的盒子只会覆盖后面的标准流，对前面的标准流没影响
最常见的是以下布局
注意事项
-
top（首行）和footer（末尾行）都是与浏览器同宽的，因此不需要写宽度；
-
开始要 清空内外边距，防止出现有些盒子自带边距，比如<ul><li>
-
注意合理设置子类，增加代码复用
具体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { /* 不加这句用li就会出错！！！ */ margin: 0; padding: 0; } .top { /* 和浏览器一样宽，不用指定宽度 */ height: 42px; margin: 12px auto; background-color: gray; } .banner { width: 580px; height: 109px; margin: 0 auto; margin-bottom: 12px; background-color: gray; } .four_small_box { width: 580px; height: 86px; margin: 0 auto; margin-bottom: 12px; background-color: skyblue; } li { list-style: none; float: left; width: 139px; height: 86px; margin-left: 0px; margin-right: 8px; background-color: yellow; } .four_small_box .last { margin-right: 0px; /* 除了和li冲突的，其余的不会覆盖 */ } .four_big_box { width: 580px; height: 181px; margin: 0 auto; margin-bottom: 12px; background-color: skyblue; } .four_big_box .big { height: 181px; background-color: pink; } .four_big_box .last { height: 181px; background-color: pink; margin-right: 0px; /* 除了和li冲突的，其余的不会覆盖 */ } .footer { height: 145px; margin: 0 auto; margin-bottom: 12px; background-color: gray; } </style> </head> <body> <div class="top"></div> <div class="banner"></div> <div class="four_small_box"> <!-- 这里div的子类就不要用div，可以用ul的li --> <ul> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul> </div> <div class="four_big_box"> <ul> <li class="big">1</li> <li class="big">2</li> <li class="big">3</li> <li class="last">4</li> </ul> </div> <div class="footer"></div> </body> </html> 
-
-
网页排版布局常见问题有哪些?
2021-11-24 17:54:19关于排版布局,好的页面排版重点突出,看起来舒适不费劲,整体简洁大方,更重要的是能让用户更好的更方便的浏览网站,而在书写的过程中,无论你写的是什么代码,都会犯一些小错误,而小错误往往不起眼难以引起注意,结果花...展开全文
关于排版布局,好的页面排版重点突出,看起来舒适不费劲,整体简洁大方,更重要的是能让用户更好的更方便的浏览网站,而在书写的过程中,无论你写的是什么代码,都会犯一些小错误,而小错误往往不起眼难以引起注意,结果花大量的时间来调试和排错.查看下面这份CSS网页布局中易犯的7个小错误，努力的修正可能会犯的错误，加速你的前端开发效率。所以列举以下网页在排版中常见的问题
1: 每行文字太多
用户在阅读许多行文字时间久了会引起眼睛的疲劳，在从一行到另一行时读者不得不经常移动他们的眼睛和头部，而这种让人疲惫的布局模式是不受欢迎的,经网络有关调查表明每行文字保持文字在50 - 60个字符以下,看起来最为舒适,那这就要求在进行文字描述的时候尽可能的简洁简短。
2: 没有足够的行间距
行间距能改善整页中文字块的阅读效果，这样做是为了当读者阅读下一行的时候不会找不到他们的位置.太小太密集的文字可能引起一种受压迫感。不同的字体需要不同的行间距这很重要。或多或少需要改变版本的高度来降低页面中文字之间的密集程度,因为页面中的文本重点突出有引导用户浏览的作用,所以要权衡好文本之间的间距也是非常重要的.
3: 太多的级别的文本没有区分重点
在一页面上有太多的字体可能会使注意力不集中和不能突出重点。页面中的文字有些是需要突出让用户一眼能看到的重要文字,那么这模块就要弱化其他的文字,比如通过文本大小,颜色,文本粗细等方式来弱化。太多种字体可能会引起用户感觉得这个页面中找不到重点,这可能会使用户错过一些重要的东西,所以通常字体的选择器在3个甚至更少，
4: 新手程序员对html标签的语法规则的检查
HTML5的语法规则没有之前版本的严格,包容性强大,但是我们尽可能的遵循他的语法规则,而关于标签的书写容易丢失的就是标签中所出现的一些符号容易丢失或者写成中文符号,比如尖括号,引号,斜杠等,在一个就是标签之间的嵌套关系,即使是非常熟练的程序员也经常弄错嵌套关系,有时候并不是自己写错了嵌套关系,而是因为丢失了某一个符号引起的,比如斜杆
5、检查CSS语法是否正确
CSS的语法首先是选择器{属性:值;} 这条语句中出现的符号都是英文符号,常见的是拼写错误,冒汗成了等号,丢失分号,丢失大括号等。可以在浏览器中打开开发者工具中审查,错误的写法会直接体现出来可以利用CleanCSS工具来检查 CSS的拼写错误
6、快速找出错误模块
经常看到有小伙伴在写也页面的时候发现底下的元素突然跑到了已经写好的区域,或者嵌套关系出现了问题,这时候打乱了整个页面的布局结构，这时候我们可以使用排除法,通常在开发都是模块化开发,只要按照顺序将每个模块的div逐个注释掉,直到注释掉某个模块后页面显示正常,则最后注释掉的模块就是错误发生的模块。
7、页面样式初始化
我们都知道html中有些标签带有默认的内外边距或者间距,这些间距是我们不需要的,同时在不同的浏览器中某些间距解析大小还不一致,这就极大的影响我们对页面的布局,这些属性包括margin、padding等。因此最好在开发前根据需求将出现的标签对应的取消他们的默认margin、padding值,将他们的值设置为0等。
上面的网站布局方式只是一些常见的企业类网站页面布局，布局的方式还有更多。实际上，布局就像是摆积木，只要遵循重要信息靠左、靠上，次要信息靠右、靠下的原则即可，并没有规定一定要怎么布局，或者这种布局方式要比那种更好，只能说某种布局方式更为合适某个页面而已。所以，大家多做尝试，从你手头正在做的项目开始，尝试一下不同的布局方式，给你的设计增加一些创意和新鲜感。
以上与大家分享的内容，如果需要领取免费学习资料，或者学习交流，扫码加我拉你进群
-
UI设计中常见的各种布局有哪些？|优漫动游
2022-03-21 17:00:12UI设计中常见的各种布局，了解这些对于我们UI设计师来说简直是开了上帝视角，特别是像现在B端和大屏数据可视化都是建立在自适应布局基础之上展开全文今天优漫动游小编跟大家说一下UI设计中常见的各种布局，了解这些对于我们UI设计师来说简直是开了上帝视角，特别是像现在B端和大屏数据可视化都是建立在自适应布局基础之上的，否则的话这两个东西根本没法做。
在讲之前，我们先来科普一下开发，开发大体上分为前端和后端，而我们作为UI设计师对接最多的就是前端开发，前端开发有一个主要的工作，就是负责把我们的设计稿通过代码变成真实可用的界面，那么前端开发里面又分为web前端开发和原生开发，也就是ios和安卓。但是这三个可以统称为前端开发，而我们今天要讲的各种布局就是从css里面来的，而这个css属于web前端开发里面一个主要的技能，也叫样式表，所有涉及到外观的网页都是通过调整css实现的。
流式布局
因为固定布局使用的是像素，局限性非常大，所以后来就有了流式布局，流式布局相对于固定布局最大的区别就是从像素改用了百分比为单位。也就是说，界面中的各种盒子，都可以写成百分比了，而这个百分比是可以根据页面的宽度做百分比的变化，所以说它是相对值的单位。而它相对的就是页面的总宽。
这种布局是为了适应电脑端不同屏幕的大小，但是它有一个明显的缺点，就是内部的字体不会跟着变化，这个只是界面大小变化了，但文字还是原来的大小，因为百分比单位没法让文字也根据这个宽度去做自适应变化。所以这里大家理解它的意思就行，它的关键词就是百分比，流式布局和固定布局都是比较早期的两种选择，
固定布局
下面我们就来说一下各种的布局，我们先来看看固定布局。早期的网页布局都很简陋，那时候没有什么特别复杂的需求，而且最关键的是大家的显示器也都差不了多少，所以那个时候就很流行一种布局，那就是固定布局。顾名思义，就是固定那不动，不会跟着浏览器的宽度做变化，大家最常见的就是那种居中的布局。
固定布局的关键词是像素，也就是说跟我们显示器屏幕上的像素点是一一对应的，这个像素是绝对值单位，也正因为用了像素单位，所以网页布局是固定的。但是这样一来，固定布局的缺点就很明显了，那就是在较小的屏幕上，你看这类布局时，你会发现网页显示不全，而反过来，那种在大屏幕下的显示效果，就会有很多无意义的空白，也正是由于固定布局的局限性，才有了后来UI设计师都会问到的问题，就是设计稿尺寸要设置多大。
弹性布局
下面我们再来看弹性布局。前面我们发现像素和百分比在布局上都有一些局限性，所以后来又有了em和rem，这两个也是相对单位，而且也是现在开发经常使用的。它们是根据一个基准的字体大小去对这个字体做百分比变化的。
所以说这个弹性布局是根据基准字体大小去弹的，基准字体大，那么整个页面就会跟着大，如果小也会都跟着小，就像皮筋一样。但是它有点像把整个页面给强制放大缩小的意思。
好了，目前我们了解了固定布局、流式布局、还有弹性布局。这里要跟大家说的是，这些所有的布局是可以混着用的，并不是用了这个就不能用那个。从我们UI设计师的视角来看，具体的每个功能块，可能这里用弹性好，但是那里可能用固定或者流式更好，所以我们在理解的时候一定要把思路打开，要灵活运用。
响应式布局and自适应布局
为了方便大家理解，我这里就把自适应布局和响应式布局放在一起说了，以及给大家解释为什么响应式布局比自适应更高效。
响应式布局是根据页面的宽度自动调整，比如通过一些隐藏元素、改布局，改顺序、改样式这些方法，去适配所有设备宽度，它的特点就是一镜到底的感觉，就是你能从电脑端直接无缝缩放到最小的移动端，这种就是响应式布局。相对的我们再来看自适应布局，自适应布局是先预设了一些布局模版，然后根据用户的机型去判断需要展示哪个模版，但是它不是一镜到底，缩放到一定宽度的时候，只有刷新之后才会变成这个所谓的移动端的界面。
经过上面的对比，我们能明显感觉到响应式布局似乎更高效，因为它可以全程无缝切换。那么它为什么叫响应式？简单来说就是一个页面根据不同的设备尺寸响应做出调整。所以这里响指的就是不同设备的尺寸，就像浏览器窗口，我们只有主动让窗口小了，它才能根据小了之后的窗口做具体的变化，这就是响应。
我们再来看自适应布局，自适应布局其实是有一个类似断点的东西的，用这个断点来判断当前是在哪个宽度范围内，开发得预先提前根据这些不同的尺寸做出来一些针对性的模版，那这样的话，模版肯定不止一个，所以从开发的角度来说，工作量就变多了。
我们说到这儿呢，我要解释一下，因为对于UI设计师来说，不管是自适应布局还是响应式布局，我们都是要根据不同的宽度去做对应的布局设计，这个活我们设计是跑不掉的，具体用哪种布局方案，其实是开发的事。但是大家在跟开发对接的时候，不需要指挥他怎么做，只需要把设计稿给他讲明白就行，讲明白具体哪一块要用到哪种布局。当然了，自适应布局并不是说要开发做两个网站，他们实际上还是共用一个内容，只不过样式上需要提前做两套，这就有点像网站分身的意思；但是响应式只需要做好一套就能完美的应对，从手机到各种超大屏幕的尺寸，前提是作为UI设计师的我们要把布局设计做的足够好，我们做的越好，扩展性也就越强。
以上就是优漫教育小编为大家介绍的“UI设计中常见的各种布局有哪些？”相关内容，学习ui设计培训，可以参考优漫教育提供的ui学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，根据优漫提供的ui学习路线图，可以让你对学好ui需要掌握的知识有个清晰的了解，并能快速掌握ui设计！
-
移动端有哪些常见布局方式？
2021-07-14 20:28:22移动端有哪些常见布局方式？ 一、固定布局 固定布局是第一次做移动端时最好的选择方式,思路沿用PC端,上手比较快。在标签里把 viewport 加好,然后设想整个网页的宽度为 320px 即可。 其他地方根据 PC 端来布局。 缺点... -
017常见网页布局
2022-02-13 12:21:19一、常见的布局方式 1、第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=... -
几种常见的网页布局
2021-07-14 22:30:03两列自适应布局：一列由内容撑开，另一列撑满剩余宽度 <style> * { margin: 0; padding: 0; } .content { width: 1000px; height: 500px; background-color: lightblue; } .left { float: left; ... -
移动端H5常见的布局方式有哪些
2021-06-13 04:22:18随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配移动端设备屏幕尺寸非常多... -
一招秒杀常见网页基本排版布局
2021-11-28 23:50:221.单列布局 网页分为上中下三个模块 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网页上中下</title> </head> <style> body{ .... -
CSS布局有哪些？css常见的布局方式（附代码）
2021-06-24 10:04:32css布局有哪些？css布局可以让页面看起来比较美观整洁，接下来的这篇文章给大家总结了css中常见的几种布局方式，让我们具体的看一看。水平居中布局1、margin + 定宽Demo.child {width: 50px;margin: 0 auto;}运行... -
五种常见的网页布局
2019-11-22 17:43:411.自适应布局 特点：页面窗口发生变化时，网页元素宽度和字体大小不变，元素位置会变化 方案：为不同的屏幕分辨率(屏幕宽度为1200,1920)定义布局，相同的类名指定不同样式代码（媒体查询），bootstrap的栅栏系统和... -
网页常见布局
2021-01-23 11:52:45网页常见布局 一、标准文档流 在没有任何样式的修饰下，所有元素，将从上至下，从左至右进行排列 块级元素：独占一行，可以设置宽高大小 行级元素：从左往右依次排列，不能设置宽高和大小 二、脱离标准文档流 ... -
CSS常见的布局方式
2022-07-20 02:28:08网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块... -
Dreamweaver中网页布局的方法教学设计x_常见网页布局
2020-11-25 20:42:44Dreamweaver中网页布局的方法教学设计 授课班级高一(3)授课教师:曹雪丽 授课时间2004.5.12 教材分析 1 .教学目标 教学目标既是教学的出发点和归宿又是师生双边活动的中介因此我参照高中新课 程标准和高中学生现有的... -
CSS常见网页布局
2022-02-20 18:48:52这个网页布局主要用到了CSS块级元素浮动和清除浮动，以及类外边距的设置 1.首先将网页分为4个标准流块级元素，分别是：top,banner,box,fotter 即boday部分为： <div class="top">top</div> <... -
移动端常见布局
2021-11-08 22:02:42移动端技术选型 1.单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） ...流式布局方式是移动Web开发使用的比较常见的布局方式 max-width(max-height)最大宽度 min-widt -
CSS网页布局开发时的常见问题小结
2020-09-25 14:15:03在进行CSS网页布局开发时，您肯定遇到过形形色色的布局问题，虽然提供了大量的教程，但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。 -
常见的布局方式有哪些？解释不同解决方案的优缺点
2019-06-17 22:47:00多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。 一列定宽，一列自适应 float + margin IE 6 中会有3像素的 BUG，... -
html布局的常见类型有哪些？html的三种布局特点分析
2021-06-11 12:54:52html布局的常见类型有哪些？html中的布局方式有三种：流动布局、浮动布局以及层模型，html的这三种布局各有个的特点，本篇文章就给大家简单的说说html的三种布局方式的特点。1、流动布局(html网页默认的布局方式)... -
结合CSS3的布局新特征谈谈常见布局方法
2020-12-13 16:50:24这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。 Segmentfault的主页就是T型布局的。由于网页太长了，没有截取底部。 2... -
网页常见的布局结构
2013-11-12 13:13:32一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、... -
网页设计常见的5种布局方式
2021-06-27 05:54:40每年网页设计布局方式都会有创新，产生新的布局方式，但那些常见的、经典的布局方式永远不会过时。下面石家庄网页设计-金色方向就分享网页设计常见的这5种布局方式，以及它们适用的情形，供大家参考。1、顶部大图... -
css中的五种常见页面布局
2021-06-20 03:00:21grid布局 这是grid布局 这是一段文字 这是一段文字 以上就是css中的五种常见页面布局的详细内容，更多请关注php中文网其它相关文章！ 声明：本文转载于：csdn，如有侵犯，请联系admin@php.cn删除 -
常见的网页布局
2020-01-02 10:26:40一、网页常见布局 二、网页布局分类 1、固定布局： 以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸 2、可切换的固定布局： 以像素作为页面的基本单位，参考主流设备尺寸，设计几套不同... -
页面布局的方式有哪些？
2020-07-08 13:18:26常见的页面布局方式有六种：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 （1）、双飞翼布局 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早...
