今日份实操——（HTML+CSS）盒模型边距属性，背景属性、渐变属性练习

第一份案例图及所需要求展示：

构思：
首先为整体设置个盒子，清除整体的浮动。整体宽750px，高480px，图片可以用backgrou-image设置为背景图片；由于图片的宽高与盒子的宽高一致，因此无需设置backgroud-repeat背景图的平铺。
标题h2与顶部要有60px的空隙，就要用到padding-top上内边距的样式设置。（复习：padding定义内边距时，必须按照顺时针赋值，一个值为4个边；两个值为上下/左右；三个值为上/左右/下）
内容要求显示时不透明度为0.3，需要使用opacity，列与列之间有空隙，使用line-height设置行间距即可。鼠标悬停改变样式是链接伪类:hover的功能。要求底部内容与文本内容不一起实现伪类，要求全部文本设置< p>标签，底部文本再设置一个< \p>标签。

代码部分：
首先先写body部分，再设置赋值。
< body>
< div>
< h2>水调歌头< /h2>
< p>明月几时有？把酒问青天。< br/>
不知天上宫阙，今夕是何年。< br/>
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。< br/>
起舞弄清影，何似在人间。< br/>
转朱阁，低绮户，照无眠。< br/>
不应有恨，何事长向别时圆？< br/>
人有悲欢离合，月有阴晴圆缺，此事古难全。< br/>
但愿人长久，千里共婵娟。< /p>
< p class=“citt”>——苏轼< /p>
< /div>
< /body>

接下来清除浮动的影响
body {
margin: 0;
padding: 0;
}

给整体的盒子div设置参数
div {
width: 750px;
height: 480px;
margin: 0 auto;
background-image: url(images/yuese.jpg);
border-radius: 50px;
text-align: center;
color: #FFF;
}

给h2设置参数
h2 {
margin: 0;
padding-top: 60px;
padding-bottom: 15px;
opacity: 0.3;
}

给p和.citt设置参数
p {
line-height: 2em;
opacity: 0.3;
font-family: “微软雅黑”;
}
.citt {
padding-left: 250px;
}

设置链接伪类
p:hover {
opacity: 0.8;
}

遇到的问题：
使用body清除浮动时背景图片与网页顶部的空隙始终去不掉；使用*清除时又会把p的浮动清除，使得h2和p标签之间紧挨着，视觉效果不美观，查看到那块浮动是h2的，给h2设置margin:0;即可。

第二份案例图及所需要求展示：

构思：
这道题考察的是多重背景图片的设置。由于只需要设置背景图及其出现的位置，故body区只需要设置一个div盒子即可。

复习一下：
多重背景的图片设置为
background-image: （选择所要的背景图）
background-repeat: no-repeat;（设为不平铺）
background-position: （设置其位置，要求与选择的背景图的顺序一致）

代码：
body区只需要设置一个盒子容器即可。
< body>
< div> </ div>
< /body>

首先给整体清除浮动
body {
margin: 0;
padding: 0;
}

然后设置多重背景图片及其位置
div {
width: 1099px;
height: 927px;
margin: 0 auto;
background-image: （图片路径省略）
background-repeat: no-repeat;
background-position: left top, right top, center, center top;
}

遇到的错误：
忘记设置多重背景图片的步骤，选择一个一个设置背景图片，导致背景图片被覆盖或者出现在不同的盒子里。

第三份案例图及所需要求展示：

构思：
首先清除浮动的影响，margin:0;padding:0;
设置和字的大小，宽300px，高200px。背景颜色需要设置成渐变效果，就要用到background-image: linear-gradient。【复习一下background-image: linear-gradient的用法：background-image: linear-gradient（角度值，颜色1，颜色2，···，颜色n）】
由于高度为200px，5个li平均分下来每个li是40px，要想使得文本高度居中，只需要line-height:40px;即可。要想实现列表项和项目符号之间的间隔，就要用到text-indent属性。
图片设置为背景图片，backgroud-repeat:no repaet;背景图片不平铺，想为背景图片设置位置，需要用上backgroud-position属性。

代码：
第一步，先写body区
< body>
< div>
< ol>
< li class=“up”>李荣浩-我爱你< /li>
< li class=“down”>苏谭谭-这扯淡的人生< /li>
< li class=“up”>蒋蒋、曲肖冰-当真< /li>
< li class=“down”>海来阿木-远方有信仰< /li>
< li class=“up”>谭咏麟-再见亦是泪< /li>
< /ol>
< /div>
< /body>

清除浮动带来的影响
body {
margin: 0;
padding: 0;
}

设置盒子的大小、背景颜色
div {
width: 300px;
height: 200px;
margin: 20px auto;
background-image: linear-gradient(0deg, #09F, #00F);
}

设置列表项元素
li {
color: #FFF;
height: 40px;
line-height: 40px;
text-indent: 20px;
}

设置每条列表项末尾的图片
li.up {
background-image: url(…/prac/images/up.jpg);
background-repeat: no-repeat;
background-position: 240px center;
}
li.down {
background-image: url(…/prac/images/down.jpg);
background-repeat: no-repeat;
background-position: 240px center;
}

遇到的困难：
后面的小图片设置时出现错误，不能灵活运用backgroud-position属性。

复习一下：backgroud-position属性的取值
①使用不同单位的数值，直接设置图像左上角在元素中的坐标。
②使用预定关键字：指定图像在元素中的对齐方式。
·水平方向值：left、center、right
·垂直方向值：top、center、bottom
③使用百分比

参考文章：https://blog.csdn.net/ITweb_h/article/details/91489499