查看“盒子布局的使用技巧”的源代码
←
盒子布局的使用技巧
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==盒子布局的元素== *只有块级元素才可以进行盒子布局 *'''Tips:块级元素与行内元素''' *[[文件:w2-13.png|500px]] *最常用的块级元素是可以作为容器的'''层(div)''' ==盒子布局的两种方法== 到现在为止,我们学了盒子布局的两种方法 ===上下布局=== *[[文件:W2-18.png|500px]] <nowiki><!DOCTYPE > <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style type="text/css"> h2{text-align:center;} p{text-align:left;} .layer1{width:100%; height:100px; background:blue;color:white;text-align:center;} .layer2{width:70%; height:300px;margin:0px auto;color:black;} .layer3{width:100%; height:30px; background:blue;color:white;text-align:center;} </style> </head> <body> <div class="layer1"><h1>顶部</h1></div> <div class="layer2"> <h2>信艺学院开展教师结对子活动<h2/> <p>为让年轻教师更好地适应高职教育教学工作,进一步提高教学能力水平,提高教育教学质量,信息与艺术学院组织了教师“老带新”结对子活动,9月19日下午,活动的启动仪式举行。 </p> </div> <div class="layer3">底部</div> </body> </html></nowiki> *我们在定义完几个盒子之后,也自然地完成了他们在页面中的上下排列。 *层标记<nowiki><div>…</div></nowiki>,对于div的定义通常包含层的宽度width、高度height、填充、边距、边框和背景等等。 *在上下布局中,盒子如何实现水平居中? ===左右布局=== *所有块级元素的盒子默认都是上下排列的 *使用CSS提供的浮动样式float能够将这些盒子左右排列。 *[[文件:W2-42.png|500px]] *代码: [[文件:web4-28.png]] [[文件:web4-29.png]] *详见 [[项目实训4]] [[项目实训4_答案]] ==盒子的使用技巧== *结合样例,思考以下问题:[[项目实训4]] [[项目实训4_答案]] ===盒子如何命名=== *盒子的命名尽量有意义一些,如nav、section等等 *不要随便用任意的字母和数字命名。 ===怎样为盒子内的不同标签设置不同的样式=== *使用选择符:标记名选择符、id选择符、class选择符、子对象选择符 *拓展:[[CSS的选择符(二)]] ===在水平方向只有一个盒子时,如何使盒子居中?=== *设置盒子的水平边距为auto <nowiki>.layer2{width:70%; height:300px;margin:0px auto;color:black;}</nowiki> ===如何设置盒子高度=== *问题:为什么有的页面看起来很好,但是浏览器一缩小之后盒子的布局会混乱? *[[文件:w2-45.png]] *原因:盒子的height属性没有设置为auto,导致盒子的高度过分的死板,不能随浏览器的大小而自动调整。 *解决方法:将盒子的高度设为auto ===如何消除缝隙=== <nowiki>*{margin:0;padding:0}</nowiki> *这是通用选择符,通过在CSS中加添这一句,可以消除所有盒子之间的缝隙。 *注意,p标签也是盒子,加上这一句代码的副作用是,相邻p标签之间的间距也变小了。 ===各种属性的优先级=== *各个样式表的优先级根据选择符确定 *原则是应用范围越广的选择符级别越低,限制条件越多即应用范围越小的选择符优先级越高。 *比如,我们假如在CSS中加入了这两个规则之后,则后者的优先级比前者高 *p标签的样式优先执行后者 <nowiki>*{margin:0;padding:0}</nowiki> <nowiki>p{margin:5%;padding:5%}</nowiki> ===如何为盒子取色=== *用浏览器取色器 *具体请百度搜索“如何用浏览器取色” ==巩固练习== *自行设计上下排列和左右排列的盒子布局各一个。 *给你的盒子加上已知的各种属性: **将盒子边框分别设置为点状线、实线、虚线、双线 **将盒子边框的粗细分别设置为粗、细、中等、10px **为4个盒子的边框各设置不同的颜色 **将4个盒子的内填充设置为2% 4% 3% 4%; **将4个盒子的外边距设置为2% 4% 3% 4%; **将盒子设置为不同的背景颜色 **将盒子设置为不同的背景图像 **将盒子的背景图像设置为水平平铺 **将盒子的背景图像设置为盒子中央
返回至
盒子布局的使用技巧
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息