你的位置:首页 > 网页设计

[网页设计]中国移动官网自编


源代码:

<!DOCTYPE html>
<html>
<head>
<title>中国移动官方网站</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="" href="favicon.ico">
</head>
<body>
<!-- 最上面的头部导航栏 -->
<div >
<!-- 左边两块 -->
<div >
<a href="#">ENGLISH</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">政企客户</a>
</div>
<!-- 右边四块 -->
<div >
<ul>
<li ><a href="#">登录</a></li>
<li ><a href="#">📱手机营业厅</a></li>
<li><a href="#"><img src="images/new.gif">积分商城</a></li>
<li><a href="#">关于中国移动</a></li>
</ul>
</div>
</div> <!-- 最上面的头部导航栏结束 -->
<!-- 头部的中间加logo部分信息 -->
<div >
<!-- logo部分 -->
<div >
<a href="#"><img src="images/logo.png"></a>
<a href="#">郑州</a>
</div>
<!-- 收索部分 -->
<form>
<input type="text" name="" value="通话记录查询">
<input type="image" name="" src="images/ss.png">
</form><!-- 收索部分结束 -->
<!-- 收索下的链接部分 -->
<div >
<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>
<li ><a href="#">4g换卡</a></li>
</ul>
</div>
</div><!-- 头部的中间加logo部分信息结束 -->
<!-- 导航栏部分 -->
<div >
<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 >
<!-- 左边一部分的信息 -->
<div >
<ul>
<li ><a href="#">直达移动商城</a></li>
<li ><img src="images/shopclass01.gif"><a href="#">买手机</a></li>
<li ><img src="images/shopclass02.gif"><a href="#">办套餐</a></li>
<li ><img src="images/shopclass03.gif"><a href="#">办业务</a></li>
<li ><img src="images/shopclass05.gif"><a href="#">挑配件</a></li>
<li ><img src="images/grzx.jpg"><a href="#">个人中心</a></li>
</ul>
</div><!-- 左边一部分的信息结束 -->
<!-- 中间一部分的信息 -->
<div >
</div><!-- 中间一部分的信息结束 -->
<!-- 右边一部分的信息 -->
<div >
<div >
<ul >
<li >
<ul>
<li><img src="images/20160323161008732O2n.gif"></li>
<li><a href="#">话费查询</a></li>
</ul>
</li>
<li >
<ul>
<li><img src="images/20160323161051270xTE.gif"></li>
<li><a href="#">流量查询</a></li>
</ul>
</li>
<li >
<ul>
<li><img src="images/201603231611017447ao.gif"></li>
<li><a href="#">资费专区</a></li>
</ul>
</li>
<li >
<ul>
<li><img src="images/20160323161119374xjY.gif"></li>
<li><a href="#">积分兑换</a></li>
</ul>
</li>
<li >
<ul>
<li><img src="images/20160323161129527sVd.gif"></li>
<li><a href="#">优惠促销</a></li>
</ul>
</li>
<li >
<ul>
<li><img src="images/201606301533302297S2.gif"></li>
<li><a href="#">选号入网</a></li>
</ul>
</li>
</ul>
</div>
<p >
<a href="#">充值缴费</a>
</p>
<form>
<input type="text" name="" value="请输入手机号">
</form>
<div >
<ul>
<li>30元</li>
<li >50元</li>
<li>100元</li>
<li>300元</li>
<li>其他</li>
</ul>
</div>
<div >
<a href="#">立即充值</a>
</div>
</div><!-- 右边一部分的信息结束 -->
</div><!-- 主体内容部分的上面第一块分三块结束 -->
<!-- 图片广告部分最上面一块 -->
<div >
<ul>
<li><img src="images/20160630161746236cCM.jpg"><span><a href="#">乐2超声波指纹,4GB+32GB内存</a></span></li>
<li><img src="images/20160630161942048cNj.jpg"><span><a href="#">乐2超声波指纹,4GB+32GB内存</a></span></li>
<li><img src="images/20160408162328271370.jpg"><span><a href="#">乐2超声波指纹,4GB+32GB内存</a></span></li>
<li><img src="images/201606301609004534PW.jpg"><span><a href="#">乐2超声波指纹,4GB+32GB内存</a></span></li>
</ul>
</div><!-- 图片广告部分最上面一块结束 -->
<!-- 图片广告中间一部分 -->
<div >
<div >
<span>4G专区</span><a href="#">查看更多></a>
</div>
<!-- 左边一块图片 -->
<div >
<a href="#"><img src="images/20160517132707556e41.jpg" title="4G+和更佳" ></a>
</div>
<div >
<ul>
<li><img src="images/20150804102421823hbt.jpg" title="全国组合套餐"><span><a href="#"><p >全国组合套餐</p><p>全国无漫游,流量语言自由组合</p></a></span></li>
<li ><img src="images/201605171558380616MA.jpg" title="4G套餐"><span><a href="#"><p >4G套餐</p><p>加速加量不加价</p></a></span></li>
<li><img src="images/201508041027255017ea.jpg" title="手机上网流量包"><span><a href="#"><p >手机上网流量包</p><p>信号好,速度快,流量足</p></a></span></li>
</ul>
<ul>
<li ><img src="images/20160518163725923nJH-1.jpg" title="高清语音"><span><a href="#"><p >高清语言(VoLTE)</p><p>低延时,高品质</p></a></span></li>
<li><img src="images/20160620153734298hPO.jpg" title="4G流量卡"><span><a href="#"><p >4G流量卡</p><p>充流量50元=2G国内流量</p></a></span></li>
<li ><img src="images/20160517154449126YLK.jpg" title="4G手机"><span><a href="#"><p >4G手机</p><p>4G手机、品牌、厂家手机优惠</p></a></span></li>
</ul>
</div>
</div><!-- 图片广告中间一部分结束 -->
<!-- 买手机部分 -->
<div >
<div >
<span>买手机</span><a href="#">查看更多></a>
</div>
<!-- 手机价格与图片部分 -->
<div >
<ul>
<li><img src="images/201606281020271922R6.jpg" title="中国移动A2"><h2>中国移动</h2><h3>5.5英寸显屏双卡双待</h3><p>¥799</p></li>
<li><img src="images/20160412101826158sXq.jpg" title="华为荣耀"><h2>华为荣耀</h2><h3>5英寸屏幕,800万像素</h3><p>¥639</p></li>
<li><img src="images/20160530151130529BX0.jpg" title="小米4C"><h2>小米4C</h2><h3>边缘触控,1300万像素</h3><p>¥799</p></li>
<li><img src="images/20160427160728615fvG-1.jpg" title="iphone6"><h2>iphone6</h2><h3>A8芯片!指纹安全!</h3><p>¥3688</p></li>
</ul>
</div>
</div><!-- 买手机部分结束 -->
<!-- 图片广告中间一部分 -->
<div >
<div >
<span>业务推荐</span><a href="#">查看更多></a>
</div>
<!-- 左边一块图片 -->
<div >
<a href="#"><img src="images/201606241539241833T3-1.jpg" title="宽带" ></a>
</div>
<div >
<ul>
<li><img src="images/20150804095410365qAu.jpg" title="手机上网流量包"><span><a href="#"><p >手机上网流量包</p><p>速度快、信号好、流量足</p></a></span></li>
<li><img src="images/20150804095634654VK6.jpg" title="手机上网加油包"><span><a href="#"><p >手机上网加油包</p><p>流量续杯</p></a></span></li>
<li><img src="images/20160623135616652SDb.jpg" title="流量日套餐"><span><a href="#"><p >流量日套餐</p><p>高流量、低价格、放心玩</p></a></span></li>
</ul>
<ul>
<li><img src="images/20150804100215844jh3.jpg" title="话费提醒"><span><a href="#"><p >话费提醒</p><p>三种话费消费提醒方式</p></a></span></li>
<li><img src="images/20150804100415714dEq.jpg" title="彩铃"><span><a href="#"><p >彩铃</p><p>个性化的彩铃,展现个性的你</p></a></span></li>
<li><img src="images/20150804100617888GNM.jpg" title="飞信"><span><a href="#"><p >飞信</p><p>永不离线的通信平台</p></a></span></li>
</ul>
</div>
</div><!-- 图片广告中间一部分结束 -->
<!-- 公告部分 -->
<div >
<p ><img src="images/indexgg.gif">公告:<a href="#" title="关于手机桌面助理业务下线的公告">-关于手机桌面助理业务下线的公告</a><a >2016-07-01</a></p>
<p ><a href="#" title="关于7月21日至7月22日网站系统升级的公告">-关于7月21日至7月22日网站系统升级的公告</a><a >2016-07-25</a></p>
<p ><&nbsp;&nbsp;&nbsp;&nbsp;></p>
</div><!-- 公告部分结束 -->
<!-- 底部的详细信息与列表部分 -->
<div >
<div >
<ul>
<li>服务渠道</li>
<li><a href="#">自助终端</a></li>
<li><a href="#">10086热线</a></li>
<li><a href="#">实体营业厅</a></li>
<li><a href="#">短信营业厅</a></li>
<li><a href="#">网上营业厅</a></li>
<li><a href="#">掌上/手机营业厅</a></li>
</ul>
<ul>
<li>站点导航</li>
<li><a href="#">MM</a></li>
<li><a href="#">飞信</a></li>
<li><a href="#">和包</a></li>
<li><a href="#">和阅读</a></li>
<li><a href="#">139邮箱</a></li>
<li><a href="#">咪咕音乐</a></li>
</ul>
<ul>
<li>快捷服务</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>
<ul>
<li>产品推荐</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>
<ul>
<li>商城服务指南</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><!-- 底部的详细信息与列表部分结束 -->
<!-- 底部的详细信息和版权信息 -->
<div >
<div >
<ul>
<li><a href="#">新闻中心</a></li>
<li>|</li>
<li><a href="#">诚聘英才</a></li>
<li>|</li>
<li><a href="#">采集信息</a></li>
<li>|</li>
<li><a href="#">企业合作</a></li>
<li>|</li>
<li><a href="#">联系我们</a></li>
<li>|</li>
<li><a href="#">站点导航</a></li>
<li>|</li>
<li><a href="#">中国移动研究院</a></li>
<li>|</li>
<li><a href="#">中国移动设计院</a></li>
<li>|</li>
<li><a href="#">网站地图</a></li>
<li>|</li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
<div >
<ul>
<li>掌上营业厅:</li>
<li><a href="#">wap.10086.cn</a></li>
<li>语音自助服务:10086 短信营业厅:10086</li>
<li><a href="#">自助终端</a></li>
<li><a href="#">营业厅</a></li>
<li><a href="#">手机营业厅下载</a></li>
</ul>
</div>
<p >Copyright©1999-2016&nbsp;&nbsp;&nbsp;&nbsp;中国移动&nbsp;&nbsp;&nbsp;&nbsp;版权所有</p>
<p >中华人民共和国增值电信业务经营许可证&nbsp;&nbsp;&nbsp;&nbsp;经营许可证编号:A2.B1.B2-2010000</p>
<p ><a href="#"><img src="images/knetSealLogo.png"></a><img src="images/gov.gif"><a href="#">京ICP备05002571号</a></p>
</div><!-- 底部的详细信息和版权信息结束 -->
</body>
</html>

CSS样式:

*{
margin:0px;
padding: 0px;
}
body{
font: 12px/150% Arial,Verdana,"\5b8b\4f53";
color: #313031;
background-color: white;
}
/*最上面的头部导航栏*/
.header{
width: 100%;
height: 30px;
background-color: rgb(246,246,246);
line-height: 30px;
}
a{
text-decoration: none;
color: rgb(145,136,136);
}
a:hover{
color: rgb(69,179,254);
}
/*左边两块*/
.header .header_top_left{
float: left;
position: relative;
left: 200px;
}
/*右边四块*/
.header .header_top_right ul li{
list-style-type: none;
float: left;
margin-left: 20px;
}
.header .header_top_right ul{
float: right;
position: relative;
right: 200px;
}
.header .header_top_right ul .one{
width: 80px;
height: 30px;
text-align: center;
}
.header .header_top_right ul .one:hover{
background-color: white;
}
/*头部的中间加logo部分信息*/
.header_conter{
width: 1200px;
height: 95px;
margin: 0px auto;
}
/*logo部分*/
.header_conter .logo{
float: left;
position: relative;
top: 25px;
}
.header_conter .logo .zheng{
font-size: 17px;
position: relative;
top: -10px;
left: 10px;
}
.header_conter form{
float: right;
position: relative;
right: 50px;
}
.header_conter form .search{
width: 490px;
height: 33px;
border: 2px solid rgb(223,223,223);
}
.header_conter form .search2{
position: relative;
left: -5px;
top: 14px;
}
/*收索下的链接部分*/
.header_conter .link ul li{
list-style-type: none;
float: left;
margin-left: 20px;
}
.header_conter .link ul{
position: relative;
top: 60px;
left: 280px;
}
.header_conter .link ul .g{
position: relative;
left: 330px;
top: -18px;
}
.header_conter .link ul li .guo{
color: rgb(227,45,121);
}
/*导航栏部分*/
.nav{
width: 1200px;
height: 40px;
margin: 0px auto;
}
.nav ul li{
list-style-type: none;
float: left;
background-color: rgb(228,228,228);
width: 258.7px;
height: 40px;
border-right: 1px solid white;
line-height: 40px;
text-align: center;
}
.nav ul li:hover{
background-color: white;
}
.nav ul li:hover a{
color:rgb(69,179,254);
}
.nav ul .one{
width: 160px;
height: 38px;
background-color: rgb(228,228,228);
border-top: 3px solid rgb(42,131,208);
border-right: 1px solid white;
}
.nav ul li a{
font-size: 16px;
}
/*主体内容部分的上面第一块分三块*/
.section_one{
width: 1200px;
height: 370px;
margin: 10px auto;
}
/*左边一部分的信息*/
.section_one .lift{
width: 160px;
height: 350px;
border: 1px solid rgb(187,217,233);
float: left;
}
.section_one .lift ul li{
list-style-type: none;
margin-top: 10px;
}
.section_one .lift ul .lift_one{
width: 140px;
height: 20px;
line-height: 20px;
text-align: center;
position: relative;
left: 10px;
border-bottom: 1px solid rgb(233,233,233);
}
.section_one .lift ul .lift_tuo{
width: 140px;
height: 55px;
line-height: 35px;
line-height: 55px;
text-align: center;
border-bottom: 1px solid rgb(233,233,233);
position: relative;
left: 10px;
}
.section_one .lift ul .lift_tuo a{
font-size: 15px;
color: rgb(51,51,92);
}
.section_one .lift ul .zhong{
border: none;
}
.section_one .lift ul img{
position: relative;
left: -10px;
top:4px;
}
/*中间一部分的信息结束*/
.section_one .conter{
width: 740px;
height: 350px;
background-image: url(images/20160603154442416RlR.jpg);
float: left;
position: relative;
left: 10px;
}
/*右边一部分的信息*/
.section_one .right{
width: 278px;
height: 350px;
float: right;
border: 1px solid rgb(233,233,233);
}
.section_one .right .right_top{
width: 245px;
height: 150px;
float: left;
position: relative;
left: 15px;
top: 10px;
}
.section_one .right .right_top ul li{
list-style-type: none;
}
.section_one .right .right_top .one .tuo{
width: 33.3%;
height: 80px;
float: left;
text-align: center;
}
.section_one .right .right_conter{
float: left;
position: relative;
top: 40px;
left: 30px;
font-size: 15px;
color: rgb(51,51,92);
}
.section_one .right form input{
width: 230px;
height: 35px;
border: 1px solid rgb(233,233,233);
border-radius: 5px;
float: left;
position: relative;
left: 28px;
top: 50px;
}
.section_one .right .money ul li{
list-style-type: none;
float: left;
width: 40px;
height: 38px;
border: 1px solid rgb(233,233,233);
margin-left: 5px;
line-height: 38px;
text-align: center;
border-radius: 5px;
}
.section_one .right .money ul li:hover{
background-color:rgb(220,0,121);
}
.section_one .right .money ul{
float: left;
position: relative;
top: 60px;
left: 22px;
}
.section_one .right .money .money_one{
background-color: rgb(220,0,121);
}
.section_one .right .bottom{
float: left;
width: 90px;
height: 35px;
background-color: rgb(75,170,251);
position: relative;
top: 68px;
left: 100px;
border-radius: 5px;
line-height: 35px;
text-align:center;
}
.section_one .right .bottom a{
color: white;
}
/*图片广告部分最上面一块*/
.section_tuo{
width: 1200px;
height: 180px;
margin: 0px auto;
}
.section_tuo ul li{
border: 5px solid rgb(223,223,223);
width: 290px;
height: 170px;
list-style-type: none;
float: left;
}
.section_tuo ul li img{
float: right;
position: relative;
top:60px;
}
.section_tuo ul li span{
width: 110px;
float:left;
position: relative;
top: -100px;
}
.section_tuo ul li span a{
font-size: 15px;
}
/*图片广告中间一部分*/
.section_tree{
width: 1200px;
height: 430px;
margin: 10px auto;
}
.top{
float: left;
width: 1200px;
line-height: 50px;
height: 50px;
border: 1px solid rgb(223,223,223);
}
.top span {
font-size: 14px;
padding-left: 20px;
color: rgb(42,131,208);
}
.top a{
float: right;
padding-right: 10px;
}
/*左边一块图片*/
.section_tree .left{
width: 298px;
height: 377px;
float: left;
}
.section_tree .conter_top ul{
width:898px;
height:190px;
float: right;
}
.section_tree .conter_top ul li{
width: 33.1%;
height: 185px;
border: 1px solid rgb(223,223,223);
list-style-type: none;
float: left;
}
.section_tree .conter_top ul li img{
float: right;
position: relative;
top: 53px;
}
.section_tree .conter_top ul li img:hover{
animation-name: img;
animation-duration: 0.3s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes img{
0%{right: 0px;}
100%{right: 10px;}
}
.section_tree .conter_top ul li span{
width: 220px;
height: 45px;
float: left;
position: relative;
top: -120px;
left: 10px;
}
.section_tree .conter_top ul li span a{
font-size: 14px;
}
.section_tree .conter_top ul .gray{
background-color: rgb(240,239,240);
}
.section_tree .conter_top ul li span a .p1{
font-size: 17px;
color: rgb(51,51,51);
}
.section_tree .conter_top ul li span a .p2{
color: rgb(220,0,121);
}
/*买手机部分*/
.section_five{
width: 1200px;
height: 430px;
margin: 10px auto;
}
/*手机价格与图片部分*/
.section_five .bottom ul{
float: left;
}
.section_five .bottom ul li{
list-style-type: none;
float: left;
width: 298px;
height: 380px;
border: 1px solid rgb(223,223,223);
}
.section_five .bottom ul li img{
float: right;
position: relative;
top:80px;
}
.section_five .bottom ul li img:hover{
animation-name: img;
animation-duration: 0.3s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
@keyframes img{
0%{right: 0px;}
100%{right: 10px;}
}
.section_five .bottom ul li h2{
float: left;
position: relative;
left: 10px;
}
.section_five .bottom ul li h3{
float: left;
position: relative;
top: -240px;
color: rgb(42,167,235);
}
.section_five .bottom ul li p{
float: left;
position: relative;
left: -110px;
top: -200px;
font-size: 20px;
color: rgb(231,44,163);
}
/*公告部分*/
.section_six{
width: 1200px;
height: 38px;
border: 1px solid rgb(223,223,223);
margin: 10px auto;
}
.section_six .left{
float: left;
line-height: 38px;
font-size: 14px;
}
.a1{
color: rgb(0,131,201);
}
.a2{
margin-left: 20px;
}
.section_six .right{
float: right;
line-height: 38px;
font-size: 14px;
position: relative;
right: 360px;
}
.section_six .fuhao{
float: right;
line-height: 38px;
font-size: 16px;
color: rgb(0,131,201);
position: relative;
right: -300px;
}
/*底部的详细信息与列表部分*/
.footer{
width: 1200px;
height: 233px;
border: 1px solid rgb(223,223,223);
margin: 10px auto;
}
.footer .conter{
width: 1200px;
height: 200px;
position: relative;
left: -90px;
}
.footer ul{
float: left;
margin-left: 130px;
position: relative;
top: 20px;
}
.footer ul li{
list-style-type: none;
margin-top: 8px;
font-size: 15px;
}
.footer .conter ul li a{
font-size: 14px;
}
.footer .conter ul li a:hover{
text-decoration: underline;
}
/*底部的详细信息和版权信息*/
.footer_bottom{
width: 1200px;
height: 150px;
border: 1px solid rgb(223,223,223);
margin: 25px auto;

}
.footer_bottom .one ul{
position: relative;
left: 250px;
overflow: hidden;
}
.footer_bottom .one ul li{
list-style-type: none;
float: left;
margin-left: 5px;
}
ul li a:hover{
text-decoration: underline;
}
.footer_bottom .tuo ul{
position: relative;
top: 10px;
left: 310px;
}
.footer_bottom .tuo ul li{
list-style-type: none;
float: left;
margin-left: 2px;
}
.footer_bottom .three{
float: left;
position: relative;
top: 35px;
left: -60px;
}
.footer_bottom .five{
float: left;
position: relative;
top: 45px;
left: 350px;
}
.footer_bottom .six{
float: left;
position: relative;
top: 65px;
}
.footer_bottom .six_img{
position: relative;
top: -10px;
}
.footer_bottom .six_a{
position: relative;
top: -18px;
left: 5px;
}