您的位置：首页 > Web前端 > CSS

静态网页联系

2016-03-08 00:00 676 查看

<!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>主  频：1.5GHz</li>
<li>核 心 数：四核</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>主  频：1.5GHz</li>
<li>核 心 数：四核</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>主  频：1.2GHz</li>
<li>核 心 数：四核</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>主  频：1.7GHz</li>
<li>核 心 数：八核</li>
<li>存储空间：2G RAM + 32G ROM</li>
<li>电池容量：2300mAh</li>
<li></li>
<li>参考价格：<em>￥2
3ff0
980.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%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Html 静态手机页面 CSS 前端练习

相关文章推荐

新的分享

章节导航