html实战
主要html源码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>谢斌实战</title> <link rel="stylesheet" type="text/css" href="image/reset.css"> <link rel="stylesheet" type="text/css" href="image/header.css"> <style type="text/css"> </style> </head> <body> <div id="container"> <div id="header"> <img src="image/logo.jpg" alt="" id="logo"> <ul id="nav"> <li><a 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> <img src="image/about_banner.jpg" id="banner"> <div id="main"> <div id="lside"> <div class="subtitle"> <img src="image/circle.gif" alt="triangle"> <h1>核心业务</h1> <a href="#">MORE</a> </div> <div class="four"> <h2>电子商户类网站建设</h2> <img src="image/eshop_service.jpg"> <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> </ul> </div> <div class="four"> <h2>电子商户类网站建设</h2> <img src="image/eshop_service.jpg"> <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> </ul> </div> <div class="four"> <h2>电子商户类网站建设</h2> <img src="image/eshop_service.jpg"> <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> </ul> </div> <div class="four"> <h2>电子商户类网站建设</h2> <img src="image/eshop_service.jpg"> <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> </ul> </div> </div> <div id="rside"> <div class="subtitle"> <img src="image/circle.gif" alt="triangle"> <h1>文章观点</h1> <a href="#">MORE</a> </div> <ul id="art"> <li><a 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> </ul> <div class="subtitle"> <img src="image/circle.gif" alt="triangle"> <h1>联系我们</h1> <a href="#">MORE</a> </div> <div id="contact"></div> </div> <div class="clr"></div> </div> <div id="footer"> <ul> <li><a 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> <address>©:2006-2018 福建福州市国通星驿科技网络有限公司 copyright http://www.xiebin.com</address> </div> </div> </body> </html>
主要cSS：
.clr {
clear:both;
width:0px;
height: 0px;
}
#container{
margin:0 auto;
width:1002px;
}
#header{
height:128px;
background: gray url(top_bg.jpg);
background-repeat:no-repeat;
}
#nav li {
width:90px;
margin-right: 1px;
float:left;
}
#nav a {
font-size:16px;
line-height: 37px;
font-family:'微软雅黑';
color:#363636;
display:block;
width:90px;
height:37px;
text-align:center;
}
#nav a:hover{
color:white;
background: url(nav_on.gif);
}
#banner{
margin: 6px 0;
}
#main{
}
#lside{
height:482px;
width:694px;
border: 1px solid #EEE;
border-top:none;
/*background:blue;*/
float:left;
}
.subtitle{
height:37px;
background:gray url(index_main_top_bg.gif);
}
.subtitle img{
margin:5px 0px 0px 10px;
float: left;
}
.subtitle h1{
float:left;
margin-left:10px;
font-size:16px;
line-height: 37px;
font-family:'Microsoft Yahei',SimHei;
}
.subtitle a{
font-size:12px;
line-height: 37px;
color:gray;
float:right;
}
.four{
width:326px;
height:200px;
background:#EEEEEE;
margin:10px;
float:left;
}
.four img{
float:left;
margin-left:10px;
padding:6px;
background:white;
}
.four ul{
float:left;
margin-left:10px;
}
.four li{
background: url(service_intro_bg.gif) no-repeat;
padding-left:10px;
height:20px;
}
.four a{
color:gray;
}
.four a:visited{
color:gray;
}
.four a:hover{
color:orange;
}
.four h2{
margin:6px 0px 6px 10px;
font-size:16px;
font-family:'Microsoft Yahei',SimHei;
}
#rside{
height:482px;
width:294px;
float:right;
}
#art{
background:#EEE;
margin-top:1px;
padding-top:10px;
}
#art a{
display: block;
line-height: 29px;
height:29px;
/*padding-top:5px;*/
padding-left: 30px;
background: url(article_head.gif) no-repeat;
}
#art a:hover{
background: url(article_on_bg.gif);
}
#contact {
height:227px;
background: #EEE;
margin-top:1px;
}
#footer{
height:120px;
margin-top:15px
}
#footer ul{
height:40px;
padding-top:15px;
background:#EEE;
}
#footer li{
float:left;
padding-right:20px;
}
#footer address{
font-family:'微软雅黑',sans-serif;
}
转为收藏，供自己学习
