CSS布局-盒子模型
- 一、CSS三大特性
- 3.1 优先级的介绍
- 3.2 权重叠加计算
- 3.3 （拓展）权重叠加计算案例
- 4.1 Chrome调试工具
- 二、PxCook的基本使用
- 三、盒子模型
- 1.1 盒子模型的介绍
- 2.1 内容的宽度和高度
- 3.1 边框（border）- 单个属性（不常用）
- 3.2 边框（border）- 连写形式
- 3.3 边框（border）- 单方向设置
- 3.4 盒子实际大小初级计算公式
- 3.5 （案例）新浪导航案例
- 4.1 内边距（padding）- 取值
- 4.2 盒子实际大小终极计算公式
- 4.3 （案例） 新浪导航的优化
- 4.4 CSS3盒模型（自动内减）
- 5.1 外边距（margin）- 取值
- 5.2 外边距（margin） - 单方向设置
- 5.3 margin单方向设置的应用
- 5.4 清除默认内外边距
- 5.5 （案例）网页新闻列表案例
- 5.6 外边距正常情况
- 5.7 外边距折叠现象 – ① 合并现象
- 5.8 外边距折叠现象 – ② 塌陷现象
- 5.9 行内元素的margin和padding无效情况
- 四、总结
- 五、作业-卡片模块案例
- 六、作业-小米登录框
- 七、爱宠知识案例
一、CSS三大特性
3.1 优先级的介绍
➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
color: orange;
}
.box{
color: blue;
}
div{
color: green !important;
}
body{
color: red;
}
/* !important不要给继承的添加，自己有样式无法继承父级样式 */
</style>
</head>
<body>
<!-- 意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>
3.2 权重叠加计算
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
➢ 比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!） ➢ 注意点：!important如果不是继承，则权重最高，天下第一！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
3.3 （拓展）权重叠加计算案例
➢ 权重计算题解题步骤：
- 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
- 通过权重计算公式，判断谁权重最高
➢ 注意点：
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第1题：普通题</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0, 2, 0, 0) */
#father #son {
color:blue;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}
/* 继承, 最低 */
#father {
color:green !important;
}
/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第2题: 标签选择器选择一类</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* 2 */
div div {
color: skyblue;
}
/* 1 */
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
这行文本是什么颜色？
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第3题: 权重叠加每位不存在进制</title>
<style>
/* (行内, id, 类, 标签) */
/* 能不能直接选中div,能的话就不是继承 */
div div div div div div div div div div div div {
color: red;
}
.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色的？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第4题：权重相同此时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color:green;
}
/* (0, 1, 0, 1) */
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第5题: 全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
/* 继承 */
div p {
color:red;
}
/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<!-- 优先继承我亲爹p -->
<span>文字</span>
</p>
</div>
</body>
</html>
4.1 Chrome调试工具
（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）
二、PxCook的基本使用
通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
常用快捷键
- 放大设计图：ctrl + +
- 缩小设计图：ctrl + -
- 移动设计图：空格按住不放，鼠标拖动
常用工具
量尺寸
吸颜色
从psd文件中直接获取数据
切换到开发界面，直接点击获取数据
三、盒子模型
1.1 盒子模型的介绍
盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
记忆：可以联想现实中的包装盒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 纸箱子 填充泡沫 */
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框线 == 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫：出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距：出现在两个盒子之间，出现在盒子的外面 */
margin: 50px;
}
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body>
</html>
2.1 内容的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
3.1 边框（border）- 单个属性（不常用）
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
3.2 边框（border）- 连写形式
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
border:粗细 线条样式 颜色 --不分先后顺序
solid：实线
dashed：虚线
dotted：点线
➢ 快捷键：bd + tab
3.3 边框（border）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值
top、bottom、left、right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* border:粗细 线条样式 颜色 --不分先后顺序 */
/* solid：实线 */
/* border: 1px solid #000; */
/* dashed：虚线 */
/* border: 5px dashed #000; */
/* dotted：点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-bottom: 5px dotted #000;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
3.4 盒子实际大小初级计算公式
➢ 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* border 撑大盒子尺寸 */
/* 盒子尺寸=width / height + 边框线 */
/* 如果400 * 400 尺寸 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
3.5 （案例）新浪导航案例
➢ 布局顺序：
从外往内，从上往下
➢ 每一个盒子的样式：
宽高
辅助的背景颜色
盒子模型的部分：border、padding、margin
其他样式：color、font-、text-、……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a {
height: 40px;
width: 80px;
display: inline-block;
font-size: 12px;
color: #4c4c4c;
/* background: #edeef0; */
text-align: center;
line-height: 40px;
text-decoration: none;
}
a:hover {
background: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
4.1 内边距（padding）- 取值
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 添加了四个方向的内边距 */
padding: 50px;
/* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距 */
/* padding 最多取四个值 */
/* 四值：上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值:上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值:上下 左右 */
padding: 10px 80px;
/* 多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面 */
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
4.2 盒子实际大小终极计算公式
➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
4.3 （案例） 新浪导航的优化
➢ 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box{
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #ededf0;
}
.box a{
padding: 0 16px;
/* width: 80px; */
height: 40px;
/* 推荐先加上：清楚地看到文字在什么位置 */
/* background: #ededf0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover{
background: #ededf0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色，放内容，调节内容的位置，控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪</a>
<a href="#">新浪导航新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
➢ 不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
4.4 CSS3盒模型（自动内减）
➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 内减模式 */
/* 变成CSS3的盒子模型，好处：加了border和padding不需要手动做减法 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
5.1 外边距（margin）- 取值
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
5.2 外边距（margin） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
5.3 margin单方向设置的应用
➢ 应用：
5.4 清除默认内外边距
➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>ppp</p>
<p>ppppp</p>
<h1>h1</h1>
<ul>
<li>lili</li>
</ul>
</body>
</html>
5.5 （案例）网页新闻列表案例
➢ 需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
➢ 布局顺序：
1.从外往内，从上往下
➢ 每一个盒子的样式：
1.宽高
2.辅助的背景颜色
3.盒子模型的部分：border、padding、margin
4.其他样式：color、font-、text-、……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border,都内减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍，就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
.news ul {
list-style: none;
}
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中的链式编程是什么</a></li>
</ul>
</div>
</body>
</html>
5.6 外边距正常情况
➢ 场景：水平布局 的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和
5.7 外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
margin-bottom: 50px;
}
.two {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
</html>
5.8 外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
1.给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3.转换成行内块元素
4.设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border,不能使用这个解决办法 */
/* border: 1px solid #000; */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
5.9 行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
1.水平方向的margin和padding布局中有效！
2.垂直方向的margin和padding布局中无效！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
<!-- 行内标签的margin-top或bottom 不生效 -->
<!-- 行内标签的padding-top或bottom 不生效 -->
<span>span</span>
<span>span</span>
</body>
</html>
四、总结
◆ 能够认识不同选择器的 优先级 公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题
五、作业-卡片模块案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
body {
background-color: #f4f5f9;
}
.box {
/* 1、宽高 */
width: 228px;
height: 270px;
/* 2、背景颜色 */
background-color: #fff;
margin: 100px auto;
}
.box .product {
/* width: 228px; */
width: 100%;
}
.box h3 {
height: 52px;
padding-left: 24px;
padding-right: 20px;
margin-top: 25px;
font-size: 14px;
font-weight: 400;
}
.box p {
margin-left: 24px;
font-size: 12px;
color: #929292;
}
.box p span {
color: #f77321;
}
</style>
</head>
<body>
<!-- 布局流程：从上往下、从外往内 -->
<div class="box">
<img src="./images/product.png" alt="" class="product">
<h3>Android网络图片加载框架详解</h3>
<p><span>高级</span> • 1125人在学习</p>
</div>
</body>
</html>
六、作业-小米登录框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 356px;
height: 339px;
margin: 100px auto;
}
.box h1 {
width: 49px;
height: 49px;
/* logo这个背景图片是透明的四周中间有白色的logo，所以需要设置背景颜色从而衬托出白色的logo */
background: #ff4c00 url('./images/mi-logo.png');
margin: 0 auto;
}
.box h2 {
height: 77px;
margin-top: 35px;
text-align: center;
font-size: 30px;
font-weight: 400;
}
.box input {
width: 356px;
height: 50px;
border: 1px solid #ccc;
padding-left: 15px;
margin-bottom: 14px;
/* 不要盒子被撑大，自动内减 */
box-sizing: border-box;
}
.box button {
width: 356px;
height: 50px;
background-color: #ff4c00;
color: #fff;
border: none;
}
</style>
</head>
<body>
<div class="box">
<h1></h1>
<h2>小米账号登录</h2>
<input type="text" placeholder="邮箱/手机/小米ID">
<input type="text" placeholder="邮箱/手机/小米ID">
<button>登录</button>
</div>
</body>
</html>
七、爱宠知识案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 项目开始前需要去除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
.box {
/* 1、宽度和高度 */
width: 262px;
height: 342px;
/* 2、盒子模型的其他部分：border、padding、margin */
border: 1px solid #009900;
/* 自动内减 */
padding: 10px 10px 0px;
margin: 0 auto;
margin-top: 100px;
box-sizing:border-box;
/* 3、写其他的样式：font、背景颜色、文字颜色 */
background: url('./images/bg.gif');
}
.box h2 {
/* background-color: pink; */
/* 1、宽度和高度 */
height: 25px;
border-left: 5px solid #c9e143;
padding-left: 10px;
margin-bottom: 5px;
font-size: 18px;
line-height: 25px;
color: #fff;
}
.box ul {
list-style: none;
background-color: #fff;
padding: 0 10px;
}
.box ul li {
height: 30px;
border-bottom: 1px dashed #666666;
padding-left: 15px;
line-height: 30px;
background: url('./images/tb.gif') no-repeat left center;
}
.box ul li a {
text-decoration: none;
font-size: 12px;
color: #551a8b;
}
</style>
</head>
<body>
<div class="box">
<h2>爱宠知识</h2>
<ul>
<li><a href="#">养狗比养猫对健康更有利</a></li>
<li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
<li><a href="#">狗狗歌曲《新年旺旺》</a></li>
<li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
<li><a href="#">【爆笑】这狗狗太不给力了</a></li>
<li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
<li><a href="#">狗狗各个阶段健康大事件</a></li>
<li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
<li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
</ul>
</div>
</body>
</html>
6986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
