练习:三个基础练习
网站左侧导航栏练习
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=lia, initial-scale=1.0">
<title>picture</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body{
background-color: pink;
}
.left-nav{
background-color: #ffe;
width: 190px;
height: 450px;
padding: 10px 0;
margin: 50px auto;
}
.left-nav .item{
height: 25px;
line-height: 25px;
padding-left: 18px;
font-size: 12px;
}
.item:hover{
background-color: antiquewhite;
}
.item a:hover{
color: brown;
}
.item a{
font-size: 14px;
color: #222;
text-decoration: none;
}
</style>
</head>
<body>
<nav class="left-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>
<div class="item">
<a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a>
</div>
</nav>
</body>
</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>
<link rel="stylesheet" href="css/reset.css">
<style>
body{
background-color: antiquewhite;
}
.img-list{
width: 190px;
height: 380px;
overflow: hidden;
margin: 50px auto;
background-color: #F4F4F4;
}
.img-list li{
margin-bottom: 11px;
}
.img-list img{
width: 100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<a href="javascrip:;"><img src="img/dog.jpg" alt="刀刀狗"></a>
</li>
<li>
<a href="javascrip:;"><img src="img/dog.jpg" alt="刀刀狗"></a>
</li>
<li>
<a href="javascrip:;"><img src="img/dog.jpg" alt="刀刀狗"></a>
</li>
</ul>
</body>
</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>
<link rel="stylesheet" href="css/reset.css">
<style>
body{
background-color: antiquewhite;
}
a{
text-decoration: none;
}
.new-wrapper{
width: 300px;
height: 357px;
margin: 50px auto;
background-color: rgba(189, 125, 168, 0.37);
border-top: 1px solid #fff;
}
.new-title{
/* 为史上边框与文字同宽,将h2设为行内元素 */
display: inline-block;
height: 40px;
border-top: 1px red solid;
margin-top: -1px;
line-height: 40px;
padding-left: 14px;
}
.new-title a{
color: #40404b;
font-weight: bold;
}
.new-img img{
width: 100%;
}
.new-img{
height: 200px;
}
.new-img .img-title{
margin-top: -30px;
padding-left: 14px;
color: #40404b;
font-weight: bold;
}
.new-list{
padding-left: 14px;
}
.new-list li{
margin-bottom: 11px;
}
.new-list a{
color: #40404b;
font-size: 14px;
}
.new-list li::before{
content: '●';
color: #40404b;
font-size: 10px;
}
.new-list a:hover{
color: red;
}
</style>
</head>
<body>
<div class="new-wrapper">
<h2 class="new-title">
<a href="javascript:;">体育</a>
</h2>
<div class="new-img">
<a href="javascript:;">
<img src="img/dog.jpg">
<h3 class="img-title">
刀刀狗:我就是我的作品
</h3>
</a>
</div>
<ul class="new-list">
<li>
<a href="javascripr:;">居然这么做</a>
</li>
<li>
<a href="javascripr:;">不要笑挑战等你来</a>
</li>
<li>
<a href="javascripr:;">最赚钱的兼职是什么</a>
</li>
<li>
<a href="javascripr:;">这个秘密你一定不知道</a>
</li>
</ul>
</div>
</body>
</html>