标签：web color text contain2 基础 height width 移动 margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="xxx.css"/> -->
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
width: 1200px;
margin: 0 auto;
}
header{
position: relative;
width: 1200px;
margin: 0 auto;
height: 80px;
}
.head_l{
position: absolute;
left: 25px;
top: 6px;
}
.head_r{
position: absolute;
right: 25px;
top: 6px;
width: 60px;
}
.keyword{
width: 200px;
height: 20px;
background: url(img/search.png) no-repeat;
background-size: 15px;
text-indent: 30px;
}
.search{
width: 40px;
background-color: chocolate;
color: white;
font-weight: bold;
}
#hnav{
background-color: darkseagreen;
}
#head_nav{
width: 1200px;
margin: 10px auto;
display: flex;
justify-content: space-around;
}
#head_nav a{
text-decoration: none;
color: white;
font-size: 1.5em;
font-weight: bold;
line-height: 60px;
}
#head_nav a:hover{
color: blue;
}
#adv{
width: 1200px;
margin: 0px auto;
}
#adv img{
width: 1200px;
}
#contain{
width: 1200px;
height: 450px;
margin: 5px auto;
position: relative;
}
#contain1,#contain2{
border: solid 1px #d4d4d4;
border-radius: 8px;
background-color: white;
}
#contain1{
width: 18%;
position: absolute;
top: 0;
left: 0;
}
#contain2{
width: 80%;
position: absolute;
top: 0;
right: 0;
}
#contain1 h2,#contain2 h2{
text-align: center;
color: #697a5b;
text-shadow: 1px 2px 1px #cfc987,-1px 2px 1px #CFC987;
padding-top: 15px;
}
#contain1 a{
margin: 0 auto;
padding: 10px 0 0 0;
display: block;
text-align: center;
color: #5d5d5d;
letter-spacing: 2px;
text-decoration: none;
border-bottom: dotted 1px #5d5d5d;
}
#contain1 a:last-child{
border-bottom: none;
border-radius: 0 0 4px 4px;
padding-bottom: 5px;
}
#contain2 ul li img{
width: 265px;
height: 280px;
}
#contain2 ul li{
width: 28%;
height: 340px;
text-align: center;
list-style-type: none;
}
#contain2 p{
font-weight: bold;
}
#contain2 span{
color: red;
font-weight: bold;
}
#contain2 ul{
display: flex;
justify-content: space-around;
}
#contain2 h2{
margin-bottom: 20px;
}
footer{
width: 1200px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #5D5D5D;
}
</style>
</head>
<body>
<header>
<div class="head_l">
<label>搜索</label>
<input type="search" class="keyword" placeholder="xxxx"/>
<input type="submit" value="搜索" class="search">
</div>
<img src="img/logo.jpg" class="head_r">
</header>
<section id="hnav">
<nav id="head_nav">
<a href="#">书店主页</a>
<a href="#">企业采购</a>
<a href="#">小说投稿</a>
<a href="#">客户服务</a>
<a href="http://www.baidu.com">个人中心</a>
</nav>
</section>
<section id="adv">
<img src="img/bannar.png" >
</section>
<main id="contain">
<aside id="contain1">
<h2>搜索图书</h2>
<a href="#">文学</a>
<a href="#">哲学</a>
<a href="#">历史</a>
<a href="#">小说</a>
<a href="#">少儿</a>
<a href="#">教辅</a>
<a href="#">网络</a>
<a href="#">青春</a>
<a href="#">科技</a>
<a href="#">艺术</a>
<a href="#">管理</a>
</aside>
<article id="contain2">
<h2>重磅推荐</h2>
<ul>
<li>
<img src="img/b_bdr.jpg" >
<p>摆渡人<span>¥19.9元</span></p>
</li>
<li>
<img src="img/b_byx.jpg" >
<p>白夜行<span>¥25.5元</span></p>
</li>
<li>
<img src="img/b_huozhe.jpg" >
<p>活着<span>¥29.9元</span></p>
</li>
</ul>
</article>
</main>
<footer>
<hr>
<p>网上书店 2023®</p>
</footer>
</body>
</html>
标签：web,
color,
text,
contain2,
基础,
height,
width,
移动,
margin
From： https://www.cnblogs.com/lockeart/p/17145344.html