“穿搭速递”——网页制作案例

最新推荐文章于 2024-05-08 13:52:22 发布

java霆

最新推荐文章于 2024-05-08 13:52:22 发布

阅读量1.1w

点赞数 67

文章标签： css html5

本文链接：https://blog.csdn.net/m0_54145966/article/details/121538994

版权

你们想要的图片都在这里了
在这里插入图片描述

在这里插入图片描述

英文不好随便命名，但是都是对应好的，看标签写样式

这是html代码

<!DOCTYPE html>	
<html>
	<head>
		<meta charset = "utf-8"/>
		<link rel="stylesheet" href="wangye.css" type="text/css"/>
		<title>穿搭速递</title>
	</head>
	<body>
	<div align="center">
	<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" height="373" width="980"/></div>

	<div class="aa">
	
	<div class="b1">
	<dl>
	<dt class="c1"></dt><dd class="c2">
	<a href="#">明星风尚</a></dd>
	<dt class="c3"></dt><dd class="c4">
	<a href="#">时尚博主</a></dd>
	</dl>
	<dl>
	<dt class="d1"></dt><dd class="d2"><a href="#">流行搭配</a></dd>
	<dt class="d3"></dt><dd class="d4"><a href="#">精选秀场</a></dd>
	</dl>
	<dl class="xx">
	<dt class="e1"></dt><dd class="e2"><a href="#">环球街拍</a></dd>
	</dl>
	</div>
	</div>

	<h2>潮流前沿/Tidal current</h2>
	<div class="ss">
	<dl>
	   <dt class="xx1"></dt>
	   <dd class="ww1">潮流饰品</dd>
	   <dd class="ww2"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="xx2"></dt>
	   <dd class="ww1">时尚女鞋</dd>
	   <dd class="ww2"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="xx3"></dt>
	   <dd class="ww1">精品包包</dd>
	   <dd class="ww2"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	<dl>
	   <dt class="xx4"></dt>
	   <dd class="ww1">百搭衣帽</dd>
	   <dd class="ww2"><a class="three" href="#">快速购买通道</a></dd>
	</dl>
	</div>
	<div id="footer">
	</div>
</div>
</div>
	</body>
</html>

css样式


*{

	margin:0;
	padding:0;
	list-style:none;
}
body{
	background:#fff9ed;
	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;
}
#header{
	width:100%;
	height:128px;
	background:url(../images/head_bg.jpg) repeat-x;
	border-bottom:3px solid #d5d5d5;}

	.aa{
		width:908px;
		height:330px;
		background:#ec6e47;
		padding:10px 36px 5px;
	}
	.b1{
		width:892px;
		height:314px;
		margin: 0px auto;
		background:#fff;
		padding:8px 10px 8px 6px;
	}
.b1 dl{
	width:279px;
	height:313px;
	float:left;
	margin-left:4px;

}
.b1 .third{
	width:322px;
}
.b1 dt,.b1 dd{
	float:left
	;}
.b1 .c1,.b1 .c3,.b1 .d1,.b1 .d3{
	width:162px;
}
.b1 .c2,.b1 .c4,.b1 .c2,.b1 .d4,.b1 .e2{
	idth:117px;
}
.b1 .c1,.b1 .c2,.b1 .d1,.b1 .d2{
	margin-bottom:8px;
}
.b1 .c1{
	height:169px;background:url(../images/pic01.jpg) no-repeat;}
.b1 .c2{
	height:169px;line-height:169px;}
.b1 .c3{
	height:137px;background:url(../images/pic02.jpg) no-repeat;}
.b1 .c4{
	height:137px;line-height:137px;}
.b1 .d1{
	height:117px;background:url(../images/pic03.jpg) no-repeat;}
.b1 .d2{
	height:117px;line-height:117px;}
.b1 .d3{
	height:188px;background:url(../images/pic04.jpg) no-repeat;}
.b1 .d4{
	height:188px;line-height:188px;}
.b1 .e1{
	width:205px;height:314px;background:url(../images/pic05.jpg) no-repeat;}
.b1 .e2{
	height:314px;line-height:314px;}
.b1 a{
	display:block;background:#242424;text-align:center;}
.b1 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;
}
.ss{
	width:958px;
	height:342px;
	background:#fff;
	border:1px solid #dcd2ba;
	padding:13px 0 0 20px;
}
.ss dl{
	width:229px;
	height:330px;
	border:1px solid #dcd2ba;
	float:left;
	margin-right:5px;
}
.ss dt{width:229px;
	height:212px;
	border-bottom:1px solid #dcd2ba;
}
.ww1{
	width:229px;
	height:66px;
	background:#fff;
	line-height:66px;
	color:#7a7a7a;
	font-size:22px；
	text-align:center;
}
.ww2{
	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;
}
.xx1{
	background:url(../images/match01.jpg) center center no-repeat;}
.xx2{
	background:url(../images/match02.jpg) center center no-repeat;}
.xx3{
	background:url(../images/match03.jpg) center center no-repeat;}
.xx4{
	background:url(../images/match04.jpg) center center no-repeat;}
.ss a{
	display:inline-block;
	widt:180px;height:38px;
}

哈哈！复制完了点个赞吧，感谢！

java霆

关注

67
点赞
踩
91

收藏

觉得还不错? 一键收藏
9
评论
“穿搭速递”——网页制作案例

你们想要的图片都在这里了英文不好随便命名，但是都是对应好的，看标签写样式这是html代码<!DOCTYPE html> <html> <head> <meta charset = "utf-8"/> <link rel="stylesheet" href="wangye.css" type="text/css"/> <title>穿搭速递</title> </
复制链接

扫一扫