网页布局实例

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />

<title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>

<style type="text/css">
*{
    padding:0;
    margin:0;
}
/*当用户打开页面，会看到背景一片空白，然后瞬间显示背景，给用户的感觉很突兀，而我们的做法是，先加载前面那个10px宽度的小图片，这样背景加载速度快，用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白，然后等云彩背景下载完毕后，再加载在页面内，用户感觉会很舒服*/
html{
    background:url(images/bg.gif) repeat-x; 
}
body{
    background:url(images/clouds.gif) repeat-x;
    padding-top:45px;
}
#header,#banner,#content,#footer{
    width:1000px;
    margin:0 auto;
}
#header{
    overflow:hidden;
}
/*img标签是一个很特别的标签，因为它本身是内联元素，但却体现出块状元素宽高起作用的特性，这是很矛盾的地方，这就为页面布局埋下隐患，要么为内联元素，要么为块状元素，在这里我们更需要它的块状元素的属性，所以我们将身为内联元素的img标签转化为块状元素，用“display:block; ”。既然第三层的img转化为块状元素，根据W3C规范，内联元素是不能包含块状元素的，所以我们还必须把第二层的链接a，也要转化为块状元素，还是用“display:block; ”。代码中的“background:#991616;”是一个从logo图片上取下来的红色，目的和前面的设置页面背景一样，为了保证在网速比较慢的情况下，logo图片还未加载完成之时，先显示红色背景，增强用户体验！*/
#logo{
    width:220px;
    height:54px;
    float:left;    
    background:#991616;
    display:block;
}
#logo img{
    display:block;
}
#nav{
    width:780px;
    float:left;
    height:54px;
    background:#393838;
    list-style:none;
}
#nav li{
    float:left;
}
#nav li a{
    display:block;
    width:86px;
    height:54px;
    line-height: 54px;
    text-align:center;
    color:#ccc;
    text-decoration: none;
}
#nav li a:hover{
    color:#fff;
}
#nav li.navActive{
    background:url(images/navHoverBg.png) no-repeat;
}
#banner{
    display:block;
    height:292px;
    margin:10px auto;
}
#content{
    overflow:hidden;
    background:#eaeaea;
    font-size:12px;
    line-height:24px;
}
#article,.info{
    margin:10px;
    float:left;
    /*disp*/
}
#article{
    width:660px;
}
.info{
    width:300px;
}
/*以后遇到图片链接这种情况，第一反应就是先将这两块给设置成块状元素*/
#article img{
    display:block;
}
#article a{
    display:block;
}
#article h1{
    margin:20px 0;
    font-size:24px;
    font-family:"微软雅黑","黑体";
}
#article h1 a{
    text-decoration: none;
    color:#900;
}
#article h1 a:hover{
    text-decoration: underline;
}
.info dl{
    margin-bottom:10px;
}
.info dl dt{
    background:url(images/title.jpg) no-repeat;
    height:32px;
    line-height:32px;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    text-indent:20px;
}
.info dl dd{
    background:url(images/dot.gif) no-repeat 7px 10px;
    line-height:24px;
    height:24px;
    text-indent:16px;    
}
.info dl dd a{
    color:#333;
    text-decoration: none;
}
.info dl dd a:hover{
    color:#900;
    text-decoration: underline;
}
#footer{
    background:#393838;
    margin-top:10px;
    height:52px;
    color:#ccc;
    text-align:center;
    padding-top:18px;
    font-size:12px;
    line-height: 18px;
}
#footer a{
    text-decoration: none;
    color:#ccc;
}
#footer a:hover{
    text-decoration: underline;
}
</style>
</head>
<body>

<div id="header">
    
        <a  id="logo" href="http://www.w3cstudy.com">
            <img src="images/logo.png">
        </a>
    
    <ul id="nav">
        <li class="navActive"><a href="http://www.w3cstudy.com">首页</a></li>
        <li><a href="http://www.w3cstudy.com">培训课程</a></li>
        <li><a href="http://www.w3cstudy.com">优秀学员</a></li>
        <li><a href="http://www.w3cstudy.com">课程疑问</a></li>
        <li><a href="http://www.w3cstudy.com">职业生涯</a></li>
    </ul>
</div>    

<a id="banner" href="http://www.w3cstudy.com"><img src="images/banner.jpg" />
</a>
<div id="content">
    <div id="article">
        <a href=""><img src="images/articleBanner.jpg" /></a>
        <h1><a href="">Web前端开发工程师好找吗</a></h1>
        <p>据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。</p>
    </div>
    <div class="info">
        <dl>
           <dt>职业生涯</dt>
           <dd><a href="http://blog.w3cstudy.com/?p=60">Web前端开发工程师需要掌握哪些核心技能？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=51">我是程序员，有必要进行web前端开发的学习吗?</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=32">我是网站美工，目前发展遇到瓶颈，该如何解决？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=22">我适合从事web前端开发行业吗？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=15">Web前端工程师如何给自己定位？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=5">Web前端开发工程师好找工作吗？</a></dd>
        </dl>
    </div>
    <div class="info">
        <dl>
           <dt>职业生涯</dt>
           <dd><a href="http://blog.w3cstudy.com/?p=60">Web前端开发工程师需要掌握哪些核心技能？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=51">我是程序员，有必要进行web前端开发的学习吗?</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=32">我是网站美工，目前发展遇到瓶颈，该如何解决？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=22">我适合从事web前端开发行业吗？</a></dd>
           <dd><a href="http://blog.w3cstudy.com/?p=15">Web前端工程师如何给自己定位？</a></dd>
            <dd><a href="http://blog.w3cstudy.com/?p=5">Web前端开发工程师好找工作吗？</a></dd>
        </dl>
    </div>
</div>
<div id="footer">
    <a href="#">关于W3CStudy</a> | <a href="#">广告服务</a> | <a href="#">提交问题</a> | <a href="#">联系我们</a> | <a href="#">版权声明</a> | <a href="#">关于隐私</a> | <a href="#">合作伙伴</a>
    <br/>
    <a href="#">京ICP备10055601号</a>  All rights(C)2008-2010 Reserved
</div>
</div>
</body>
</html>
网页如图：
posted @ 2015-08-04 16:22 TodayCC 阅读(192) 评论(0) 收藏举报
刷新页面返回顶部
Today

网页布局实例

公告
