HTML源码:
<!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>布局案例</title>
</head>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="../css/buju.css">
<body>
<div class="box">
<div class="left">
<a href="#">
<img src="../img/zdp.jpg" alt="小米折叠屏手机" class="pic1">
</a>
</div>
<div class="right">
<div class="one">
<!-- 图片 -->
<a href="#">
<img src="../img/k50.jpg" alt="Redmi K50 电竞版" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Redmi K50 电竞版
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
全线拉满的冷血旗舰
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">3299元起</p>
</a>
</div>
<div class="tow">
<!-- 图片 -->
<a href="#">
<img src="../img/12.jpg" alt="xiaomi 12 Pro" class="pic">
</a>
<a href="#">
<!-- 商品描述 -->
<h5 class="font">
xiaomi 12 Pro
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
全新骁龙8
</p>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms2">
2kAMODED屏幕
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">4699元起</p>
</a>
</div>
<div class="three">
<!-- 图片 -->
<a href="#">
<img src="../img/mi12.jpg" alt="Xiaomi 12" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Xiaomi 12
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
全新骁龙8
</p>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms2">
5000万主摄
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">3699元起</p>
</a>
</div>
<div class="four">
<!-- 图片 -->
<a href="#">
<img src="../img/12x.jpg" alt="Xiaomi 12X" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Xiaomi 12X
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
骁龙870
</p>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms2">
5000万主摄
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">2999元起</p>
</a>
</div>
<div class="five">
<!-- 图片 -->
<a href="#">
<img src="../img/11.jpg" alt="Xiaomi11 青春活力版" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Xiaomi11 青春活力版
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
轻薄5G,内外皆出彩
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">1899元起</p>
<p class="jg2">1999元</p>
</a>
</div>
<div class="six">
<!-- 图片 -->
<a href="#">
<img src="../img/11pro.jpg" alt="Redmi Note 11Pro系列" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Redmi Note 11Pro系列
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
三星AMOLED高刷屏
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">1799元起</p>
</a>
</div>
<div class="seven">
<!-- 图片 -->
<a href="#">
<img src="../img/115g.jpg" alt="Redmi Note 11 5G" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Redmi Note 11 5G
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
5000mAh大电量
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">1199元起</p>
</a>
</div>
<div class="eight">
<!-- 图片 -->
<a href="#">
<img src="../img/114g.jpg" alt="Redmi Note 11 4G" class="pic">
</a>
<!-- 商品描述 -->
<a href="#">
<h5 class="font">
Redmi Note 11 4G
</h5>
</a>
<!-- 商品描述 -->
<a href="#">
<p class="ms">
5000mAh大电量
</p>
</a>
<!-- 价格 -->
<a href="#">
<p class="jg">969元起</p>
</a>
<a href="#">
<p class="jg2">999元起</p>
</a>
</div>
</div>
</div>
</body>
</html>
css源码:
* {
/* 全局设定内外边距为0 */
margin: 0px;
padding: 0px;
}
body{
/* body颜色为f5f5 */
background-color: #f5f5f5;
}
body a{
/* 去掉下划线 */
text-decoration: none;
}
.box {
.box {
/* 最外层div居中显示 清除浮动 */
width: 1400px;
/* height: 830px; */
margin: 180px auto;
overflow: hidden;
}
}
.pic1{
/* 左侧图片 */
float: left;
width: 200px;
height: 830px;
}
.right {
/* 右侧商品 */
float: left;
width: 1200px;
height: 300px;
}
/* 关键帧 100%时1.1倍放大 */
@keyframes donghua {
100%{
transform: scale(1.1);
}
}
.pic1:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.one:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.tow:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.three:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.four:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.five:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.six:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.seven:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.eight:hover {
/* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
animation: donghua 1s;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
}
.box .pic {
/* 图片内边距 */
width: 250px;
/* padding: 0px 20px; */
}
.box .font{
/* 字体大小 外边距 */
color: #5f5f5f;
margin:10px 60px;
font-size: 14px;
}
.box .ms {
/* 左浮动 字体大小 外边距 */
float: left;
color: #c2c2c2;
font-size: 12px;
margin-left: 60px;
}
.box .ms2 {
/* 左浮动 字体大小 内、外左边距 左侧边框颜色和字体颜色一样*/
float: left;
color: #c2c2c2;
font-size: 12px;
margin-left: 5px;
padding-left: 5px;
border-left: 2px solid #c2c2c2;
}
.box .jg {
/* 左浮动 外边距 字体颜色 */
float: left;
margin: 20px 50px;
color: #FFAF78;
font-size: 14px;
}
.box .jg2 {
/* 左浮动 外边距 字体颜色 */
float: left;
margin: 17px;
color: #c2c2c2;
font-size: 14px;
text-decoration:line-through;
}
.one {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.tow {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.three {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.four {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.five {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.six {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.seven {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}
.eight {
/* 盒子左浮动在一行显示,上下外边距为10px 左右为20px */
float: left;
width: 250px;
height: 400px;
background-color:#ffffff;
margin: 10px 20px;
}