- HTMLファイルの内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS基础02</title>
<link rel="stylesheet" href="css/Demo02.css">
</head>
<body>
<div id="id01"></div>
<hr>
<span>啦啦啦啦啦</span>
<img src="../StudyCSS/image/1.png" alt="图片消失了" id="id02">
<hr>
<div class="class01"></div>
<div class="class01"></div>
<div class="class01" style="background-color: #464141b2; float: left; margin-right: 10px;"></div>
<div class="class01" style="background-color: #464141b2; float: left; margin-right: 10px;"></div>
<div class="class01" style="background-color: #464141b2; float: left; margin-right: 10px;"></div>
<div class="class01" id="id03"></div>
<div class="class01"></div>
<hr>
<!-- 取消列表前面的标记： type="none" -->
<ul class="class02">
<li class="class04">小印01</li>
<li class="class04">小印02</li>
<li class="class04">小印03</li>
<li class="class04">小印04</li>
<li class="class04">小印05</li>
</ul>
<hr style="clear: both;">
<ul class="class03">
<li>小印01</li>
<li>小印02</li>
<li>小印03</li>
<li>小印04</li>
<li>小印05</li>
</ul>
<hr>
<ul style="list-style: none;">
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
</ul>
<ul style="list-style: none; clear: both;">
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
<li class="ShangPinList">
<!-- 人民币符号：¥ -->
<img src="../StudyCSS/image/1.png" alt="" width="150px" height="150px"><br>
<p><span>小印啦啦啦</span><br></p>
<p><b>¥199</b></p>
</li>
</ul>
<hr style="clear: both; margin-bottom: 50px;">
</body>
</html>
- CSSファイルの内容：
#id01 {
width: 300px;
height: 300px;
border: 1px solid red;
/* 设置背景图片 */
background-image: url('../image/1.png');
/* 设置背景图片是否重复显示 【no-repeat：不重复】【repeat-x：x轴重复】【repeat-y：y轴重复】 */
background-repeat: no-repeat;
/* 设置图片的位置，具体属性可以看w3或者菜鸟 */
background-position: 0 0;
background-size: 100% 100%;
}
#id02 {
/* 指的是图片中 */
/* 注意：此处的对齐放弃并非图片相对于父元素的对齐，而是其他元素相对于图片的对齐方式 */
/* 一般常用的参数：top、middle、bottom */
vertical-align: middle;
}
.class01 {
width: 100px;
height: 100px;
/* 边框 */
border: red solid 1px;
/* 外边距 */
margin-bottom: 10px;
}
#id03 {
/* 取消浮动：clear: both; */
clear: both;
background-color: rgba(255, 0, 0, 0.281);
}
.class02 {
/* 取消列表前面的点 */
list-style: none;
}
.class04 {
float: left;
margin-right: 10px;
margin-bottom: 10px;
/* 当鼠标移上时，变成小手 */
cursor: pointer;
}
.class04:hover {
color: red;
}
.class03 {
/* 让无序列表变成有序列表 */
list-style: upper-alpha;
}
.ShangPinList {
float: left;
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #eeeeee;
}
.ShangPinList img {
padding: 5px;
border: 1px solid #eeeeee;
}
p {
margin: 0;
}
.ShangPinList p {
text-align: center;
}
.ShangPinList p b {
color: red;
}
.ShangPinList p:hover {
color: #FF6700;
cursor: pointer;
position: absolute;
}
後で読むことができるように、いくつかメモを取ります。