网页-投联网
入门第15天记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>投联网</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
min-width: 1300px;
}
.header{
width: 100%;
}
.navbox{
width: 100%;
background:#305065;
padding-top: 15px;
padding-bottom: 15px;
}
.navbox1{
width: 1200px;
margin: 0px auto;
}
.navbox2{
width: 800px;
display: inline-block;
padding-top: 15px;
padding-bottom: 15px;
}
.nav{
color: white;
text-decoration: none;
margin-right:15px ;
}
.nav:hover{
color: dodgerblue;
}
.icon{
margin-right:130px ;
margin-left: 15px;
display: inline-block;
vertical-align: top;
}
.submit{
width: 90px;
border-radius: 5px;
display: inline-block;
background:#DB6968;
padding: 10px;
}
.submit1{
border-right: 2px white solid;
padding-right: 5px;
margin-left: 15px;
}
input{
background:#DB6968;
color: white;
border: 0px;
font-weight: bold;
}
.banner1{
width: 100%;
}
.banner2{
text-align:center;
}
.s1{
color: gray;
padding: 15px;
text-decoration: none;
margin-right: 50px;
border-radius: 8px;
}
.s1:hover{
color: white;
background: deepskyblue;
}
.service{
width: 1200px;
margin: 20px auto 30px auto;
}
.guild{
width: 1200px;
margin: 0px auto;
}
.guild1{
width: 255px;
display: inline-block;
margin:7px;
padding:10px ;
border: 2px transparent solid;
line-height: 30px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
}
.guild1:hover{
border: 2px deepskyblue solid;
}
.a1{
color:#666666;
text-decoration: none;
}
.guildp{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: bold;
}
.a1:hover{
color: red;
}
.friendlink{
width: 1200px;
height: 100px;
margin: 30px auto;
padding-left: 20px;
line-height: 30px;
word-break: keep-all;
}
.a2{
font-size: 14px;
margin-right: 20px;
}
.f{
width:100% ;
height: 5px;
}
.f1{
width: 20%;
height: 5px;
background:#DB6968;
float:left;
}
.f2{
background:#0FA8E4;
}
.f3{
background:#23C3A9;
}
.f4{
background:#5095E2;
}
.f5{
background:#3B6480;
}
ul{
list-style: none;
}
.ul1{
display: inline-block;
margin-right: 250px;
}
.ul2{
color: white;
font-size: 10px;
line-height: 30px;
display: inline-block;
border-left: 1px white solid;
padding-left: 100px;
margin-left: -150px;
}
.footer{
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
background:#1F2932;
}
.footerbox{
width: 1200px;
margin: 0px auto;
}
.footera{
font-size: 20px;
color: deepskyblue;
text-decoration: none;
line-height: 60px;
}
.footera1{
font-size: 15px;
color: white;
text-decoration: none;
line-height: 30px;
}
</style>
</head>
<body>
<div class="header">
<div class="navbox">
<div class="navbox1">
<div class="icon">
<img src="img/logo.png"/ >
<img src="img/toulian.png"/>
</div>
<div class="navbox2">
<a href="" class="nav">首页</a>
<a href="" class="nav">商用物业</a>
<a href="" class="nav">企业选址</a>
<a href="" class="nav">政府招商</a>
<a href="" class="nav">园区招商</a>
<a href="" class="nav">企业招商</a>
<a href="" class="nav">商会协会</a>
<a href="" class="nav">投联服务</a>
<a href="" class="nav">投联活动</a>
</div>
<div class="submit">
<input type="submit" name="" id="" value="登录" class="submit1"/>
<input type="submit" name="" id="" value="注册" />
</div>
</div>
</div>
<img src="img/logo_bg.png" class="banner1"/>
<div class="banner2">
<img src="img/bg.png" />
</div>
<div class="service">
<a href="" class="s1">北京市昌平区街乡办专区</a>
<a href="" class="s1">北京市昌平区街乡办专区</a>
<a href="" class="s1">北京市昌平区街乡办专区</a>
</div>
<div class="guild">
<div class="guild1">
<img src="img/show1.png"/>
<p class="guildp">昌平区城北街道</p>
<img src="img/icon1.png"/>
<a href="" class="a1">昌平区东关十字路口东北侧</a>
</div>
<div class="guild1">
<img src="img/show1.png"/>
<p class="guildp">昌平区城北街道</p>
<img src="img/icon1.png"/>
<a href="" class="a1">昌平区东关十字路口东北侧</a>
</div>
<div class="guild1">
<img src="img/show1.png"/>
<p class="guildp">昌平区城北街道</p>
<img src="img/icon1.png"/>
<a href="" class="a1">昌平区东关十字路口东北侧</a>
</div>
<div class="guild1">
<img src="img/show1.png"/>
<p class="guildp">昌平区城北街道</p>
<img src="img/icon1.png"/>
<a href="" class="a1">昌平区东关十字路口东北侧</a>
</div>
</div>
<div class="friendlink">
<span>
<a href="" class="a2 a1">拱辰街道</a>
<a href="" class="a2 a1">城关街道</a>
<a href="" class="a2 a1">西湖街道</a>
<a href="" class="a2 a1">石楼镇</a>
<a href="" class="a2 a1">十渡镇</a>
<a href="" class="a2 a1">窦店镇</a>
<a href="" class="a2 a1">阎村镇</a>
<a href="" class="a2 a1">河北镇</a>
<a href="" class="a2 a1">张坊镇</a>
<a href="" class="a2 a1">长沟镇</a>
<a href="" class="a2 a1">周口店镇</a>
<a href="" class="a2 a1">大石窝镇</a>
<a href="" class="a2 a1">韩村河镇</a>
<a href="" class="a2 a1">南窑镇</a>
<a href="" class="a2 a1">蒲洼镇</a>
<a href="" class="a2 a1">佛子庄镇</a>
<a href="" class="a2 a1">史家营乡</a>
<a href="" class="a2 a1">霞云岭乡</a>
<a href="" class="a2 a1">大安山乡</a>
<a href="" class="a2 a1">北京高端制造业基地</a>
<a href="" class="a2 a1">北京房山中央休闲购物区（CSD）长阳核心区</a>
<a href="" class="a2 a1">中国房山世界地质公园</a>
<a href="" class="a2 a1">中国被禁农业生态谷</a>
<a href="" class="a2 a1">房山区红酒中心</a>
<a href="" class="a2 a1">房山历史文化旅游集聚区</a>
<a href="" class="a2 a1">北京西南良乡物流基地</a>
<a href="" class="a2 a1">北京良乡经济开发区</a>
</span>
</div>
<div class="f">
<div class="f1"></div>
<div class="f2 f1"></div>
<div class="f3 f1"></div>
<div class="f4 f1"></div>
<div class="f5 f1"></div>
</div>
<div class="footer">
<div class="footerbox">
<ul class="ul1">
<li><a href="" class="footera">关于投联网</a></li>
<li><a href="" class="footera1">投联网简介</a></li>
<li><a href="" class="footera1">联系我们</a></li>
<li><a href="" class="footera1">职位招聘</a></li>
<li><a href="" class="footera1">用户协议</a></li>
<li><a href="" class="footera1">隐私保护</a></li>
</ul>
<ul class="ul1">
<li><a href="" class="footera">微信订阅</a></li>
<li><a href="" class="footera">联系我们</a>
<img src="img/wx.png"/>
</li>
<li><a href="" class="footera1">电话：010-61820546</a></li>
<li><a href="" class="footera1">传真：010-61820545</a></li>
<li><a href="" class="footera1">Email：[email protected]</a></li>
</ul>
<ul class="ul2">
<li>京ICP备1401419号</li>
<li>京公网安备11010902000246</li>
<li>版权所有©2015 toulianwang.com传世投联（北京）科技有限公司</li>
</ul>
</div>
</div>
</body>
</html>
总体过关
类选择器方面没有写好，取得有些乱。
算是给自己留段回忆。 O(∩_∩)O哈哈~
成果图：
一
二
三
素材图
一
二
三
四
五
六
