顺丰官网代码（自编）

<!DOCTYPE html>
<html>
<head>
<title>顺丰官网</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

<div class="header">
<p class="header_logo"><a href="#"><img src="data:images 2/logoSC.png"></a></p>
<p class="header_tuo"><span>选择国家或地区</span><img src="data:images 2/123.png"></p>
<p class="header_one">
<a href="#">首页</a>
<a href="#">关于顺丰</a>
<a href="#">顺丰科技</a>
<a href="#">顺丰分享</a>
<a href="#">顺丰公益</a>
<a href="#">登录</a>
<a href="#">注册</a>
</p>
</div>

<div class="nav">
<ul>
<li class="nav_one"><a href="#">寄件</a></li>
<li class="nav_one"><a href="#">会员</a></li>
<li class="nav_one"><a href="#">速运物流</a></li>
<li class="nav_one"><a href="#">金融</a></li>
<li class="nav_one"><a href="#">电商企业服务</a></li>
<li><a href="#">顺丰优选</a></li>
<li class="li_one"><a href="#">促销专区</a><img src="data:images 2/promotion_cn.png"></li>
</ul>
</div>

<div class="section">
<ul class="section_ul">
<li class="section_one"><a href="#">运单追踪</a></li>
<li class="section_tuo hover"><a href="#">运费时效查询</a></li>
<li class="section_tree hover"><a href="#">服务网点查询</a></li>
<li class="section_four hover"><a href="#">收送范围查询</a></li>
<li class="section_five hover"><a href="#">在线客服查询</a></li>
<li class="section_six hover"><a href="#">客服专区</a></li>
</ul>
<div class="section_div1">
<p class="p1">登录我的顺丰</p>
<p class="p2">成为会员</p>
</div>
</div>

<div class="section_hao">
<div class="section_form">
<form>
<input type="text" name="" value="在此输入运单号查询"><img src="qq.png">
</form>
</div>
</div>

<div class="section_content">

<div class="section_content_one"><span>新闻公告</span><a href="#">+更多新闻公告</a></div>
<div class="section_content_tuo">
<ul>
<li><a href="#">顺丰驱城市速度深圳站</a></li>
<li><a href="#">关于2016年第1号强台风“尼伯特”登陆</a></li>
<li><a href="#">顺丰发力跨境物流倾情服务中俄出口</a></li>
<li><a href="#">关于近期全国大范围强降雨天气提醒</a></li>
<li><a href="#">2016年7月公路运输项目采购招标公告</a></li>
<li><a href="#">2016年7月公路运输项目采购招标公告</a></li>
<li><a href="#">2016年7月公路运输项目采购招标公告</a></li>
<li><a href="#">关于杭州举办“20国集团领导人第11次</a></li>
<li><a href="#">“顺丰驱动城市速度” ——顺丰北....</a></li>
<li><a href="#">高州荔枝上市，顺丰冷链首发，荔枝新鲜</a></li>
<li><a href="#">丰速运有限公司——（系统线上招</a></li>
<li><a href="#">关于2016年顺丰燃油附加费收费机制</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="#">顺丰国际亮相香港Post Expo 2016</a></li>
<li><a href="#">关于国际快递保价服务上线的通知</a></li>
</ul>
</div>

<div class="section_content_tree"><span>活动促销</span><a href="#">+更多活动促销</a></div>

<div class="section_content_five">
<p><a href="#"><img src="http://www.sf-express.com/cn/en/.galleries/promotion/guojizhuanyun_0718_small_sc.jpg"></a></p>
<p><a href="#"><img src="http://www.sf-express.com/cn/en/.galleries/promotion/wangluozhishi_2016_07_01_small-sc.jpg"></a></p>
<p><a href="#"><img src="http://www.sf-express.com/cn/en/.galleries/promotion/2016/20160531-SFs-Cold-chain-services-small-sc.jpg"></a></p>
</div>
<div class="section_content_six">
<div>
<a>国际转运首重1KG只需1元</a>
<p class="a1">进行中</p>
<p class="a2">2016.7.1-2016.12.31</p>
<p class="a3">中国大陆适用</p>
</div>
<div>
<a>国际转运首重1KG只需1元</a>
<p class="a1">进行中</p>
<p class="a2">2016.7.1-2016.12.31</p>
<p class="a3">中国大陆适用</p>
</div>
<div>
<a>国际转运首重1KG只需1元</a>
<p class="a1">进行中</p>
<p class="a2">2016.7.1-2016.12.31</p>
<p class="a3">中国大陆适用</p>
</div>
</div>

<div class="section_content_tuiguang"><span>推广信息</span></div>

<div class="section_content_tupian"><img src="p.jpg"></div>

<div class="footer"><p></p></div>

<div class="footer_one">
<div>
<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>
</div>
<div>
<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>
<li><a href="#">汽配转运</a></li>
<li><a href="#">海购丰运</a></li>
</ul>
</div>
<div>
<ul>
<li>会员</li>
<li><a href="#">个人会员</a></li>
<li><a href="#">个人会员积分</a></li>
<li><a href="#">月结会员积分</a></li>
</ul>
</div>
<div>
<ul>
<li>联系我们</li>
<li><a href="#">客服热线</a></li>
<li><a href="#">我要合作</a></li>
<li><a href="#">采购信息</a></li>
<li><a href="#">开放平台</a></li>
</ul>
</div>
<div>
<ul>
<li>自助工具</li>
<li><a href="#">顺丰微信公众号</a></li>
<li><a href="#">速运通APP</a></li>
<li><a href="#">打客服发件工具</a></li>
</ul>
</div>
<div>
<ul>
<li>集团</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 class="footer_img"><img src="data:images 2/QR-code.png"></div>
<div class="footer_tuo">
<div>
<ul>
<li>客服专线</li>
<li style="font-size:30px;color:rgb(75,75,75)">95338</li>
<li>在线客服</li>
<li style="color:red;"><img src="footer-links-customer-service.png">  进入在线客服</li>
<li>官方微博</li>
<li><img src="data:images 2/footer-links-sina-weibo.png">  顺丰官方微博</li>
</ul>
</div>
</div>
</div>

<div class="article">
<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="#">跨境电商服务|</a></li>
<li><a href="#">采集信息|</a></li>
<li style="width:300px; float:right;margin-right:-50px;">2014顺丰速运版权所有粤ICP备08034243号</li>
</ul>
<a href="#"><img src="cnnic.png"></a>
<a href="#"><img src="security_site_1.png"></a>
<a href="#"><img src="security_site_2.png"></a>
<a href="#"><img src="newGovIcon.gif"></a>
</div>

<div class="guding">
<div class="div1">
<p class="p1"></p>
<p class="p3">关于冒充顺丰速运诈骗客服的警示公告</p>
</div >
<div class="div2">
<p class="o2"></p>
<p class="p3"><a href="#">点我，点我，点我来给我打分</a></p>
</div>
</div>
</body>
</html>

下面是CSS样式：

*{
margin:0;
padding: 0;
}
/*顺丰logo与头部信息CSS样式*/
.header{
width: 1000px;
height: 80px;
margin: 0px auto;
}
p.header_logo{
margin-top: 20px;
}
p.header_one{
width: 500px;
float: right;
margin-right: 200px;
margin-top: -30px;
}
/*选择国家和地区框*/
p.header_tuo{
border: 1px solid white;
width: 220px;
height: 20px;
line-height: 20px;
float: right;
margin-top: -30px;
font-size: 13px;
color: rgb(129,129,129);
}
.header_tuo img{
float: right;
}
.header_one a{
width: 50px;
margin-left: 10px;
font-size: 13px;
text-decoration: none;
color: rgb(182,182,182);
}
.header_one a:hover{
color: rgb(72,72,72);
}
/*导航栏部信息使用列表做的CSS样式*/
.nav{
border: 1px solid rgb(51,51,51);
width:100%;
overflow: hidden;
background-color: rgb(51,51,51);
}
.nav ul li{
border: 1px solid rgb(51,51,51);
width: 125px;
height: 45px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
float: left;
list-style-type: none;
line-height: 45px;
text-align: center;
background-color:rgb(51,51,51);
font-size: 15px;
}
.nav ul{
border: 1px solid rgb(51,51,51);
width: 1200px;
margin-left: 360px;

}
.nav ul li a{
text-decoration: none;
color:rgb(163,163,163);
}
li.li_one{
margin-left: 50px;
}
li.nav_one:hover{
background-color: white;
}
/*第二导航栏信息加图片标记CSS样式*/
.section{
border: 0.1px solid black;
width:100%;
height: 475px;
background-image: url(shupaoshengzhenzhan_Banner.jpg);
}
.section ul{
width: 980px;
height: 65px;
margin: 410px auto;

}
.section ul li{
width: 160px;
height: 65px;
float: left;
line-height: 65px;
text-align: center;
list-style-type: none;
font-size: 15px;
background-color:rgb(51,51,51);
}
.section ul li a{
text-decoration: none;
color:rgb(163,163,163);
}
.section .section_six{
background-color: rgb(123,123,123);
}
li.hover:hover{
background-color: white;
}
/*成会员与填写运单号部分*/
.section_div1 p{
width: 155px;
height: 48px;
background-color: rgb(201,31,42);
text-align: center;
line-height: 48px;
font-size: 15px;
color: white;
margin-left: 2px;
}
.section_div1 .p1{
margin-left: 170px;
margin-top: -595px;
float: left;
border-top-left-radius: 5px;
}
.section_div1 .p2{
position: absolute;
left: 326px;
top:440px;
border-top-right-radius: 5px;
}
/*单号填写部分的CSS样式*/
.section_form{
width: 312px;
height: 75px;
border-radius: 5px;
background-color: white;
}
.section_form input{
border: none;
width: 265px;
height: 40px;
background-color: rgb(232,232,232);
margin-top: 15px;
margin-left: 8px;
}
.section_form img{
vertical-align: middle;
}
.section_hao{
width: 400px;
height: 150px;
margin-left: 170px;
margin-top: -135px;
}
/*主题内容部分可以分为5块的CSS样式*/
.section_content{
width: 980px;
overflow: hidden;
margin:-20px auto;
background-image: url(background.jpg);
}
/*第一块的样式*/
.section_content_one{
width:220px;
height: 40px;
line-height: 40px;
font-size: 13px;
}
.section_content_one span{
color: red;
font-size: 15px;
}
.section_content_one a{
float: right;
text-decoration: none;
color:rgb(182,182,182);
}
.section_content_one a:hover{
text-decoration: underline;
color: rgb(72,72,72);
}
.section_content_tuo ul li{
width: 250px;
height: 10px
font-size: 13px;
list-style-type: none;
margin-top: 25px;
}
.section_content_tuo ul li a{
font-size: 13px;
color: rgb(182,182,182);
text-decoration: none;
}
.section_content_tuo ul li a:hover{
text-decoration: underline;
color: rgb(72,72,72);
}
/*第二块样式*/
.section_content_tree{
width: 715px;
height: 40px;
line-height: 40px;
font-size: 13px;
float: right;
margin-top: -780px;
}
.section_content_tree span{
color: red;
font-size: 15px;
}
.section_content_tree a{
float: right;
text-decoration: none;
color:rgb(182,182,182);
}
.section_content_tree a:hover{
text-decoration: underline;
color: rgb(72,72,72);
}
/*第三块CSS样式*/
.section_content_five p{
float: left;
margin-left: 30px;
}
.section_content_five{
width: 740px;
height: 200px;
float: right;
margin-top: -730px;
margin-right:5px;
}
.section_content_six div{
width: 215px;
height: 170px;
float: left;
font-size: 15px;
margin-left:33px;
color:rgb(72,72,72);
background-color: white;
}
.a1{
width: 60px;
height: 20px;
background-color: red;
line-height: 20px;
text-align: center;
color: white;
float: right;
margin-top: 20px;
margin-right: 5px;
}
.a2{
width: 150px;
margin-top: 100px;
margin-left: 75px;
}
.a3{
margin-left: 120px;
}
.section_content_six{
width: 750px;
height: 170px;
float: right;
margin-top: -543px;
}
/*第四块信息部分CSS样式*/
div.section_content_tuiguang{
width: 715px;
height: 40px;
line-height: 40px;
font-size: 13px;
float: right;
margin-top: -350px;
}
.section_content_tuiguang span{
color: red;
font-size: 15px;
}
/*滚动图片部分CSS样式*/
.section_content_tupian img{
float: right;
margin-right: 3px;
margin-top: -290px;
}
/*结尾部分相关信息CSS样式*/
.footer p{
width: 980px;
height: 70px;
background-image: url(oo.png);
}
/*结尾列表部分CSS样式*/
.footer_one div ul li{
list-style-type: none;
width: 100px;
margin-top: 20px;
font-size: 13px;
}
.footer_one div ul{
width: 100px;
overflow: hidden;
margin-left: 10px;
margin-top: 10px;
float: left;
}
.footer_one div ul li a{
text-decoration: none;
color: rgb(182,182,182);
}
.footer_one div ul li a:hover{
color: rgb(72,72,72);
text-decoration: underline;
}
.footer_tuo div ul li{
list-style-type: none;
width: 110px;
margin-top: 20px;
font-size: 13px;
}
.footer_tuo div ul{
width: 130px;
overflow: hidden;
margin-top: 10px;
float: right;
}
.footer_img img{
float: right;
margin-top: 135px;
}
.article{
width: 980px;
overflow: hidden;
margin: 60px auto;
}
.article ul li{
list-style-type: none;
width: 90px;
margin-top: 5px;
font-size: 13px;
float: left;
}
.article ul{
border: 2px solid rgb(227,227,227);
width: 980px;
height: 30px;
line-height: 20px;
border-right-color: white;
margin-left: -2px;
}
.article ul li a{
text-decoration: none;
color: rgb(182,182,182);
}
.article ul li a:hover{
text-decoration: underline;
color: rgb(72,72,72);
}
.article a img{
height: 45px;
}
/*两块固定的联系窗口*/
.guding .p1 img{
width: 110px;
height: 100px;
}
.guding .p1{
width: 110px;
height: 145px;
background-image: url(ww.png);
background-repeat: no-repeat;
}
.guding .p3{
width: 110px;
height: 50px;
margin-bottom: 0px;
font-size: 13px;text-align: center;
}
.guding .div1{
border: 1px solid rgb(227,227,227);
width: 110px;
height: 196px;
position: fixed;
right: 0px;
bottom: 250px;
}
p.o2{
width: 110px;
height: 145px;
background-image: url(dd.png);
background-repeat: no-repeat;
}
.guding .div2{
border: 1px solid rgb(227,227,227);
width: 110px;
height: 196px;
position: fixed;
right: 0px;
bottom:0px;
}
.guding .div2 a{
text-decoration: none;
color: rgb(182,182,182);
}
.guding .div2 a:hover{
text-decoration: underline;
color: rgb(72,72,72);
}

转载于:https://www.cnblogs.com/yzybc/p/5696854.html

顺丰官网代码（自编）相关推荐

pytorch实现：Resnet模型识别花朵数据集（参考pytorch官网代码）
pytorch实现:Resnet模型识别花朵数据集一.pytorch实现:Resnet模型识别花朵数据集 1.1 训练模型 1.2 图像预测和可视化 1.3 对新来的数据进行处理和展示一.pyto ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
MATLAB实现自编码器（六）——变分自编码器（VAE）官网代码的改进
本文内容参考了Conditional VAE (Variational Auto Encoder) 条件付きVAE 是对官方网页Train Variational Autoencoder (VAE) ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
matplotlib绘制小提琴图（官网简化版）
seaborn画小提琴图简单,但缺乏自定义能力,画出来的图实在是不好看 matplotlib默认小提琴图不符合论文规范,官网提供了符合规范的图的画法,可调整性好但是代码实在是有装逼犯的嫌疑,难懂难用 ...
如何在python官网打不开的情况下获取获取官方最新安装包
不知道有没有朋友在下载python最新安装包的时候,打不开python官网,小编我是遇见过,就像我们找东西时一样,需要的时候网站打不开,不需要了秒开,后来小编查阅各种资料,咨询了好几个大佬,终于得知了 ...
【spring】使用spring的环境配置及从官网获得配置文件所用代码的方法
环境配置 1.添加jar包 spring-beans-4.1.3.RELEASE.jar spring-context-4.1.3.RELEASE.jar spring-core-4.1.3.RELE ...
如何去除My97 DatePicker控件上右键弹出官网的链接 - 如何debug混淆过的代码
概述 http://my97.net/是一个web浏览器的日期选择控件,非常好用,做得非常棒,各种API等事件等都很方便,但是使用了4.8beta3之后,在控件上面右击会出现官网链接 ,这个是PM以及 ...
官网，一套代码如何运行多端？
前段时间,做了公司一个项目的官网,就官网布局和效果来说,都是比较简单的,唯一一点不好的就是要兼容到ie8,所以很多css3的属性并不能用,只能老老实实按常规操作来. 为了一套代码可以在pc.移动端.i ...

顺丰官网代码（自编）

顺丰官网代码（自编）相关推荐

最新文章

热门文章