写静态页面——浮动练习-编程知识

0、效果：

在这里插入图片描述

1、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="./CSS/全局样式.css"><link rel="stylesheet" href="./CSS/浮动练习.css">
</head>
<body><div class="shengXuePeiJian"><div class="wrap sx_title">声学配件</div><div class="sx_d1"></div><div class="wrap sx_d2"><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item sx_item_clear"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item sx_item_clear"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div><div class="sx_item sx_item_clear"><img class="sx_img" src="./图片/1-1.jpg" alt=""><p class="sx_p1">PANDAER 游戏耳机 1s</p><p class="sx_p2">28h 超长续航无线充电 | 0.035s 超低延迟</p><p class="sx_p3">￥269 <del class="sx_p3_del">￥369</del> </p></div></div></div><div class="zhouBianPeiJian"><div class="wrap zb_title">Flyme</div><div class="wrap zb_d2"><div class="fig1"><img src="./图片/3.webp" alt=""></div><div class="fig"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div><div class="fig fig_clear"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div><div class="fig"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div><div class="fig"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div><div class="fig"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div><div class="fig fig_clear"><img src="./图片/4.webp" alt=""><p>Flyme 隐私安全白皮书</p></div></div></div>
</body>
</html>

2、CSS代码：

全局样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
li{list-style-type:none;}
a{text-decoration:none;}
img,input,button{border:none;vertical-align:middle;}
*{font-weight:400;font-style: normal;}
body{text-align: center;}
/* 居中样式 */
.wrap{width: 100%;margin: 0 auto;}

浮动练习样式

/* 声学配件模块样式 */
.sx_title,.zb_title{font-size: 30px;font-family: Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;margin-bottom: 10px;
}
.sx_d1{width:2560.01px;height:450px;background-image: url(../图片/1.webp);background-size: 2560.01px 450px;background-repeat: no-repeat;margin: 0 auto;border-bottom: 1px solid #eee;}.sx_d2{width: 1240px;height: 1154.95px;
}
.sx_item{background-color: #fff;     width: 303px;height: 375px;margin-top: 10px;margin-right: 9px;float: left;
}
.sx_item_clear{margin-right: 0px;
}
.sx_img{width: 230px;margin:30px 0 0;
}
.sx_p1{color: #333;font-size: 16px;margin-bottom: 2px;
}
.sx_p2{color: #999;font-size: 14px;
}
.sx_p3{color: #CC0000;font-size: 22px;
}
.sx_p3_del{color: #666666;font-size: 14px;
}.shengXuePeiJian{overflow: hidden;} /* 清除上面浮动对下面的影响 */
/* Flyme模块样式 */
.zb_title{height: 45px;
}
.zb_d2{width: 1240px;height: 520px;
}
.fig,.fig1{background-color: #fff;float: left;width: 615px;height: 245px;margin-right: 9px;margin-bottom: 15px;
}
.fig{width: 302.99px;height: 245px;
}
.fig_clear{margin-right: 0;
}
/* 用子代选择器可以省去写类选择器的麻烦 */
.fig1 > img{ width: 615px;height: 245px;
}
.fig > img{ width: 302.99px;height: 190px;
}
.fig > p{line-height: 55px;height: 55px;color:#515151;font-size: 16px;
}