通过这次课程，我学会了定位布局+浮动布局，学会了定位使用遮罩小技巧，以及3种导航方式，分别为下拉菜单，列表菜单，图标菜单。并且通过CSS做好排版。
定位 relative=相对定位 absolute=绝对定位 fixed=固定 不受浏览器滚动影响。 一般来说 子绝父相 absolute 以父级定位标签为参照点，若没有找到就用浏览器做绝对定位 脱离文档流；z-index 表示层级，值越大越高；relative 相对于自身位置的定位 没有脱离文档流；
a是行内标签，如果变为转为block 块级元素 宽度继承父级的宽度如：“li”
1关于行内元素和块状元素的说明
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
2.行内、块状元素区别：
(1).块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
(2). 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效
(注意：块级元素即使设置了宽度，仍然是独占一行的)
(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
3.行内、块状元素：
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷视频网站</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style: none;}
.l {float: left;margin-right: 3px;}
img{border-radius: 10px;}
.clear{clear: both;}/*清楚两边的浮动*/
a{color: #000;text-decoration: none;}
.contents{width: 1740px;margin: 0px auto;}
.hot_tv{line-height: 70px;}
.hot_tv ul{padding: 0 30px;}
li img{width: 240px;height: 360px;}
li{float: left; }
.mr{margin-right:10px; }
.hg{line-height: 70px;}
.tb{margin-top: 30px;}
.big_img img{width: 100%;}
.tv_img img{width: 240px;height: 130px;}
.tv_img{width: 1740px;}
.tv_img li{margin-bottom: 55px;}
small {color: #999;}
li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*伪类鼠标移到图片的阴影效果 X y 模糊度 外延值 颜色*/
.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);}
.hot_tv li a:hover {text-decoration: none;color:#2692FF;} /*设置鼠标移上去的颜色，没有下划线*/
.hot_tv li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin:-20px auto; }
/* :after 在……之后加上content内容（content参数必须要的） 画圆角 转换成区块 使他能用宽高参数，然后居中显示*/
.headers{width: 100%;height: 520px;background: rgb(160,113,89);position: relative;}
.banner{width: 1664px;height: 520px;margin: 0 auto;background: url(images/3.jpg);position: relative;}
.banner_bg{width: 100%;height:520px;background: url(images/2.png)no-repeat;}
.hr{background: rgba(0,0,0,0.5);position: absolute;right: 50px;top: 150px;width: 190px;border-radius: 10px;}
.hr ul{padding: 10px;}
.hr ul li a{color:#fff;line-height: 40px;white-space: nowrap;overflow: hidden;overflow: hidden; border-bottom: 1px solid rgba(147,147,147,0.4);display: inline-block;display: inline-block;/*文字超出部分禁止换行，超出部分用省略号代替，*/
width: 175px;}
.hr ul a:hover span{color:#fff;font-size: 20px;display: block;}
.hr ul a:hover {color:#fff;}
.mum_li{top: 30px;position: relative;}
.soso{position: absolute;left: 0;top: 0;margin-left: 700px;}
.soso input{width: 350px;height: 30px;border: none;border-radius: 30px;position: relative;outline:0 none;
}
.soso button{width: 50px;height: 30px;border-top-right-radius: 30px;
border-bottom-right-radius: 30px;background: #1f82fc;border: none;position: absolute;top: 0;
right: 0;outline:0 none;
}/*outline复合属性。设置或检索对象外的线条轮廓 这里意思是去掉表单元素自动获取焦点效果*/
.mum_li_r{position: absolute;right: 100px;top:0;}
.mum_li_r li{padding: 10px;}
.mum_li_r li .box{
padding: 20px;background: #fff;padding: 20px;
background: #fff;
position: absolute;
width: 150px;
right: 6px;
top: 40px;
text-align: center;
display: none; /*下拉框这里需要先隐藏*/
}/*下拉框*/
.mum_li_r li .box p{
line-height: 50px;
}
.mum_li_r li:hover .box{display: block;}/*鼠标移上去显示下拉框*/
.arrow{
width: 0;height: 7px;border: 7px solid;
/*上右下左*/ /*设置边框粗细 实线*//*第三个参数是颜色*/
/*边框颜色 边框做三角形 transparent 是透明的意思 只流下边框线，就变为了三角形。*/
border-color: transparent transparent #fff transparent ;/*上右下左*/
position: absolute;top: -21px;right: 30px;
}/*小箭头*/
.fllb{ width: 100%; }
.fllb li{width: 170px;line-height: 45px;position: relative;margin-right: 20px;}
.fllb li a{padding: 10px;}
.sx{border-right: 2px solid #f2f2f2;height: 45px;display: inline-block;float: left;margin-top: 23px;margin-right: 20px;}
#dhxz {width: 120px; width: 400px;padding: 22px 36px;}
</style>
</head>
<body>
<div class="headers">
<div class="banner">
<div class="banner_bg">
<div class="hr">
<ul>
<li>
<a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
</li>
<li>
<a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
</li>
<li>
<a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
</li>
<li>
<a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
</li>
<li>
<a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a>
</li>
</ul>
</div>
<div class="mum_li">
<div class="log">
<img src="images/logo.png" alt="">
</div>
<div class="soso">
<form action="">
<input type="text">
<button>搜索</button>
</form>
</div>
<div class="mum_li_r">
<ul>
<li>VIP</li>
<li>记录</li>
<li>订阅</li>
<li>客户端
<div class="box">
<span class="arrow"></span>
<p>登录使用更多功能</p>
<button>登录/注册</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 头部结束 -->
<div class="contents">
<div class="content tb">
<ul class="fllb">
<li>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
</li>
<span class="sx"></span>
<li>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
</li>
<span class="sx"></span>
<li>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
<a href="">剧集</a>
</li>
<span class="sx"></span>
<li style="width: 55px;">
<a href="">剧集</a><br>
<a href="">电影</a>
</li>
<span class="sx"></span>
<li id="dhxz">
<a href="">优酷片库</a>
<a href="">指数排行</a>
<a href="">大鱼号精选</a>
<a href="">下载应用</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="contents">
<div class="content">
<div class="hot_tv">
<h2>正在热播</h2>
</div>
<ul>
<li class="l">
<a href="">
<img src="images/a.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/b.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/c.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/d.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/e.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/f.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
<li class="l">
<a href="">
<img src="images/g.jpg" alt="">
</a><br>
<span>大冰小将 第一季</span><br>
<small>千玺雷佳音冰雪大狂欢</small>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="hot_tv">
<h2 class="l">剧集></h2>
<ul class="l">
<li class="mr"><a href="">大陆剧</a></li>
<li class="mr"><a href="">日韩剧</a></li>
<li class="mr"><a href="">港台剧</a></li>
<li class="mr"><a href="">英国美剧</a></li>
</ul>
<div class="clear"></div>
</div>
<ul>
<li class="big_img mr">
<a href="">
<img src="images/tv.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
<ul class="tv_img">
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="images/tv1.jpg" alt="">
</a><br>
<span>瞰中国：宁夏</span><br>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例