html第四天网站首页的布局设计到实施

项目布局：
index.html
images
|–index.css
|–reset.css

index代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./images/index.css"></head>
<body>
<!-- 页面布局 -->
<div id="matrix"><!-- 头部区域 --><div id="header"><img src="./images/logo.jpg" alt = "" /><!-- 菜单导航 --><div id="menu"><ul><li class = "menu_li"><a href="#">首页</a></li><li class = "menu_li"><a href="#">业务介绍</a></li><li class = "menu_li"><a href="#">技术优势</a></li><li class = "menu_li"><a href="#">精品案例</a></li><li class = "menu_li"><a href="#">关于灵犀</a></li><li class = "menu_li"><a href="#">文章观点</a></li><li class = "menu_li"><a href="#">联系我们</a></li></ul></div></div><!-- 头部区域 end --><!-- 主体区域 --><div id="main"><div id = "banner"><img src="./images/about_banner.jpg" alt=""></div><!-- 主体左侧 --><div id="lside"><!-- 标题区 --><div class="subtitle"><img src="./images/circle.gif" alt="" id = "t1"><h1>核心业务</h1><h2>MORE&gt;&gt;</h2></div><!-- 标题区 end--> <!-- 左侧内容区 --><div class="l_article"><h2>电子商务类网站建设</h2><img src="./images/eshop_service.jpg" alt=""><ul><li>设计风格1</li><li>设计风格2</li><li>设计风格3</li><li>设计风格4</li><li>设计风格5</li></ul></div><div class="l_article"><h2>新闻门户类网站建设</h2><img src="./images/eshop_service.jpg" alt=""><ul><li>设计风格1</li><li>设计风格2</li><li>设计风格3</li><li>设计风格4</li><li>设计风格5</li></ul></div><div class="l_article"><h2>企业展示类网站建设</h2><img src="./images/eshop_service.jpg" alt=""><ul><li>设计风格1</li><li>设计风格2</li><li>设计风格3</li><li>设计风格4</li><li>设计风格5</li></ul></div><div class="l_article"><h2>网站维护外包</h2><img src="./images/eshop_service.jpg" alt=""><ul><li>设计风格1</li><li>设计风格2</li><li>设计风格3</li><li>设计风格4</li><li>设计风格5</li></ul></div>                  </div><!-- 主体左侧 end--><!-- 主体右侧 --><div id="rside"><!-- 标题区 --><div class="subtitle"><img src="./images/circle.gif" alt="" id = "t1"><h1>文章观点</h1><h2>MORE&gt;&gt;</h2></div><!-- 标题区 end--> <!-- 右侧上 --><div id="r_article_top"><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></div><!-- 右侧上 end--><!--右侧下 --><div id="r_article2_bottom"><!-- 标题区 --><div class="subtitle"><img src="./images/circle.gif" alt="" id = "t1"><h1>联系我们</h1><h2>MORE&gt;&gt;</h2></div><!-- 标题区 end--><div id = "address"><ul><li>电话：010-51282827</li><li>手机：l342 6060 l34</li><li>地址:中关村南大街九龙商务中心C座</li><li><img src = "./images/email.gif"><span>web@spamlionhit.com</span></li></ul></div>  </div><!--右侧下 end--></div><!-- 主体右侧 end --></div><!-- 主体区域 end--><!-- footer 区 --><div id="footer"><!-- 站内导航区 --><div id="ulink"><ul><li>常用文档下载&nbsp;&nbsp;&nbsp;&nbsp;|</li><li>支付方式&nbsp;&nbsp;&nbsp;&nbsp;|</li><li>网站地图&nbsp;&nbsp;&nbsp;&nbsp;|</li><li>合作伙伴&nbsp;&nbsp;&nbsp;&nbsp;|</li><li>友情链接&nbsp;&nbsp;&nbsp;&nbsp;|</li><li>在线咨询&nbsp;&nbsp;&nbsp;&nbsp;|</li></ul></div><!-- 站内导航区 end--><!-- 版权区域 --><div id = "copyRight">© 2006-2009 北京市灵犀慧通科技有限公司 版权所有 http://www.lionhit.com 京ICP备07020337号 <a href="#">W3C Valid CSS</a> <a href="#">W3C Valid XHTML 1.0 Strict</a></div><!-- 版权区域 end-->    </div><!-- footer 区结束 --></div></body>
</html>

reset.css代码(初始化css)：

/*css reset code *//****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:16px;
} /* for everything else *//*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;font-family: "微软雅黑";}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}img {display:block;}
address,caption,cite,code,dfn,th,var {font-weight: normal;font-style: normal;}
ol,ul {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}a {
text-decoration:none;
}

index.css代码(首页布局css):

@import url(reset.css);
#matrix{width:1002px;margin:0px auto;
}
#header{background-image: url(top_bg.jpg);background-color: #EEE;width:1002px;height:128px;
}
.menu_li{float:left;width:92px;height:37px;margin-right:2px;
}
.menu_li a {display:block;height:37px;text-align:center;font-size:16px;font-family:"微软雅黑","黑体",sans-serif;line-height: 37px;color:#363636;
}
.menu_li a:hover{background-image: url(./nav_on.gif);color:white;
}
.menu_li a:link{color:black;
}
.menu_lia:visited {color: black;
}
#banner{margin: 5px 0;
}#main{width:1002px;height: 473px;
}
#lside{background: white;float:left;width:694px;height:473px;border:1px solid #E7E7E7;   margin-bottom: 20px;
}.subtitle{background:#E7E7E7 url(index_main_top_bg.gif) repeat-x;width:auto;height: 37px;margin-bottom: 3px;
}
.subtitle img{display: inline;margin: 5px 10px 0 10px;float: left;
}
.subtitle h1{line-height: 37px;color: black;margin: 0 10 0 10px;float: left;
}.subtitle h2{line-height: 37px;color: black;float: right;
}
.l_article{width: 316px;height: 188px;margin: 10px;background-color: #E7E7E7;float: left;padding: 10px 0 0 10px;color: #A0A0A0;
}
#lside .l_article img{margin-top: 3px;float: left;display: inline;padding:5px;background: white;width: 180px;height: 145px;}
#lside li{float: left;display: inline;background: url(service_intro_bg.gif) no-repeat;padding: 0 0 8px 12px;line-height: 17px;margin: 0 0 0 6px;
}#rside{background:white;width:294px;height:473px;   float:right;
}
#rside #r_article_top{background:#E7E7E7;width:294px;height:213px;margin-top:2px;
}
#rside #r_article_top a{display: block;width:269px;height: 29px;padding: 8px 0 0 25px;color: #808080;
}
#rside #r_article_top a:hover{background:#EEE url(article_on_bg.gif) no-repeat;color:#FF832C;background: #EEE url(article_head.gif) no-repeat;
}#rside #r_article_top li{background:url(./article_head.gif) no-repeat;color:#808080;font-size: 12px;width:294px;height: 29px;display: block;font-family: "宋体";
}   #rside #r_article2_bottom{widows: 294px;height: 213px;margin-top:10px;    background:#E7E7E7;
}
#r_article2_bottom #address li{font-family: "宋体";font-size: 14px;padding: 20px 0 0 15px;
}
#r_article2_bottom #address li img{display: inline;float: left;margin-right:16px;
}
#r_article2_bottom #address span{display: block;float: left;padding:-20px 0 0 10;
}
#footer{clear: both;width:1002px;height: 120px;
}
#footer #ulink{width:1002px;height: 40px;background: #E7E7E7;}#footer #ulink li{display: inline;line-height: 40px;color:#979797;margin:0 5px 0 10px;
}
#footer #copyRight{width: 1002px;height:20px;font-size: 12px;color:#979797;;
}
#footer #copyRight a{color:#FF832C;
}
#footer #copyRight a:hover{color:#979797;
}

调试图：

html第四天网站首页的布局设计到实施相关推荐

extjs 网站首页table布局，秀一下
用extjs做首页,布局是最难的,我参考网上发挥的,看看吧.呵呵这个只是首页的中间部分,东.西.南.北都还有东西的,只是没有截图下来.(其中三个板块样式应该是一样的,这里为了显示多样化.所以用了三种 ...
【Nodejs开发】第2章网站首页的布局
请关注我的小站:http://oideas.herokuapp.com/ 1.布局之前的准备工作上一章我们已经搭建好了环境,本站就开始我们的OMinds的开发吧. 在开始之前,先让我们来装点东西,打 ...
网站首页的标志设计对网站的重要性解析
每家公司企业为什么都要设计网站标志,可以这么说网站标志是每一个公司企业的核心元素.它不仅仅代表的一家公司的形象,它还结合着公司的文化理念和领导层的精神灵魂.现在不论是国内市场还是国外市场,竞争力是无止 ...
企业网络推广浅析网站首页什么样的布局有利于优化？
网站在SEO优化的过程中,企业网络推广表示,网站首页的布局设计也在一定程度上影响着网站优化的效果,并且网站首页的设计也对用户体验感有很大的潜在影响等,网站首页的布局也是非常重要的,那么我们该如何做好网 ...
网站首页设计、风格一致、色彩搭配、版面布局的技巧
首先我们需要了解一下网站的页面组成,网站一般包括以下几部分: 首页:网站的门面,如同公司的形象,特别注重设计和规划. 框架页:网站的主要结构页面,又称次首页.内页,大型网站往往框架页即首页,如一些门户 ...
SSM团购网站（4）：网站首页及公共技术点
网站首页及公共技术点首页应该具有的功能: 首页的布局设计: 左上侧显示商品一二级分类及进入分类的链接主体区域内按分类推荐各8个商品(每行四个,分两行) 每个商品显示摘要信息,点击可进入详情页动态 ...
刚换服务器网站就被k了,网站首页被K的原因有哪些？网站首页被K多久可以恢复？...
在SEO工作中,我们经常讨论一件事,那就是网站首页是K,虽然这个问题很常见,但是因为首页是K有很多原因,曾经让SEO人员很头疼. 我们知道首页对于整个站点来说,有着非常重要的意义,当首页是K标志时,我 ...
网络推广外包——网络推广外包专员如何做好网站首页设计
一般来说用户在浏览网站过程中大多都会将视线集中在网站的头部和中间页面的位置,这也是网站建设中的重点,很少有用户会详细看网站页面的底部,但是作为一个专业的网站建设人员自然也不能忽视对网站底部的建设.那么 ...
浅析网站首页设计需注意的要点
在开展网站设计中网站首页设计十分关键,毕竟用户在浏览网站的过程中第一眼看到的就是网站的首页,这也是用户对网站的第一印象,因此,对于网站首页的设计一定要引起重视.那么我们应该怎样做好网站首页的设计方案呢 ...

html第四天网站首页的布局设计到实施

html第四天网站首页的布局设计到实施相关推荐

最新文章

热门文章