工业类主页基本的四大部分
- header(导航栏、logo等等)
- banner(静态图、轮播图等等)
- content(资讯、新闻等等)
- footer(版权声明等等)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice of 工业类主页</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: 微软雅黑,verdana,sans-serif;
}
#header,#banner,#content,#footer{
background: #900;
width: 1176px;
margin: 0 auto;
}
#header{
overflow: hidden;
}
#logo{
width: 222px;
height: 84px;
float: left;
}
#logo a{
display: block;
width: 222px;
height: 84px;
}
#logo a img{
display: block;
}
#nav{
width: 954px;
height: 84px;
float: left;
background: #111111;
}
#nav li{
list-style: none;
float: left;
}
#nav li a{
display: block;
padding: 0 20px;
height: 84px;
text-align: center;
line-height: 84px;
text-decoration: none;
font-size: 23px;
color: #EEEEEE;
}
#nav li a:hover{
color: #111111;
font-size: 24px;
background: #EEEEEE;
}
#nav li .active{
background: linear-gradient(to bottom,#EEEEEE,#555555);
}
#banner{
margin: 10px auto;
height: 580px;
}
#banner a ,#banner a img{
display: block;
width: 1176px;
height: 580px;
}
#content{
overflow: hidden;
background: #EAEAEA;
font-size: 12px;
line-height: 24px;
}
#content #LiftArticle h1{
margin: 20px 0;
}
h1{
font-size: 100%;
}
#content #LiftArticle h1 a{
color: #900;
text-decoration: none;
}
#content #LiftArticle h1 a:hover{
text-decoration: underline;
}
#content #LiftArticle{
float: left;
margin: 10px;
margin-right: 0px;
width: 765px;
font-size: 18px;
}
#LiftArticle #artid,#content #LiftArticle #artid img{
display: block;
width: 765px;
height: 467px;
}
#LiftArticle p{
color: #333;
text-indent: 2em;
}
#rightInfo{
float: left;
width: 381px;
height: 800px;
margin: 10px;
}
#rightInfo dl{
margin-bottom: 10px;
}
#rightInfo dl dt{
font-size: 14px;
font-weight: bold;
text-indent: 16px;
background: #900;
height: 32px;
line-height: 32px;
}
#rightInfo dl dt a{
color: #FFF;
}
#rightInfo dl dd{
height: 24px;
line-height: 24px;
color: #333;
text-indent: 3em;
background: #FFF;
font-size: 13px;
}
#rightInfo dl dd:last-child{
margin-bottom: 18px;
}
#rightInfo dl dd a{
color: #333;
text-decoration: none;
}
#rightInfo dl dd a:hover{
color: #900;
text-decoration: underline;
}
#footer{
background: #393838;
margin-top: 10px;
padding-top: 18px;
height: 52px;
line-height: 18px;
color: #ccc;
font-size: 12px;
text-align: center;
margin-bottom: 40px;
}
#footer a{
text-decoration: none;
color: #CCC;
}
#footer a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#"><img src="img/logo.jpg"></a>
</div>
<div id="nav">
<ul>
<li ><a class="active" href="#" >菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
<li><a href="#">菜单7</a></li>
</ul>
</div>
</div>
<div id="banner">
<a href="#"><img src="img\banner.jpg"></a>
</div>
<div id="content">
<div id="LiftArticle">
<a id="artid" href="#"><img src="img\a5.jpg"></a>
<h1><a href="#">文章标题</a></h1>
<p>
白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
</p>
<p>
白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
</p>
<p>
白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
</p>
<p>
白芳礼同志生于1913年5月，故于2005年9月，享年93岁。白芳礼同志祖籍河北沧县，1944年逃难到天津，解放后靠蹬三轮车成了人民服务的劳动模范，也靠两条腿扯大了自己的4个孩子，其中3个上了大学。1982年，满头白发的白芳礼开始从事个体三轮客运。1987年，已经74岁的他决定靠自己蹬三轮的收入帮助贫困的孩子实现上学的梦想。可这一蹬就是十多年，直到他将近90岁。
</p>
</div>
<div id="rightInfo">
<dl>
<div>
<dt><a href="#">标题1：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题2：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题3：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题4：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题5：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题6：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
<div>
<dt><a href="#">标题7：我不是药神</a></dt>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
<dd><a href="#">我我不是药神一本正经的扯淡</a></dd>
</div>
</dl>
</div>
</div>
<div id="footer">
<p>
<a href="#">关于我们 | </a>
<a href="#">广告服务 | </a>
<a href="#">联系我们 | </a>
<a href="#">版权声明 | </a>
<a href="#">合作对象</a>
<p>Copyright©2018 Nick All Rights Reserved.</p>
</p>
</div>
</body>
</html>