静态网页联系

最新推荐文章于 2024-07-07 23:10:31 发布

chixiantian4162

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量230

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/RiceLee/blog/633111

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云手机</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<!--顶部制作-->
	<div class="top">
		<div class="daohang">
			<div class="logo"></div>
			<nav>
				<a href="" class="TopA">云手机</a>
				<a href="" class="TopA">云手机助手</a>
				<a href="" class="TopA">应用</a>
				<a href="" class="TopA">主题</a>
				<a href="" class="TopA">云空间</a>
				<a href="" class="TopA">社区</a>
				<a href="" class="TopA">商城</a>
			</nav>
			<div class="login">
				<a href="">登录</a>
				<a href="">注册</a>
			</div>
		</div>
	</div>
	<div class="banner"></div>
<!--主体制作-->
	<div class="main">
		<div class="jptj">
			<p>精品推荐</p>
		</div>
		<div class="shopping">
			<div class="goods">
				 <div class="Gimg"></div>
				 <h3>海客Z1</h3>
				 <ul>
					 <li>主屏尺寸：6.0英寸</li>
					 <li>主摄像头：1300万</li>
					 <li>主&emsp;&emsp;频：1.5GHz</li>
					 <li>核&ensp;心&ensp;数：四核</li>
					 <li>存储空间：2G RAM + 32G ROM</li>
					 <li>电池容量：3000mAh</li>
					 <li></li>
					 <li>参考价格：<em>￥1799.00</em></li>
				</ul>
				 <span>立即购买</span>	 	
			</div>
			<div class="goods1">
				<div class="Gimg1"></div>
				 <h3>青橙 GO N1-Y</h3>
				 <ul>
					 <li>主屏尺寸：5.0英寸</li>
					 <li>主摄像头：1300万</li>
					 <li>主&emsp;&emsp;频：1.5GHz</li>
					 <li>核&ensp;心&ensp;数：四核</li>
					 <li>存储空间：2G RAM + 32G ROM</li>
					 <li>电池容量：3000mAh</li>
					 <li></li>
					 <li>参考价格：<em>￥1569.00</em></li>
				</ul>
				 <span>立即购买</span>
			</div>
			<div class="goods2">
				<div class="Gimg2"></div>
				 <h3>朵唯C1</h3>
				 <ul>
					 <li>主屏尺寸：5.0英寸</li>
					 <li>主摄像头：800万</li>
					 <li>主&emsp;&emsp;频：1.2GHz</li>
					 <li>核&ensp;心&ensp;数：四核</li>
					 <li>存储空间：1G RAM + 4G ROM</li>
					 <li>电池容量：1900mAh</li>
					 <li></li>
					 <li>参考价格：<em>￥1499.00</em></li>
				</ul>
				 <span>立即购买</span>
			</div>
			<div class="goods3">
				<div class="Gimg3"></div>
				 <h3>波导 骁龙XL</h3>
				 <ul>
					 <li>主屏尺寸：5.0英寸</li>
					 <li>主摄像头：1300万</li>
					 <li>主&emsp;&emsp;频：1.7GHz</li>
					 <li>核&ensp;心&ensp;数：八核</li>
					 <li>存储空间：2G RAM + 32G ROM</li>
					 <li>电池容量：2300mAh</li>
					 <li></li>
					 <li>参考价格：<em>￥2980.00</em></li>
				</ul>
				 <span>立即购买</span>
			</div>
		</div>
		<div class="more">
			
		</div>	
	</div>
<!--底部制作-->
	<div class="foot">
		<ul class="Bottom">
			<li class="link"><a href="">阿里巴巴</a></li>
			<li class="link"><a href="">道客巴巴</a></li>
			<li class="link"><a href="">淘宝</a></li>
			<li class="link"><a href="">天猫</a></li>
			<li class="link"><a href="">唯品会</a></li>
			<li class="link"><a href="">聚美优品</a></li>
			<li class="link"><a href="">特仑苏</a></li>
			<li class="link"><a href="">长城干红</a></li>
			<li class="link1"><a href="">大玩家</a></li>
		</ul>
		<p class="xuke">ICP证：浙B2-20080101    © 2012-2014 yunos.com版权所有</p>
	</div>
</body>
</html>

body{
	font-family:"微软雅黑";
	font-size:12px;
	background:gray;
	margin:0 auto;
}
a{
	text-decoration:none;
	color:black;
}
/*顶部样式*/
.top{
	width:895px;
	height:72px;
	background:white;
	margin:0 auto;
}
.daohang{
	width:604px;
	margin:0 auto;
}
.logo{
	width:82px;
	height:28px;
	background:url(../images/logo.jpg);
	position:absolute;
	margin:22px;
}
/*导航*/
nav{
	float:right;
	margin:28px 98px;
}
.TopA{
	padding-left:20px;
}
.login{
	float:right;
	margin-top:-44px;
}
.banner{
	width:895px;
	height:220px;
	background:url(../images/banner.jpg);
	margin:0 auto;

}
/*主体部分*/
.main{
	width:895px;
	height:562px;
	margin:-10px auto;
	background:white;
}
.jptj{
	width:895px;
	height:75px;
}
p{
	font-size:16px;
	text-align:left;
	position:absolute;
	margin:30px 138px;
}
/*商品展示*/
.shopping{
	margin-top:-10px;
	margin-left:138px;
}
.goods{
	width:302px;
	height:195px;
	border:1px solid #E2E2E2;
	float:left;
}
.goods1{
	width:302px;
	height:195px;
	border-top:1px solid #E2E2E2;
	border-right:1px solid #E2E2E2;
	float:left;

}
.goods2{
	width:302px;
	height:195px;
	border-bottom:1px solid #E2E2E2;
	border-left:1px solid #E2E2E2;
	position:absolute;
	margin:195px auto;

}
.goods3{
	width:302px;
	height:193px;
	border:1px solid #E2E2E2;
	position:absolute;
	margin:196px 303px;

}
/*商品信息*/
.Gimg{
	width:150px;
	height:195px;
	background:url(../images/goods1.jpg);
	float:left;
}
.Gimg1{
	width:150px;
	height:195px;
	background:url(../images/goods2.jpg);
	float:left;
}
.Gimg2{
	width:150px;
	height:195px;
	background:url(../images/goods3.jpg);
	float:left;
}
.Gimg3{
	width:150px;
	height:195px;
	background:url(../images/goods4.jpg);
	float:left;
}
h3{
	margin-top:5px;
}
ul{
	list-style:none;
	margin-top:-10px;
}
li{
	font-size:8pt;
	
}
em{
	font-size:14px;
	font-weight:bolder;
	color:#ff6600;
	font-family:"Arial";
}
span{
	float:left;
	background:#ff6600;
	width:50px;
	height:15px;
	padding:6px 15px;
	margin-top:-8px;
	color:white;
	font-weight:bolder;
}
.more{
	width:63px;
	height:92px;
	background:url(../images/more.jpg);
	position:relative;
	margin:44% 46%;
}
/*底部样式*/
.foot{
	width:895px;
	height:120px;
	background:#cccccc;
	margin:10px auto;
}
.Bottom{
	margin:0 14%;
}
.link{
	float:left;
	padding-left:10px;
	padding-right:10px;
	border-right:1px solid black;
	margin:30px 0;
}
.link1{
	float:left;
	padding-left:10px;
	padding-right:10px;
	margin:30px 0;
}
.xuke{
	font-size:x-small;
	margin:60px 20%;
}

转载于:https://my.oschina.net/RiceLee/blog/633111

chixiantian4162

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态网页联系

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="htt...
复制链接

扫一扫