本文详细介绍了CSS的浮动布局、BFC和IFC的概念及其应用，以及HTML5中的表格、列表、语义化标签和常用属性。通过实例展示了如何创建轮播图，同时探讨了网页布局中header、nav、aside、main、section、article和footer等标签的使用。文章还强调了CSS定位和容器高度计算的重要性，并列举了HTML5新增的交互元素如meter、progress和dialog。
1.CSS浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
border: 1px solid #000000;
}
.box1,.box2{
width: 200px;
height: 150px;
}
.box1{
background-color:#ff0000 ;
float: left;
}
.box2{
background-color:#55aa00 ;
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</html>
2.浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.info-show{
width: 600px;
padding: 20px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.head-scuipture{
float: left;
text-align: center;
margin: 20px;
background-color: #fff;
}
.head-scuipture .photo{
width: 200px;
height: 300px;
border: 1px solid #ccc;
text-align: cennter;
display: table-cell;
vertical-align: middle;/* 垂之举中 */
}
.discript{
width: 340px;
float: left;
height: 290px;
border: 1px solid #ccc;
padding: 10px 0 0 20px;/* 上/右/下/左 */
}
</style>
</head>
<body>
<div class="info-show">
<div class="head-scuipture">
<div class="photo">头像</div>
<div class="txt">姓名</div>
</div>
<div class="discript">描述</div>
</div>
</body>
</html>
3.盒子模型
4.表格和列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
table,td{
border: 1px solid #666;
border-collapse: collapse;
margin: 0 auto;
width: 500px;
}
</style>
</head>
<body>
<table >
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
</body>
</html>
列表样式
5.轮播图
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="carouse.css">
</head>
<body><!-- .carousel>ul.carouse-imgs>li*3>a[href=#]>img[src=banner_0$.jpg alt=banner] -->
<div class="carousel">
<!-- 1.轮播组图 -->
<ul class="carouse-imgs">
<li><a href="#"><img src="img/banner_01.jpg" alt="banner"></a></li>
<li><a href="#"><img src="img/banner_02.jpg" alt="banner"></a></li>
<li><a href="#"><img src="img/banner_03.jpg" alt="banner"></a></li>
</ul>
<!-- 2.控制器 .prev+.next前后翻页-->
<div class="prev"></div>
<div class="next"></div>
<!-- 3.计数器 -->
<div class="count">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.carousel{
width: 1000px;
height: 300px;
margin: 0 auto;
background-color: #444;
position: relative;/* 相对定位 */
overflow: hidden;
}
.carouse-imgs{
width: 99999px;
}
.carouse-imgs img{
width: 1000px;
height: 300px;
}
.carouse-imgs li{
float: left;
}
.prve{
width: 45px;
height: 45px;
background-image: url(banner.jpg);
position: absolute;/* 绝对定位 */
left: 50px;
top: 50%;
margin-top: 16px;
}
.next{
background-image: url(banner.jpg);
right: 50px;
}
.count{
width: 1000px;
height: 10px;
position: absolute;
bottom: 25px;
}
.count ul{
width: 120px;
height: 10px;
margin: 0 auto;
background-color: #f00
}
.count ul li {
width: 10px;
height: 10px;
background-color: #666;
opacity:.5 ;
float: left;
border-radius:50% ;/* 圆角 */
}
.count.active{
background-color: #ffc392;
opacity: 1;
}6.定位
7.BFC和IFC
BFC&IFC
FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
分为：BFC和IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
i) 浮动元素（float除none以外的值）
ii）定位元素（position(absolute/fixed))
iii）display（值为inline-block/table-cell/table-caption时）
iv）overflow（值为hidden/auto/scroll时）
b）BFC特性（规则）
i)内部的盒子会在垂直方向上一个接一个的放置
ii)垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii)BFC的区域不会float元素区域重叠
iv)计算BFC的高度时，浮动元素也参与计算
v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
c）BFC的作用
i)解决margin重叠的问题（添加独立BFC）
ii)解决浮动高度塌陷的问题（在父级添加overflow:hidden）
iii)解决侵占浮动元素的问题（添加overflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a）形成IFC的条件
i)font-size
ii)line-height
iii)height
iv)vertical-align
b）IFC特性（规则）
i)IFC的元素会在一行中从左至右排列
ii)在一行上的所有元素会在该区域形成一个行框
iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
vi)行框的元素内遵循text-align和vertical-align
6.容器的高度：
height = line-height + vertical-align
8.网页布局标签
header:页首
nav:导航栏
aside:侧边栏
main:主体
section:区块
article:文章
footer:页尾
9.语义化标签
1)mark:高亮显示(行级)
2)details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块等
3)meter:定义度量衡
属性:value/min/max
4)progress:进度条
属性:value/min/max
5)dialog:对话框或窗口
6)figure:用于对元素进行组合（一般用来组合一张图的标题、图片和图片描述等）
10.HTML5常用属性
1）contentEditable
将标签转换为可编辑状态。可用于所有标签。它的值有true/false。
2）hidden
对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为hidden。
3）data-*
用于存储页面或应用程序的私有自定义数据。一般用于传值。
4）multiple
规定输入域中可选择多个内容。用于表单组件中，如file/select。
5）required
约束表单元互在提交前必须输入值。用于表单组件中，需要结合提交按钮使用。
6）pattern
用于验证输入字段的模式。用于表单组件中，需要结合提交按钮使用。
表单组件
1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本一日期时间
11）year：年份
12）month：月份
13）time：时间
表单属性
1）formaction:修改action数据提交的地方
2）formenctype:修改表单请求的类型
3）formmethod:修改数据提交的方法
4）form:设置表单元素属于哪个表单
5）novalidate:不验证
1input属性
1）autocomplete:自动完成
用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有：
on/off，默认为on。
为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。
2）autofocus:自动获焦
3）step:步长
4）multiple:多选
5）pattern:正则匹配
6）placeholder:输入提示
7）required:必须输入
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
