<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.clear:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clear {
zoom: 1;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
/*------------------------------------------------------*/
/*包裹*/
.wrap{
width:1000px;
margin:0 auto;
}
/*头部*/
#header{
/*background:red;*/
}
.headTop{
height:85px;
width:1000px;
/*background:green;*/
}
.headTop img{
margin-top:10px;
}
.headTopNavi{
width:260px;
margin-top:32px;
margin-right:20px;
float:right;
}
.headTopNavi span{
font-size:10px;
}
.headTopNavi span a{
color:#666666;
}
.headTopNavi span a:hover{
color:red;
}
/*导航开始*/
.navi{
background:#FF6600;
height:40px;
}
.navi ul{
width:840px;
line-height:40px;
margin:0 auto;
}
.navi ul li{
float:left;
}
.navi ul li a{
display:block;
width:140px;
color:white;
text-align: center;
font-size:14px;
}
.navi ul li a:hover{
/*background:#EC4D00;*/
background:green;
}
/*正文开始*/
#main{
margin-top:20px;
}
#main .left{
font-weight:bold;
width:350px;
height:290px;
float:left;
border-top:3px solid #FF6600;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:white;
}
#main .center{
font-weight:bold;
margin-left:16px;
width:390px;
height:290px;
float:left;
border-top:3px solid #FF6600;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:white;
}
#main .right{
margin-left:16px;
width:220px;
height:130px;
float:left;
border-top:3px solid #FF6600;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:white;
}
#main .rightBottom{
margin-top:10px;
margin-left:16px;
width:220px;
height:146px;
float:left;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background:white;
}
#main .left .leftTop{
margin:10px 20px 5px 20px;
}
#main .left .more{
font-size:14px;
display:block;
float:right;
color:#DDDDDD;
font-weight:bold;
}
.leftC li{
background-image:url(images/xxp.png);
background-repeat:no-repeat;
background-position:left center;
padding-left:10px;
height:24px;
}
.leftC a{
font-size:12px;
color:#666666;
font-weight:normal;
}
.leftC .li1{
background-position:left 6px;
height:110px;
border-bottom:1px dashed #CCCCCC;
margin-top:6px;
margin-bottom:16px;
padding-bottom:12px;
}
.leftC .li1 .div1{
font-weight:normal;
font-size:12px;
margin-top:14px;
}
.leftC .div1 span{
color:#FF0000;
font-size:14px;
}
.leftC .li1 p{
margin-top:5px;
text-indent:24px;
color:#666666;
line-height:18px;
}
.div1 img{
margin-left:-10px;
float:left;
margin-right:10px;
}
#main .center .centerTop{
margin:10px 20px 20px 20px;
}
#main .center .more{
font-size:14px;
display:block;
float:right;
color:#DDDDDD;
font-weight:bold;
}
#main .centerMiddle{
margin-left:10px;
font-size:12px;
font-weight:normal;
}
#main .centerMiddle img{
float:left;
width:182px;
height:144px;
}
#main .centerMiddle span{
color:#FF0000;
font-size:14px;
}
.centerMiddle p{
margin-top:10px;
text-indent:24px;
color:#666666;
line-height:18px;
}
.centerBottom{
height:25px;
width:350px;
background-image:url(images/ccp.png);
border:1px solid #CCCCCC;
margin-top:40px;
margin-left:20px;
font-size:14px;
font-weight:normal;
line-height:25px;
}
.centerBottom a{
color:#666666;
margin-left:26px;
}
#main .right img{
width:220px;
height:130px;
}
.rightBottom .div1{
text-align:center;
color:#666666;
height:25px;
width:192px;
background-image:url(images/ccp.png);
border:1px solid #CCCCCC;
margin-top:10px;
margin-left:14px;
font-size:14px;
font-weight:normal;
line-height:25px;
}
.rightBottom .div2{
width:180px;
margin:0 auto;
font-size:14px;
margin-top:20px;
}
.rightBottom .div2 p{
line-height:20px;
}
/*底部*/
#footer{
margin-top:20px;
font-size:10px;
}
.footTop{
color:#FFFFFF;
line-height:30px;
width:100%;
height:30px;
background:#FF6600;
}
.footTop .div1{
margin-left:20px;
float:left;
}
.footTop .div2{
margin-right:20px;
float:right;
}
.footTop .div2 a{
color:#FFFFFF;
}
.footTop .div2 a:hover{
color:red;
}
.footBottom{
padding-left:25px;
color:#000000;
line-height:40px;
border-left:1px solid #CCCCCC;
width:100%;
height:40px;
background:#FFFFFF;
}
a:hover{
color:red;
}
</style>
</head>
<body bgcolor="#f0f0f0">
<div id="header">
<div class="headTop wrap">
<img src="images/logo.png" />
<div class="headTopNavi">
<img src="images/xxp.png" alt="">
<span>
<a href="#">用户登录</a> <img src="images/pxx.png">
<a href="#">用户注册</a> <img src="images/pxx.png">
<a href="#">联系我们</a> <img src="images/pxx.png">
<a href="#">服务热线</a>
</span>
</div>
</div>
<div class="navi">
<ul class="clear">
<li><a href="http://www.baidu.com">首页</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 class="wrap">
<img src="images/lunbo.png" alt="">
</div>
</div>
<div id="main" class="wrap clear">
<div class="left">
<div class="leftTop">
新闻动态<span class="more">Learn More >></span>
<hr color="#CCCCCC" size="1" style="margin-top:10px;"/>
<div class="leftC">
<ul>
<li class="li1">
<a href="#">建国60周年工程机械行业成就<span style="float:right;">2013.11.21</span></a>
<div class="div1">
<img src="images/cj.png" alt="">
<div>
<span>建国60周年工程机械行业成就</span>
<p>年工程机械行业是我国装备制造业的重要的组成部分...</p>
<span>Learn More >></span>
</div>
</div>
</li>
<li><a href="#">建国60周年工程机械行业成就<span style="float:right;">2013.11.21</span></a></li>
<li><a href="#">建国60周年工程机械行业成就<span style="float:right;">2013.11.21</span></a></li>
<li><a href="#">建国60周年工程机械行业成就<span style="float:right;">2013.11.21</span></a></li>
<li><a href="#">建国60周年工程机械行业成就<span style="float:right;">2013.11.21</span></a></li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="centerTop">
产品中心<span class="more">Learn More >></span>
<hr color="#CCCCCC" size="1" style="margin-top:10px;"/>
</div>
<div class="centerMiddle">
<img src="images/xp1.png" alt="">
<div>
<span>CE650-6 液压挖掘机</span>
<p>年工程机械行业是我国装备制造业的重要的组械行业是我国装备制造业的重械行业是我国部分年工程机械行业是业是
前端首页案例.zip （10个子文件） 
前端首页案例 images 
lunbo.png 526KB cj.png 17KB xxp.png 1006B xp1.png 16KB ccp.png 950B logo.png 6KB pxx.png 957B ppxc.png 940B
4556.gif 27KB
index.html 9KB
理想主义的化身
- 粉丝: 0
- 资源: 1
最新资源
- 基于Eclipse Paho Mqtt 的简单封装详细文档+全部资料.zip
- 基于electron-vue，mqtt，借鉴微信体验，支持windows，linux，mac三大平台详细文档+全部资料.zip
- 基于DuerOS的对话式物联网控制示例，采用了百度的物联网IoT Hub MQTT Server详细文档+全部资料.zip
- 基于esp8266 mqtt arduino IDE开发的系列IOT引用项目详细文档+全部资料.zip
- 基于ESP利用MQTT通信、IRext开源库实现万能红外遥控详细文档+全部资料.zip
- 基于golang和gin框架一个快速接入MQTT物联网设备的服务器详细文档+全部资料.zip
- 基于esp32-wifi实现mqtt手持测量仪详细文档+全部资料.zip
- 基于Flask框架使用MQTT进行消息互动详细文档+全部资料.zip
- 基于hyperf建立的mqtt服务端详细文档+全部资料.zip
- 基于Go语言的SiteWhere(物联网平台)服务搭建【+SDK ( JSON、REST、MQTT 通信 ) 】详细文档+全部资料.zip
- 基于Go语言实现：基于Eclipse Paho MQTT Go client、GIN框架实现ThingsBoard提供的MQTT、HTTP API详细文档+全部资料.zip
- 基于linux平台C++编写的高性能异步mqtt协议代理服务详细文档+全部资料.zip
- 基于Kotlin Multiplatform的跨平台socket通信统一接口，在对Kotlin有较好的支持的同时兼容在JAVA中调用。目前支持Android目标
- 基于mqtt.js针对egg封装的插件，可以在agent进程上稳定运行，开箱即用详细文档+全部资料.zip
- 基于Lora的物联网监管系统服务器， SSM+MySQL+MQTT详细文档+全部资料.zip
- 基于micropython可以触控和MQTT控制的按钮开关详细文档+全部资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0