有好货代码分享
有好货代码分享
css代码:
<style>
/*清除所以的内外边距*/
* {
margin: 0;
padding: 0;
}
/*设置body的背景颜色*/
body {
background-color: #808080;
}
/*设置最大的盒子 ,居中,宽高,背景颜色*/
.box {
margin: auto;
height: 450px;
width: 450px;
background-color: #ffffff;
}
/*设置头部样式,宽高,居中,背景图片定位,背景大小,字体,颜色*/
.top {
width: 430px;
height: 48px;
margin: auto;
background: url("../素材/有好货/title.png") no-repeat 0px 14px ;
background-size: 60px;
font-size: 12px;
color: #747271;
}
/*头下的第一个p 设置左浮动,外左边距,行高*/
.top p:nth-of-type(1){
float: left;
margin-left: 62px;
line-height: 48px;
}
/*头下的第二个p 设置右浮动,外左边距,行高*/
.top p:nth-of-type(2){
float: right;
line-height: 48px;
}
/*设置第二个大盒子,主体部分,给宽高,居中*/
.towbox {
width: 430px;
height: 380px;
margin: auto;
}
/*选择无序列表的图片给宽高*/
ul li img {
height: 120px;
width: 120px;
}
/*第二个盒子的无序列表li 去圆点,左浮动,外左,外上边距*/
.towbox ul li {
list-style: none;
float: left;
margin-left: 10px;
margin-top: 15px;
}
/*选择所以第二个大盒子下的第一个p元素,设置字体大小*/
.towbox ul li p:nth-of-type(1) {
font-size: 13px;
}
/*选择所以第二个大盒子下的第一个p元素,鼠标移动到文字变red颜色*/
.towbox ul li p:nth-of-type(1):hover{
color: red;
}
/*选择所以第二个大盒子下的第二个p元素,设置字体,以及字体颜色*/
.towbox ul li p:nth-of-type(2){
font-size: 11px;
color: grey;
}
/*选择所以第二个大盒子下的第三个p元素,设置字体,以及字体颜色*/
.towbox ul li p:nth-of-type(3){
font-size: 10px;
color: blue;
}
/*设置鼠标移动到图片时,出现的阴影*/
.towbox img:hover {
box-shadow: 0 0 10px #000000;
}
</style>
主体部分:
<body>
<div class="box">
<header class="top">
<p>与品质生活不期而遇</p>
<p>换一批</p>
</header>
<div class="towbox">
<ul>
<li>
<img src="../素材/有好货/1.png" alt="1"/>
<p>DYD 孕妇针织连衣</p>
<p>采用高领的设计</p>
<p>123 人说好</p>
</li>
<li>
<img src="../素材/有好货/2.png" alt="2"/>
<p>安踏KT3代FINALS</p>
<p>A-LiveKnit凌线科技</p>
<p>25 人说好</p>
</li>
<li>
<img src="../素材/有好货/3.png" alt="3"/>
<p>Summerfay 婴儿蓝</p>
<p>婴儿蓝定染毛领</p>
<p>33 人说好</p>
</li>
<li>
<img src="../素材/有好货/4.png" alt="4"/>
<p>JLS颗粒绒皮毛一体</p>
<p>皮质拼接设计,丰富衣身</p>
<p>34 人说好</p>
</li>
<li>
<img src="../素材/有好货/5.png" alt="5"/>
<p>迪士尼苹果MAX玻</p>
<p>迪士尼经典主题设计</p>
<p>122 人说好</p>
</li>
<li>
<img src="../素材/有好货/6.png" alt="6"/>
<p>3M反光多口袋半拉</p>
<p>姜黄色系的选择</p>
<p>67 人说好</p>
</li>
</ul>
</div>
</div>
</body>
页面完成效果: