1、京东图片列表
.list{
width: 190px ;
height: 400px;
overflow: hidden;
margin: 50px auto;/*居中*/
background-color:#f4f4f4;
}
.list li:not(:last-child){
margin-bottom: 9px;
}
.list li{
padding-right:30px;
}
.list img{
width: 100%;
}
<!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="jingdong.css">
<link rel="stylesheet" href="reset.css">
</html>
</head>
<body>
<ul class="list">
<li>
<a href="javascript:;"><img src="./img/1.jpg" alt="酒" ></a>
</li>
<li>
<a href="javascript:;"><img src="./img/2.jpg" alt="吹风机" ></a>
</li>
<li>
<a href="javascript:;"><img src="./img/3.jpg" alt="洗发水" ></a>
</li>
</ul>
</body>
</html>
2、京东左侧导航
body{
background: black;
}
.nav{
width: 170px;
height: 100px;
padding: 10px 0;
background-color: rgb(243, 241, 239);
margin: 50px auto;
}
.nav .item{
height: 25px;
/*文字垂直居中，将line-height设置和父元素的height一样*/
line-height: 25px;
padding-left: 5px;
font-size: 12px; /*斜杠/12px*/
}
.nav .item:hover{ /*给一行的背景加颜色*/
background-color: darkgrey;
}
.item a:hover{
background-color:darkturquoise;
}
item a{
font-size: 14px;
color: #333;
text-decoration: none; /*去文本样式,但是我用了reset.css直接去了*/
}
a:hover{
color: #c81623;
}
<!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="nav.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<nav class="nav">
<div class="item"><a href="#">家用电器 </a></div>
<div class="item">
<a href="#"> 手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">电脑</a>/<a href="#">办公 </a>
</div>
<div class="item">
<a href="#"> 家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具 </a>
</div>
</nav>
</body>
</html>
3、网易新闻列表
a{
text-decoration: none;
}
.news-wrapper{
width: 200px;
height: 357px;
margin: 50px auto;
background-color:white;
border-top:1px solid #ddd;
}
.news-title{
display:inline-block; /*将h2的转化为行内块元素*/
height: 30px;
border-top:1px red solid;
margin-top: -1px; /*将h2上移*/
padding-top: 10px;
}
.news-title a{
text-decoration: none;
color: #40406B;
font-weight: bold;/*加粗*/
}
.news-img{
height: 120px;
}
.news-img .img-title{
margin-top: -30px;
color:white;
font-weight: bold;
padding-left: 10px;
}
.news-list{
margin-top: 20px;
}
/*.news-list li::before{
content: '·';
color: silver;
font-size: 16px;
}*/
.news-list li{
margin-bottom: 17px;
padding-left: 10px;
list-style: square;
}
.news-list li a{
font-size: 14px;
color: #666;
}
.news-list a:hover{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="wy.css">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<div class="news-wrapper">
<h2 class="news-title">
<a href="#">摄影</a>
</h2>
<div class="news-img">
<a href="#">
<img src="img/4.png" alt="摄影">
<h3 class="img-title">
这里是图片的标题
</h3>
</a>
</div>
<ur class="news-list">
<li>
<a href="#">我是第一行的内容</a>
</li>
<li>
<a href="#">我是第二行的内容</a>
</li>
<li>
<a href="#">我是第三行的内容</a>
</li>
<li>
<a href="#">我是第四行的内容</a>
</li>
</ur>
</div>
</body>
</html>
