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 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如，或者其他标签如
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。 - 父级添加 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部分：
学成在线首页
qq-lilei
精品推荐
查看全部
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
-
Think PHP 5.0博客系统实战项目演练
高级 · 1125人正在学习
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;
}