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>[email protected]</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;
}

调试图:

时间: 2024-10-17 10:08:22

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

一个优秀的网站首页是如何设计的?

网站首页是用户进入你网站看到的第一面,如果这第一面给用户的印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高,但是往往就是因为网站首页设计的不够好.不够精致.不够吸引,从而导致了网站转化率不高.网站首页的设计不但在网站建设过程中很重要,在网站优化中也起到了关键作用.那么一个优质的网站首页该怎么样设计呢?一个震撼的网站首页用什么设计呢? 网站首页无论是放在网站设计,还是网站建设和网站优化中都是首要针对的步骤.不管是企业网站.个人网站,

如何布局网站首页

如何布局网站首页良好的页面布局及代码优化对用户体验和搜索引擎友好度有很好的促进作用.在设计网站首页应该注意以下几点:一.主导航覆盖的信息要全面导航是一个网站的重点,相当于文章的核心,跟标题作用差不多.方便用户快速了解网站大概信息.二.左侧分出二级导航二级导航是对主导航的进一步补充和说明,因为很多时候主导航想表达的信息不一定完善,这个时候就需要二级导航来进行补充.有效的提高用户体验.三.文字图片共存不管单一是图片还是文字.感觉都缺乏说服力.所以就需要图文并茂.这样更能向用户成功推荐一个产品.四.首

网站首页之早期布局

网站首页之早期布局方法,虽然现在基本不用了,但是我感觉还是应该知道的,说你不定哪一年的哪一天这种布局格式又火了.不排除这种可能,就像十年之前非常流行的喇叭裤一样,说不定十年之后这种网站布局方式又火了呢?,至少值得收藏.当然,后期还会给出目前计算机行业比较流行的网站布局方式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS的解析差异,需对其进行测试 不同浏览器的区别[http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html] 1.IE和FF居中不一样 text-align:center  #包中所有文本居中 2.IE指定的最小高度为18px,FF都可以

HTML&amp;CSS——使用DIV和CSS完成网站首页重构

1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内联元素(显示一行).它单独使用没有任何意义,必须结合CSS 来使用.它主要用于对括起来的内容进行样式的修饰. 2.CSS 的作用 HTML:它是整个网站的骨架. CSS:它是对整个网站骨架的内容进行美化(修饰). 3.CSS 如何使用 语法和规范 选择器{   属性名 1:属性值 1;     属性

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而

移动平台3G手机网站前端开发布局技巧

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的 惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是

移动平台3G手机网站前端开发布局技巧汇总

移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程

利用Columnal网格系统快速搭建网站的基本布局结构

1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); (3)Less Framework(http://lessframework.com); (4)1140 CSS Grid(http://cssgrid.net); (5)Columnal(http://www.columnal.com) 2.本节主要讲Columnal网格系统并介绍如何利用它快速搭