WEB前端学习day-6-盒子，浮动，学成在线案例

1.圆角边框

border-radius: 10px;
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

2.盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

3.浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。
因为浮动可以改变元素标签默认的排列方式.
通过float来设置浮动样式
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

脱标：脱离标准流，在标准流中不占据位置

1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动只会影响后面标准流盒子。不会影响前面的标准流盒子。

4.清除浮动

**1)**清除浮动的本质是清除浮动元素造成的影响
 如果父盒子本身有高度，则不需要清除浮动
 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：选择器{clear:属性值;}
left right both
我们实际工作中，几乎只用 clear: both;
清除浮动的策略是: 闭合浮动.

2)清除浮动的方法：

额外标签法也称为隔墙法，是 W3C 推荐的做法。
额外标签法也称为隔墙法，是 W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear:both”></div>，或者其他标签如<br />等）。
 优点：通俗易懂，书写方便
 缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素。
父级添加 overflow 属性
可以给父级添加overflow 属性，将其属性值设置为 hidden、 auto或 scroll 。
子不教,父之过,注意是给父元素添加代码
 优点：代码简洁
 缺点：无法显示溢出的部分
父级添加after伪元素
:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }
 优点：没有增加标签，结构更简单
 缺点：照顾低版本浏览器
 代表网站：百度、淘宝网、网易等
父级添加双伪元素
.clearfix:before,.clearfix:after { content:""; display:table; }.clearfix:after { clear:both; }.clearfix { *zoom:1; }
 优点：代码更简洁
 缺点：照顾低版本浏览器
 代表网站：小米、腾讯等

总结：

为什么要清除浮动？
父级没高度。
子盒子浮动了。
影响下面布局了，我们就应该清除浮动了。

5.PS切图

1. 图层切图
最简单的切图方式：右击图层 —>导出 PNG 切片。
合并图层：移动工具选中后，用shift选中另一个，ctrl+e合并图层.
2.切片切图
1.利用切片选中图片
利用切片工具手动划出
2.导出选中的图片
文件菜单 —>存储为 web 设备所用格式 —>选择我们要的图片格式 -->存储。
3. PS 插件切图
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工
“导出 web 所用格式” 以及使用切片工具进行挨个切图的繁琐流程。
官网：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。

6.学成在线案例

（一）案例准备工作
我们本次采取结构与样式相分离思想：

创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
study 目录内新建 images 文件夹，用于保存图片。
新建首页文件 index.html（以后我们的网站首页统一规定为 index.html )。
新建 style.css 样式文件。我们本次采用外链样式表。
将样式引入到我们的 HTML 页面文件中。
样式表写入清除内外边距的样式，来检测样式表是否引入成功。

（二） CSS 属性书写顺序(重点)
建议遵循以下顺序：
2. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
3. 自身属性：width / height / margin / padding / border / background
4. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
5. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
6. .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); border-radius: 10px; }
（三）页面布局分析
为了提高网页制作的效率，布局时通常有以下的布局流程：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。
（四）确定版心
这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {width: 1200px;margin: auto;
}

(五)头部制作

 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
 版心盒子里面包含 2 号盒子 logo
 版心盒子里面包含 3 号盒子 nav 导航栏
 版心盒子里面包含 4 号盒子 search 搜索框
 版心盒子里面包含 5 号盒子 user 个人信息
 注意：要求里面的 4 个盒子必须都是浮动

（六）banner 制作

 1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
 2 号盒子是版心，要水平居中对齐
 3 号盒子版心内，左对齐 subnav 侧导航栏
 4 号盒子版心内，右对齐 course 课程

** （七）精品推荐小模块**

 大盒子水平居中 goods 精品，注意此处有个盒子阴影
 1 号盒子是标题 H3 左侧浮动
 2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
 3 号盒子右浮动 mod 修改

（八）精品推荐大模块

 1 号盒子为最大的盒子， box 版心水平居中对齐
 2 号盒子为上面部分，box-hd – 里面左侧标题 H3 左浮动，右侧链接 a 右浮动
 3 号盒子为底下部分，box-bd – 里面是无序列表，有 10 个小 li 组成
 小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li

**复习点：**我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里
面的盒子浮动会影响下面的布局，因此需要清除浮动。

（九）底部模块

 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
 2 号盒子版心水平居中
 3 号盒子版权 copyright 左对齐
 4 号盒子链接组 links 右对齐
（十）完整代码
index.html部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线首页</title><link rel="stylesheet" href="style.css"><!-- 导入样式 -->
</head><body><!-- 头部区域开始 --><div class="w header"><!-- logo部分 --><div class="logo"><img src="data:images/logo.png" alt=""></div><!-- 导航栏部分 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索模块 --><div class="search"><input type="text" value="输入关键词"><button></button></div><!-- 用户模块 --><div class="user"><img src="data:images/user.png" alt=""> qq-lilei</div></div><!-- 1.头部区域结束 --><!-- 2.banner部分开始 --><div class="banner"><!-- 版心 --><div class="w"><!-- 左侧导航栏 --><div class="subnav"><ul><li><a href="#">前端开发<span>&gt;</span></a></li><li><a href="#">后端开发<span>&gt;</a></li><li><a href="#">移动开发<span>&gt;</a></li><li><a href="#">人工智能<span>&gt;</a></li><li><a href="#">商业预测<span>&gt;</a></li><li><a href="#">云计算&大数据<span>&gt;</a></li><li><a href="#">运维&测试<span>&gt;</a></li><li><a href="#">UI设计<span>&gt;</a></li><li><a href="#">产品<span>&gt;</a></li></ul></div><!-- 课程表栏目 --><div class="course"><h2>我的课程表</h2><div class="bd"><ul><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li><a href="#" class="more">全部课程</a></ul></div></div></div></div><!-- banner部分结束 --><!-- 3.精品推荐模块开始 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JQuery</a></li><li><a href="#">Sparky</a></li><li><a href="#">MySQL</a></li><li><a href="#">JavaWeb</a></li><li><a href="#">MySQL</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 3.精品推荐模块结束 --><!-- 4.box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人正在学习</div></li></ul></div></div><!-- 4.box核心内容区域结束 --><!-- 5.footer模块 --><div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学机构合作提供在线课程 <br> @ 2017年XYGG Inc.保留所有权利。 -沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><!-- 自定义列表 --><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a></dd><dd><a href="#">如何选课</a></dd><dd><a href="#">如何拿到毕业证</a></dd><dd><a href="#">学分是什么服务</a></dd><dd><a href="#">考试未通过怎么办</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div></div></div>
</body></html>

style.css部分：

* {margin: 0;padding: 0;
}a {text-decoration: none;
}/* 确定版心多宽 */.w {width: 1200px;margin: auto;
}body {background-color: #f3f5f7;
}/* 清除浮动 */.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.header {height: 42px;/* background-color: pink; */margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;/* background-color: purple; */
}li {list-style: none;
}.nav {/* display: inline-block; */float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: inline-block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}.search {float: left;width: 412px;height: 42px;line-height: 42px;/* background-color: skyblue; */margin-left: 70px;
}.search input {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;font-size: 14px;color: #bfbfbf;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;/* 按钮button默认有边框需要手动去掉 */border: none;background: url(images/search.png);
}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}.banner {height: 421px;background-color: #1c036c;
}.banner .w {height: 421px;background: url(images/banner.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background: rgba(0, 0, 0, .3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: #fff;
}.subnav ul li a span {float: right;
}.subnav ul li a:hover {color: #00a4ff;
}.course {float: right;width: 230px;height: 300px;margin-top: 50px;background-color: #fff;
}.course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 14px 0;border-bottom: 1px solid #666;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a5a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}.goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 4px 2px 2px rgba(0, 0, 0, .1);/* 行高会继承给三个孩子 */line-height: 60px;
}.goods h3 {float: left;/* line-height: 60px; */margin-left: 30px;font-size: 16px;color: #00a4ff;
}.goods ul {float: left;
}.goods ul li {float: left;margin-left: 30px;/* line-height: 60px; *//* border-left: 1px solid #666; */
}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}.goods .mod {float: right;/* line-height: 60px; */margin-right: 30px;font-size: 14px;color: #00a4ff;
}.box {margin-top: 30px;
}.box-hd {height: 45px;
}.box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}.box-bd ul {width: 1225px;
}.box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;
}.box-bd ul li img {width: 100%;
}.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}.box-bd ul li .info {margin: 20px 20px 20px 25px;font-size: 12px;color: #999;
}.box-bd ul li .info span {color: #ff7c2d;
}.footer {height: 415px;background-color: #fff;
}.footer .w {padding-top: 35px;
}.footer .w .copyright {float: left;
}.footer .w .copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}.footer .w .copyright .app {/* a属于行内元素 无宽高 */display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;color: #00a4ff;/* 文字居中 */text-align: center;line-height: 33px;font-size: 16px;
}.footer .w .links {float: right;
}.footer .w .links dl {float: left;/* padding-left: 100px; */margin-left: 100px;
}.footer .w .links dl dt {margin-bottom: 5px;font-size: 16px;color: #333;
}.footer .w .links dl dd {font-size: 12px;color: #333;
}