• 常用的DIV+CSS网站布局的基本框架结构-完整版


    这个模板是左右两列布局模板,不再是最基础的搭建框架,更多的块结构也做出来了,如果符合这种结构的可以直接拿来使用(我做的网站大部分都是这种结构的,嘿嘿^_^)。在IE和FF下测试没变形,但没测试W3C认证,估计还通不过(个别兼容的样式通不过)。

    HTML页面结构代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>常用的DIV+CSS网站布局的基本框架结构-完整版</title>
    <link href="/css/layout.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <div id="header">
    <h1>头部</h1>
    </div>
    <div class="clearfloat"></div>
    <div id="nav">
    <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>
    </ul>
    </div>
    <div id="mainContent">
    <div id="main">
    <div class="mainbox">
    <h2>块标题</h2>
    <ul>块内容</ul>
    </div>
    </div>
    <div id="side">
    <div class="sidebox">
    <h4>块标题</h4>
    <ul>块内容</ul>
    </div>
    </div>
    </div>
    <div class="clearfloat"></div>
    <div id="footer">
    底部
    </div>
    </div>
    </body>
    </html>

    CSS样式表layout.css代码:

    @charset "utf-8";
    /* CSS Document */

    @import url("/css/global.css");

    /*body*/
    #container {margin:0 auto; 950px;}

    /*header*/
    #header { height:50px; background:#ff911a;}
    #header h1 { padding:10px 20px;}
    #nav { background:#FF6600; height:24px; margin-bottom:6px;}
    #nav ul li { float:left;}
    #nav ul li a { display:block; padding:4px 10px 2px 10px; color:#fff; text-decoration:none;}
    #nav ul li a:hover { text-decoration:underline;}

    /*main*/
    #mainContent { overflow:auto; zoom:1; margin-bottom:6px;}
    #side { 200px; float:left;}
    .sidebox { border:1px solid #ed6400; margin-bottom:6px;}
    .sidebox h4 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
    .sidebox ul { padding:4px 6px;}
    #main{ 742px; float:right;}
    .mainbox { border:1px solid #ed6400; margin-bottom:6px;}
    .mainbox h2 { background:#ff911a; padding:2px 6px; border-bottom:1px solid #ed6400; color:#fff;}
    .mainbox ul { padding:4px 6px;}

    /*footer*/
    #footer { border-top:3px solid #ccc; height:50px; text-align:center; padding:6px;}

    被包含的CSS样式表global.css代码(把用于全局的样式单独放在一个样式表中,避免重复,方便调用):

    @charset "utf-8";
    body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
    ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
    h1 { font-size:20px; font-family:'microsoft yahei';}
    h2 { font-size:14px;}
    h3 { font-size:14px; font-weight:normal;}
    h4 { font-size:12px;}
    h5 { font-size:12px; font-weight:normal;}
    ul { list-style:none;}
    img { border:0px;}
    a { color:#195cb5; text-decoration:none;}
    a:hover { color:#f00;}

    .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

  • 相关阅读:
    Vue组件别名及Ctrl跳转组件问题
    Scrapy Item Loaders
    scrapy Selector
    NSSM 注册windows服务
    windows 删除注册的服务
    RedisDesktopManager软件窗口不显示
    hexo + Matery主题 + Nginx + 阿里云 搭建个人博客网站
    sublime text3 安装插件
    关于 Windows 10 时间更新
    动画 | 什么是堆排序?
  • 原文地址:https://www.cnblogs.com/hnyei/p/2211139.html
Copyright © 2020-2023  润新知