<html>
<head>
<meta charset="utf-8" />
<title>给人网页</title>
</head>
<body>
<h1>给人网页</h1>
</body>
</html>
先看效果：
代码：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>书店</title>
<style type="text/css">
*{
padding:0
margin:0
box-sizing:border-box
}
li{
list-style:none
}
.wrap{
width:960px
margin:0 auto
}
.header{
overflow:hidden
margin:10px auto
}
.logo{
font-size:20px
color:#00F
text-align:center
line-height:100px
height:100px
width:20%
float:left
}
.banner{
height:100px
width:80%
float:left
border:1px solid #00F
font-size:30px
text-align:center
line-height:100px
background:#990
}
.nav ul{
width:100%
background:#6CC
overflow:hidden
}
.nav ul li{
float:left
line-height:30px
margin-right:15px
}
.nav ul li a{
color:#000000
text-decoration:underline
}
.main{
margin-top:20px
overflow:hidden
}
.sidebar{
width:200px
float:left
}
.login{
border:1px solid #06F
}
.login h2{
line-height:24px
background:#6CC
color:#000000
text-align:center
font-size:18px
font-weight:normal
}
.login p{
margin:10px 10px
}
.login p input{
width:100px
}
.login button{
background:none
border:1px solid #000000
padding:5px 10px
margin:15px
}
.car{
margin:30px auto
width:50px
height:50px
border-radius:50%
background:#C90
line-height:50px
text-align:center
}
.book{
width:750px
float:right
}
.book ul li{
border:1px solid #069
padding:10px
overflow:hidden
margin-bottom:20px
}
.book ul li img{
float:left
width:100px
height:120px
border:1px solid #999
margin-right:10px
}
.book ul li .info{
float:left
}
.book ul li .info p{
margin-bottom:10px
}
.book ul li .more{
margin-top:20px
}
.book ul li .more a{
color:#000000
text-decoration:underline
}
.book ul li .more .buy{
padding:3px 5px
background:#FC0
color:#000000
border:1px solid #000000
border-radius:3px
text-decoration:none
margin-left:15px
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"><h1>网上书店</h1></div>
<div class="banner">欢迎访问</div>
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文学类</a></li>
<li><a href="#">计算机类</a></li>
<li><a href="#">英语类</a></li>
<li><a href="#">动态啥类</a></li>
</ul>
</div>
<div class="main">
<div class="sidebar">
<div class="login">
<h2>用户登录</h2>
<form method="post">
<p>用户名:<input type="text" /></p>
<p>密 码:<input type="password" /></p>
<button>登录</button>
<button>注册</button>
</form>
</div>
<div class="car">
购物车
</div>
</div>
<div class="book">
<ul>
<li>
<img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg">
<div class="info">
<p>名称：图灵</p>
<p>作者：言小鱼</p>
<p>价格：无价</p>
<p class="more"><a href="#">详细信息</a><a href="#" class="buy">购买</a></p>
</div>
</li>
<li>
<img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg">
<div class="info">
<p>名称：图灵</p>
<p>作者：言小鱼</p>
<p>价格：无价</p>
<p class="more"><a href="#">详细信息</a><a href="#" class="buy">购买</a></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
满意请采纳~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）