2021/3/17 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>练习</title>
<style>
* {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background: #e83828;
}
#header .head {
width: 1005px;
height: 50px;
background: #D1D3D6;
margin: auto; /* 4个值上右下左 */ /* 3个值上 左右 下 */ /* 上下 左右 */ /* padding 同理 */
}
#banner {
height: 500px;
background: slateblue;
}
#category {
width: 1005px;
height: 200px;
margin: auto;
background: #FF359A;
}
#category .item {
width: 125px;
height: 165px;
padding-right: 25px;
padding-left: 25px;
padding-bottom: 25px;
padding-top: 10px;
border-right: 1px dashed black;
float: left;
}
#category .item.first {
padding-left: 0;
}
#category .item.first {
padding-right: 0;
border: 0;
}
#case .title-text {
width: 100px;
margin: auto;
padding-top: 20px;
padding-bottom: 10px;
font-size: 45px;
}
#case .item-wrapper {
width: 1000px;
margin: auto;
overflow: auto;
}
#case .item-wrapper .item {
width: 320px;
height: 320px;
background: #9acd32;
float: left;
}
#case .item-wrapper .item.mg {
margin-left: 20psx;
margin-right: 20px;
}
#case p {
width: 10005px;
margin-left: auto;
margin-top: auto;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 30px;
color: dimgray;
}
</style>
</head>
<body>
<div id="header">
<div class="head"></div>
</div>
<div id="banner"></div>
<div id="category">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>
<div id="case">
<div class="title-text">
case
</div>
<div class="item-wrapper">
<div class="item"></div>
<div class="item mg"></div>
<div class="item"></div>
</div>
<p>查看更多</p>
</div>
</body>
</html>