仿网易云页面
块级元素嵌套img元素
<!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>Document</title>
<style>
.box {
background-color: orange;
}
img {
/* display: block; */
/* vertical-align: bottom; */
/* vertical-align: top; */
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/109951167296432458.jpg" alt="" />
</div>
</body>
</html>
网易轮播图banner
轮播图banner.png
<!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>Document</title>
<style>
body,
h1,
h2,
h3,
ul,
li,
p {
margin: 0;
padding: 0;
}
body {
font: 12px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000;
outline: none;
}
ul {
list-style-type: none;
}
input {
outline: none;
border: none;
}
img {
vertical-align: top;
}
.wrapper_01 {
width: 1100px;
margin: 0 auto;
}
.wrapper_02 {
width: 980px;
margin: 0 auto;
}
.wrapper_03 {
width: 982px;
margin: 0 auto;
}
.banner {
height: 285px;
background-color: orange;
}
.banner .area .area-left {
position: relative;
width: 730px;
}
.banner {
background: url("./images/1099511672964324580.jpg") center center/6000px
no-repeat;
}
.banner .area {
position: relative;
height: 285px;
background-color: orange;
}
.banner .area-left .img-list {
display: flex;
overflow: hidden;
}
.banner .area-left .img-list li {
flex-shrink: 0;
width: 100%;
}
.banner .area-left .img-list .item {
display: block;
}
.banner .area-left .img-list .item img {
width: 100%;
height: 285px;
}
.banner .area-left .dots-list {
position: absolute;
left: 0;
bottom: 5px;
right: 0;
display: flex;
justify-content: center;
}
.banner .area-left .dots-list li {
margin: 0 2px;
}
.banner .area-left .dots-list .item {
display: inline-block;
width: 20px;
height: 20px;
background: url("./images/banner.png") 3px -343px;
}
.banner .area-left .dots-list .item.active,
.banner .area-left .dots-list .item:hover {
background-position: -16px -343px;
}
.banner .area-right {
position: absolute;
right: -1px;
top: 0;
bottom: 0;
width: 254px;
background: url("./images/download.png");
}
.banner .area-right .download {
display: block;
width: 215px;
height: 56px;
margin: 186px 0 0 19px;
text-indent: -9999px;
}
.banner .area-right .download:hover {
background: url("./images/download.png") 0 -290px;
}
.banner .area-right .desc {
margin-top: 10px;
font-size: 12px;
color: #8d8d8d;
text-align: center;
}
.banner .area .control {
position: absolute;
width: 37px;
height: 63px;
top: 0;
bottom: 0;
margin: auto 0;
background: url("./images/banner.png");
}
.banner .area .control.left {
left: -70px;
background-position: 0 -360px;
}
.banner .area .control.left:hover {
background-position: 0 -430px;
}
.banner .area .control.right {
right: -70px;
background-position: 0 -508px;
}
.banner .area .control.right:hover {
background-position: 0 -578px;
}
</style>
</head>
<body>
<div class="banner">
<div class="area wrapper_03">
<div class="area-left">
<ul class="img-list">
<li class="item">
<a href="">
<img src="./images/109951167296432458.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="">
<img src="./images/109951167296432458.jpg" alt="" />
</a>
</li>
<li class="item">
<a href="">
<img src="./images/109951167296432458.jpg" alt="" />
</a>
</li>
</ul>
<ul class="dots-list">
<li><a class="item active" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
<li><a class="item" href="#"></a></li>
</ul>
</div>
<div class="area-right">
<a class="download" href="#">下载客户端</a>
<p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
<a href="#" class="control left"></a>
<a href="#" class="control right"></a>
</div>
</div>
</body>
</html>
main.png
<!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>Document</title>
<style>
body,
h1,
h2,
h3,
ul,
li,
p {
margin: 0;
padding: 0;
}
body {
font: 12px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000;
outline: none;
}
ul {
list-style-type: none;
}
input {
outline: none;
border: none;
}
img {
vertical-align: top;
}
.wrapper_01 {
width: 1100px;
margin: 0 auto;
}
.wrapper_02 {
width: 980px;
margin: 0 auto;
}
.wrapper_03 {
width: 982px;
margin: 0 auto;
}
.main .area {
display: flex;
height: 500px;
border: 1px solid #d3d3d3;
border-width: 0 1px;
background-image: url("./images/wrap1.png");
}
.main .area-left {
width: 729px;
}
.main .area-right {
width: 250px;
}
.main .area-right .user-login {
width: 250px;
height: 126px;
background: url("./images/index.png") 0 0;
}
.main .area-right .user-login .desc {
width: 205px;
margin: 0 auto;
padding-top: 16px;
color: #666;
font-size: 12px;
line-height: 22px;
}
.main .area-right .user-login .btn {
display: block;
margin: 15px auto 0;
width: 100px;
height: 31px;
line-height: 31px;
color: #fff;
text-align: center;
font-size: 12px;
background: url("./images/index.png") 0 -195px;
text-shadow: 0 1px 0 #8a060b;
}
</style>
</head>
<body>
<div class="main">
<div class="area wrapper_02">
<div class="area-left"></div>
<div class="area-right">
<div class="user-login">
<p class="desc">
登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
</p>
<a href="#" class="btn">用户登录</a>
</div>
</div>
</div>
</div>
</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>Document</title>
<style>
.box {
height: 200px;
background-color: orange;
line-height: 200px;
}
span {
background-color: #0f0;
display: inline-block;
height: 60px;
line-height: 60px;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">
dffdfdf
<span>aaaa</span>
</div>
</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>Document</title>
<style>
.box {
height: 200px;
background-color: orange;
line-height: 200px;
}
span {
background-color: #0f0;
display: inline-block;
height: 60px;
/* line-height: 60px; */
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">
dffdfdf
<span>aaaa</span>
</div>
</body>
</html>
