如何改良你的CSS代码编写结构（3）
作者：ximicc 来源：CSS Beauty 发布时间：2008-09-29 16:03:00
标签：结构,代码,经验,css
搭建你的页面结构
OK，现在你可以开始设计网站的结构了。如果网站的布局草稿已经准备好，那是可以很快就完成的。不管你选择那一种布局类型，流式或固定宽度，我建议你定义一个.container 类，并让它包含具有相同的宽度的CSS标签，在这种情况下，如果你想改变页面的宽度，只需修改.container 类的宽度就可以了，它所包含的元素的宽度会自动适应：
关于HTML代码
一旦站点的主要区块已经用CSS定义完毕，你就可以开始编写HTML代码。那没有什么复杂的，只需按正确的顺序添加正确的DIV即可：
<div class="container">
<!-- Header -->
<div id="logo"></div>
<div id="navbar"></div>
<div id="welcome-section"></div>
<!-- Main Content -->
<div id="column_left">
</div>
<div id="sidebar">
</div>
<!-- Footer -->
<div id="footer"></div>
</div>
如果在浏览器上测试正常，你就可以逐步为各个区块（navigation, sidebar, footer...）添加新的具体的CSS代码，即按结构的方式完成你的CSS并整合HTML代码。缩进所有依赖于同一个类的代码：
当你不得不在你的CSS代码中寻找一个具体的标签时，这点小聪明将起到意想不到的效果。
自定义类放在最后
通常，如果有些类多个区块都会用到，那我会以这样的方式把它们添加到CSS文件的末尾：
以能很快认出其主要属性的语义名字来命名每个类。
希望这些小窍门能帮助你简化编写和管理CSS代码的方式。
0
投稿猜你喜欢
- 工欲善其事,必先利其器.python是解释型的语言,但是在windows下如果要执行程序的话还得加个python shell的话,
- 前言，在pytorch中，当服务器上的gpu被占用时，很多时候我们想先用cpu调试下代码，那么就需要进行gpu和cpu的切换。方法1：x.t
先来说一下我们学校的网站：http://jwxt.sdu.edu.cn:7777/zhxt_bks/zhxt_bks.html查询成绩需要登- 位置参数这是一个求等差数列和的函数，使用必需要传入一个参数n，这就是位置参数def sum(n): sum=0 &
- 共同点: 1.它们都是python的核心类型，是python语言自身的一部分核心类型与非核心类型 多数核心类型可通过特定语法来生成其对象，比
- 我们可以通过 asyncio.wait() 函数等待异步任务完成。可以等待不同的条件，例如所有任务完成、第一个任务完成以及第一个任务因异常而
- 1、pyecharts介绍 Echarts是一款由百度公司开发的开源数据可视化JS库，pyecharts是一款使用python调用echar
- tkinter的功能是如此强大，竟然还能做翻译软件。当然是在线的，我发现有一个quicktranslate模块，可以提供在线翻译功能，相当于
- 服务器之间的http数据传输直接使用python内置的http服务：python -m SimpleHTTPServer 8000此时，输入
- python将字符串转换成数组的方法。分享给大家供大家参考。具体实现方法如下：#------------------------------
- 对于np.argmax()让我迷惑了很久，尤其是其中的axis=1的比较结果。一、np.argmax()的理解1、最简单的例子假定现在有一个
- python全代码如下import reimport csvimport matplotlib.pyplot as pltx=[]y=[]m
- 如何用SQL 建表？ 如下：CREATE TABLE statement
- 分支结构的应用场景迄今为止，我们写的Python代码都是一条一条语句顺序执行，这种结构的代码我们称之为顺序结构。然而仅有顺序结构并不能解决所
- 默认情况下，Python 源码文件以 UTF-8 编码方式处理。在这种编码方式中，世界上大多数语言的字符都可以同时用于字符串字面值、变量或函
- Python读取及保存mat文件在说明python读取mat文件之前需要强调2点：读取的时候需要注意读出来的shape是什么样的，是否符合自
- 废话不多说了，关键代码如下所示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
- 在进行深度学习实验时，GPU 的实时状态监测十分有必要。今天详细解读一下 nvidia-smi 命令上图是服务器上 GeForce GTX
- 需求场景，五百个文件里面，选取50个指定文件，放入新的文件夹里。1、准备工作1 安装python环境可能会报错，并且pip install
- 前言selenium处理文件上传大致会有两种情况，一种是文件上传使用的是input标签元素，即<input type="fi
