穿搭速递网页

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>	
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset = utf-8"/>
		<link rel="stylesheet" href="css/style05.css" type="text/css"/>
		<title>穿搭速递</title>
	</head>
	<body>
	<div id="header">
	   <ul class="nav">
	   <li class="logo"><img src="images/logo.png"/></li>
	   <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>
	   <li ><a href="#">会员、登陆</a></li>
	   </ul>
	</div>
	
	
	<div id="content">
	
    <div class="banner"><img src="images/banner.jpg"/></div>
	
	<div class="style_bg">
	<div class="style">
	<dl>
	<dt class="left1"></dt><dd class="left2"><a href="#">明星风尚</a></dd>
	<dt class="left3"></dt><dd class="left4"><a href="#">时尚博主</a></dd>
	</dl>
	<dl>
	<dt class="center1"></dt><dd class="center2"><a href="#">流行搭配</a></dd>
	<dt class="center3"></dt><dd class="center4"><a href="#">精选秀场</a></dd>
	</dl>
	<dl class="third">
	<dt class="right1"></dt><dd class="right2"><a href="#">环球街拍</a></dd>
	</dl>
	</div>
	</div>
	
	<h2>潮流前沿/Tidal current</h2>
	<div class="current">
	<dl>
	   <dt class="match_1"></dt>
	   <dd class="current01">潮流饰品</dd>
	   <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="match_2"></dt>
	   <dd class="current01">时尚女鞋</dd>
	   <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="match_3"></dt>
	   <dd class="current01">精品包包</dd>
	   <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="match_4"></dt>
	   <dd class="current01">百搭衣帽</dd>
	   <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
	
	</dl>
	</div>
	
	
	
	<div id="footer">
	<p>Copyright 2006-2016 CHAOLIUFUSHIcom,All rights reserved.</p>
	<p>2001-2018,版权所有 潮流服饰85CP 备 13385453</p>
	</div>
	</body>
</html>
	
*{margin:0;padding:0;list-style:none;}
body{background:#fff9ed;font-family:"微软雅黑";font-size:14px;}
a:link,a:visited{text-decoration:none;color:#fff;font-size:16px;}

#header{width:100%;height:128px;background:url(../images/head_bg.jpg) repeat-x;border-bottom:3px solid #d5d5d5;}
.nav{width:980px;margin:0 auto;}
li{float:left;}
li a{display:inline-block;height:91px;width:119px;text-align:center;line-height:70px;}
li a:hover{background:url(../images/xuanfu.png) center center;}

#content{width:980px;margin:0 auto;}
.style_bg{width:908px;height:330px;background:#ec6e47;padding:10px 36px 5px;}
.style{width:892px;height:314px;background:#fff;padding:8px 10px 8px 6px;}
.style dl{width:279px;height:313px;float:left;margin-left:4px;}
.style .third{width:322px;}
.style dt,.style dd{float:left;}
.style .left1,.style .left3,.style .center1,.style .center3{width:162px;}
.style .left2,.style .left4,.style .center2,.style .center4,.style .right2{width:117px;}
.style .left1,.style .left2,.style .center1,.style .center2{margin-bottom:8px;}
.style .left1{height:169px;background:url(../images/pic01.jpg) no-repeat;}
.style .left2{height:169px;line-height:169px;}
.style .left3{height:137px;background:url(../images/pic02.jpg) no-repeat;}
.style .left4{height:137px;line-height:137px;}
.style .center1{height:117px;background:url(../images/pic03.jpg) no-repeat;}
.style .center2{height:117px;line-height:117px;}
.style .center3{height:188px;background:url(../images/pic04.jpg) no-repeat;}
.style .center4{height:188px;line-height:188px;}
.style .right1{width:205px;height:314px;background:url(../images/pic05.jpg) no-repeat;}
.style .right2{height:314px;line-height:314px;}
.style a{display:block;background:#242424;text-align:center;}
.style a:hover{background :#ea6c46;}

h2{width:259px;height:45px;background:#ea6c46;font-size:20px;font-weight:100;line-height:45px;text-align:center;color:#fff;margin-top:80px;}
.current{width:958px;height:342px;background:#fff;border:1px solid #dcd2ba;padding:13px 0 0 20px;}
.current dl{width:229px;height:330px;border:1px solid #dcd2ba;float:left;margin-right:5px;}
.current dt{width:229px;height:212px;border-bottom:1px solid #dcd2ba;}
.current01{width:229px;height:66px;background:#fff;line-height:66px;color:#7a7a7a;font-size:22px;text-align:center;}
.current02{width:140px;height:38px;background:#f3734e url(../images/gouwu.jpg) left center no-repeat;line-height:38px;color:#fff;margin:0 14px;padding-left:60px;}
.match_1{background:url(../images/match01.jpg) center center no-repeat;}
.match_2{background:url(../images/match02.jpg) center center no-repeat;}
.match_3{background:url(../images/match03.jpg) center center no-repeat;}
.match_4{background:url(../images/match04.jpg) center center no-repeat;}
.current a{display:inline-block;widt :180px;height:38px;}

#footer{width:100%;height:103px;background:#020202;color:#fff;line-height:26px;text-align:center;padding-top:50px;margin-top:65px;}
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值