01、综合案例-快报模块布局分析
1、大盒子div
2、分2个小盒子（上盒子为标题h，下盒子为列表（无序列表））
02、03、04、综合案例-快报制作
1、头部制作
2、快报模块列表制作
代码：
<!DOCTYPE html><html lang="ch"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购快报</title><style>* {margin: 0;padding: 0;}li {/* 去掉所有的li前面的小圆点 */list-style: none;}.box ul {padding-left: 21px;padding-top: 7px;}.box ul li {height: 23px;/* 文字垂直居中 */line-height: 23px;}.box ul li a {color: #666666;text-decoration: none;font-size: 12px;}.box ul li a:hover {text-decoration: underline;}.box {width: 248px;height: 163px;border: 1px solid #cccccc;margin: 100px auto;}.box h3 {height: 32px;/* 只需要制作下边框 */border-bottom: 1px dotted #cccccc;font-size: 14px;font-weight: 400;line-height: 32px;/* 不能用margin来让文字左移，因为盒子也会左移，虚线就露出来了，要用padding,而且由于h3没有给出宽度，padding不会撑开 */padding-left: 15px;}</style></head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">爱如嘎普爱肝日诶</a></li><li><a href="#">咖喱UR股哈根</a></li><li><a href="#">噶人笔录哈六人行宫</a></li><li><a href="#">奥瑞格刘荣华拉UR个</a></li><li><a href="#">累啊壶盖好尬u</a></li></ul></div></body></html>
04、圆角边框原理和使用border-radius
1、语法border-radius:length;（length越大，弧度越大）
2、radius半径原理：（椭）圆与边框的交集形成圆角效果
见图：（length为边缘4个圆的半径，因此length越大，弧度越大）
05、圆角边框的使用
1、length可以是半径的实际值、也可以是半分比的形式
eg1：圆形的做法：给一个正方形矩形中的CSS代码设置；
border-radius: 50%
！！！50%为弧度的最大值（无论是圆形还是椭圆），大于50%的都一样
eg2：如果是个矩形，length设为高度的一半，即可做成类似括号的那种形状
2、该属性是一个简写属性，其实有四个属性值，分别为：左上角、右上角、右下角、左下角（顺时针）border-top-left-radius\border-top-right-radius\border-bottom-right-radius\border-bottom-left-radius
如果是两个参数，则分别为：正对角的两个角、负对角的两个角
06、盒子阴影box-shadow
1、box-shadow属性为盒子添加阴影
2、语法格式：box-shadow : h-shadow v-shadow blur spread color inset;
eg：
（以下这一串值很实用）
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
！！！默认为外阴影（outset），但是要用外阴影的话，不要写这个单词，否则无效
盒子阴影不占用内存空间，不会影响其他盒子排列
3、给盒子制作鼠标经过后就变化为阴影的效果：（很多盒子都有hover的操作，不止a一个）
div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);}
07、文字阴影text-shadow
1、语法text-shadow: h-shadow v-shadow blur color;
eg：
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
（不是很常用）
