效果图，图片自己换，
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>泰国</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="box">
<div class="titles">泰国</div>
<div class="img-box">
<img class="auto-img" src="images/a001.jpg"/>
</div>
<div class="text-box">
<div class="text-box-a">
<a href="#">曼谷、芭提雅(珊瑚岛、金沙岛)5晚7天</a>
</div>
<div class="text-box-a">
东航直飞曼谷客机，入住1晚曼谷国际5星+4晚泰式5星酒店,芭提雅双岛(珊瑚岛+金沙岛)清...
</div>
<div class="text-box-a">
出发日期：星期一,星期二,星期三,星期四,星期五
</div>
</div>
<div class="bottom ovf">
<div class="fl text-a1">
班期：每周发团
</div>
<div class="fr">
<div class="price">￥ 4549</div>
<div class="rush-to-buy">立即抢购</div>
</div>
</div>
</div>
</body>
</html>
css样式：
html,body{
padding:0
margin:20px 0 0
}
a{
text-decoration:none
}
.fl{
float:left
}
.fr{
float:right
}
.ovf{
overflow: hidden
}
.box{
width:50%
margin:0 auto
border:1px dashed #000000
padding:4px
}
.titles{
width:100%
text-align: center
color:#ffffff
background-color: #ff0000
}
.img-box{
width:100%
margin-top: 4px
}
.auto-img{
display: block
width:100%
}
.text-box{
width:100%
}
.text-box-a{
width:100%
font-size: 14px
line-height: 20px
letter-spacing: 1px
}
.text-box-a>a{
color:#0089ff
}
.bottom{
margin-top: 30px
}
.text-a1{
font-size: 18px
font-style: italic
font-style:oblique/*为保证斜体效果加一个*/
}
.price{
font-size: 16px
color:#8B3E2F
}
.rush-to-buy{
width:80px
text-align: center
background-color: #ff0000
font-size: 16px
}
先看效果：
代码：
<!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条）