首页 > 代码库 > 漫谈css布局

漫谈css布局

2024-10-27 17:29:02   209人阅读

介绍

这个布局是基于一个截面图，然后把它转化为一个html页面，但是介绍的目的不是仅限于这一个特定的例子，而是可以用于所有以后的布局过程。

技术分享

在我们开始之前，需要有几点准则指导着我们，避免我们误入歧途、走火入魔，中毒太深：

  • 每次进行一步，每一步都用一组浏览器来测试开始布局踏出第一步很容易，但是半途碰到问题并不是我们所期望的。为了避免这种情况的发生， 我们每进行一步，都要用一组浏览器来进行测试。这样你就能清楚的看到布局是如何进行的，也可以避免一些问题的出现。

  • 基于现代浏览器构建，但是也要向前兼容最好基于标准兼容的浏览器构建布局，但是也要让一些老版的浏览器兼容。

  • 校验你的HTML代码和CSS时常检验你的HTML代码和CSS，这样的话很多的布局问题就能够得到解决。

这下面这两个地址会对你有所帮助： 
① WC3 HTML validator 
② WC3 CSS validator

Step1.考量一下对浏览器的支持性：

在开始设计CSS布局之前，你应该想一下你要支持的浏览器或者说支持到什么程度。客户、用户、测试日志文件等可能会对你有一定的帮助。

Step2.查看容器布局

看看你的设计，想一下主要由哪些容器组成。

技术分享

Step3.为容器命名

上面所说的容器将会是你的页面布局中放置内容的容器，所以你需要为他们起一个能够描述他们特征的名字，就像

  • container
  • header
  • mainnav
  • menu
  • contents
  • footer

如果这些容器对页面来说是唯一的，在标签代码中最后使用ID来表示，而不是class来标示。这在为其他元素来写样式的时候显得很 重要，因为当出现冲突时，用ID来标识的样式会重写用class来标识的代码。

技术分享

Step4.开始写样式和代码

首先确定文档类型，在这里我们采用HTML4.01strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ 
html4/strict.dtd">

然后是增加头信息和字符编码等,将外联样式命名为style.css

    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Page title</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"style.css" type="text/css" media="screen">>
最后，加入上面我们分析好的一些元素：
    <body>
    <div id="container">
    <div id="header" title="sitename">
    <div id="skipmenu"><a href=http://www.mamicode.com/"#content">Skip to content
>

Step6.指定样式

    body
    {
    margin: 0;
    padding: 0;
    background: #ddd;
    }
     
    #container
    {
    margin: 1em auto;
    width: 650px;
    background: #fff;
    }
     
    #header { background: #CF3; }
    #mainnav { background: #9F3; }
     
    #menu
    {
    float: right;
    width: 165px;
    background: #6F9;
    }
     
    #contents
    {
    float: left;
    width: 440px;
    background: #9FC;
    margin: 0 0 0 20px;
    }
     
    #footer
    {
    clear: both;
    background: #FF9;
    }

Step7.最后需要进行一些细化工作

漫谈css布局


联系
我们