移动端的网站模板,塘下网站建设,福州建设网站的公司,网站建设技术服务清单目录 文章目录 一.常见的网页布局 二.标准文档流 标准文档流常见标签 三.display属性 四.float属性 总结 一.常见网页布局 二.标准文档流 标准文档流常见标签 标准文档流的组成 块级元素div、p、h1-h6、ul、ol等内联元素div、p、h1-h6、ul、ol等内联元素span、a、strong、em、img等 三.display属性 在HTML中display属性用于指定元素的展示方式。该属性可以接受以下几种值 总结--display特性 实现块级元素与行级元素的转变控制块级元素排到一行控制元素的显示和隐藏。 演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylediv{border: 1px seagreen solid;width: 100px; height: 100px;}span{border: 1px red solid;}/style/headbodydiv我是元素/divspan我是Span元素/Span/body
/html none属性 设置的元素不会被显示。 div{width: 100px; height: 100px;border: 1px seagreen solid;display: none;} inline 元素被视为内联元素并在同一行内显示。 div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline;} inline-block 该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。 div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline-block;} 四.float属性
浮动属性的特点 元素浮动后会脱离文档流不再占据原来的空间而是向左或向右移动其他元素会填充到浮动元素所占据的空间。浮动元素并可以与其他元素并排显示如果空间不够会自动换行或换列并可以设置宽度和高度浮动元素可以通过设置宽度和高度来确定其占据的空间大小 演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title浮动/titlestylediv{margin: 10px; padding: 5px;}#father{border: 1px red solid;}.layer01{border: 1px blue dashed; }.layer02{border: 1px pink dashed; }.layer03{border: 1px green dashed; ;}.layer04{border: 1px skyblue dashed; font-size: 30px; line-height: 100px;}/style/headbodydiv idfatherdiv classlayer01img srcpicture1.png alt日用品/divdiv classlayer02img srcpicture2.png alt图书/divdiv classlayer03img srcpicture3.png alt鞋子/divdiv classlayer04浮动盒子可以向左浮动也可以向右浮动直到外边缘碰到包含框或另一个浮动盒子为止这里使用三个图片和本段文字来讲解浮动属性在网页中的应用根据所在的div分别向左/ 右/不浮动。/div/div/div /body
/html left 设置元素向左浮动 .layer01{border: 1px blue dashed;float: left;} 设置向左浮动后产生上述网页布局的原因 设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动剩余元素会自动填充浮动元素的原有位置并防止遮住浮动元素会自适应移动。 .layer02{border: 1px darkorange dashed; float: left;} right
.layer01{border: 1px blue dashed;float: right;} .layer02{border: 1px darkorange dashed; float: right;}
总结 浮动属性中的左移动/右移动代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。 清除浮动 清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。 移动规则 清除左浮动设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。 清除右浮动设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。 案例 向右浮动并清除向左浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: left;} 上述布局形成原因 排在元素layer02前面的元素layer01为右浮动并未设置左浮动对于layer02设置清除左浮动之后没有先行元素向左移动因此layer02元素仅执行向右移动。 向右浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: right;} 上述布局形成原因 排在元素layer02前面的元素layer01为右浮动对于layer02设置清除右浮动之后有先行元素向右移动因此layer02元素会先向右移动并停留在先行元素layer01的下方。 向左浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: left;clear: right;} 向右移动并清除两侧浮动 清除两侧浮动的元素将停留在最低元素的下方并执行浮动的指令向右移动。 .layer03{border: 1px green dashed; float: right;clear: both;} 五. 解决边框塌陷问题
父级边框塌陷的原因 浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界进而导致边框塌陷的现象发生。相邻的两个元素的margin相遇时较大的margin会覆盖较小的margin导致边框塌陷的现象发生。 下图为元素浮动导致的父级边框塌陷 overflow属性 在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素并清除浮动例如 语法
#father{border: 1px red solid;overflow: hidden;} after伪类 在浮动元素的父元素中添加一个带有 content:; display:table; clear:both; 属性的伪元素。例如: 语法
#father:after{content: ;/**内容清空**/display: block;/**设置该元素为块元素**/clear: both;/**清除两侧浮动**/} 六.解决内容溢出问题
overflow属性 内容溢出案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css#d1{width: 200px;height: 200px;border: 1px solid rebeccapurple;}/style/headbodydiv idd1img srcpicture1.png/p都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄/p/div/body
/html overflowscroll 无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。 语法
#d1{overflow: scroll;} overflowauto 若内容被修建则设置浏览器以滚动条的方式查看剩余内容内容未溢出则无需修建不会设置滚动方式。 练习
一.制作热门活动页面 二.制作电视剧详情列表页面 三. 制作QQ会员页面导航 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle*{margin: 0px; padding: 0px;}/**设置根边框的内外边距**/a{text-decoration:none ;}/**去除超链接下划线**/.nav-header{height: 90px; width: 100%; background: rgba(0, 0, 0, .6); border: 1px red solid;}.head-contain{width: 1180px; height: 90px; margin: 0 auto; text-align: center; border: 1px yellow dashed; border-width: 5px;}.top-logo,.top-nav,.top-nav li,.top-right{ /**针对上述选择器同时设置样式**/height: 90px;display: inline-block;vertical-align: top;/**垂直对齐方式靠上**/}.top-nav{margin: 0,55; border: 1px blue solid; border-width: 5px;}/**设置右外长度边距**/.top-nav li{line-height: 90px; width: 90px;}.top-nav li a{display: block; text-align: center; font-size: 15px; color: aliceblue;}.top-nav li a:hover{color: blue;}/**设置鼠标点击链接的样式**/.top-right{border: 1px green solid; border-width: 5px;}.top-right a{display: inline-block; font-size: 15px; text-align: center; margin-top: 15px;border-radius: 35px;/**设置边框为圆角**/}.top-right a:nth-child(2){width: 93px;border: 1px solid orange ;position: relative;top: 20px;}.top-right a:nth-child(3){position: relative; top: 20px;}.top-right a:nth-child(2):hover{color: gold;background-color: orange;}/style/headbodydiv classwrapheader classnav-header!--设置一个根边框用于添加classhead-contain中的元素--div classhead-contain!--设置一个二级边框添加下列元素--a href# classtop-logoimg srcpicture1.png width145px height90px//anav classtop-nav!--nav标签定义导航模块--ul!--定义一个列表--lia href功能特权/lilia href游戏特权/lilia href生活特权/lilia href会员活动/lilia href成长体系/lilia href年费专区/lilia href超级会员/li/ul/navdiv classtop-right!--设置另一个框架用于存放下列元素--a href登录/aa href开通超级会员/a/div/div /header/div/body
/html 黄色边框为二级边框 -黄色边框外层红色边框为根边框-蓝色边框为子边框1-绿色边框为子边框2 总结
