学习完全掌握纯CSS布局网页
发布时间：2008-05-28 17:14:00
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样：
<div id="header"></div>
<div id="content"></div>
<div id="globalnav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="shop"></div>
<div id="footer"></div>
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
0
投稿猜你喜欢
- 最近有在使用屏幕录制软件录制桌面，在用的过程中突发奇想，使用python能不能做屏幕录制工具，也锻炼下自己的动手能力。接下准备写使用pyth
CAS算法（compare and swap）CAS算法涉及到三个操作数需要读写的内存值V进行比较的值A拟写入的新值B当且仅当 V 的值等于- <％'***********************************************'函数
- 配置日志在Django中，可以通过logging模块来记录日志。日志记录器是将日志消息传递给日志处理器的对象。当需要记录日志时，可以使用以下
- 生活中几乎没有什么保证：死亡、税收和需要处理字符串的程序员。字符串可以有多种形式。它们可以是非结构化文本、用户名、产品描述、数据库列名称，或
- 请问，如何在ACCESS数据库和SQL SERVER数据库中查询？
- orm查询优化1）only与referonly方法返回的是一个queryset对象，本质就是列表套数据对象该对象内只含有only括号所指定的
- <html> <head> <script type="text/javascript"&
- 1、方法说明import cv2 as cvimg1 =cv.imread(filename[, flags])参数说明filename图片
- 本文介绍了随机提取N条记录的例子，通过Sql server与access数据库的代码比较让你更快的掌握。随机提取10条记录的例子：Sql s
- 没什么实际用途，纯属消遣Quick Click<html><head><title>Quick_Clic
- Models内容from django.db import modelsfrom django import forms# Create y
- 最近，就“尊重”一词，个人小有感概。也许跟我说“尊重”一词的同事并不是这么想的，但我反思了一下自己，作为一名设计师，确实存在这些疑问（不足之
- 有时表或结果集包含重复的记录。有时它是允许的，但有时它需要停止重复的记录。有时它需要识别重复的记录从表中删除。本章将介绍如何防止发生在一个表
- 一、什么是组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。二、组件用法
- GO1.7之后，新增了context.Context这个package，实现goroutine的管理。Context基本的用法参考GOLAN
- 驱动树莓派gpio的中间层库函数有wiringPi，BCM2835，以及PRi.GPIO，这里我选择使用Python语言开发的PRi.GPI
- 用关键字 in 和not in 来 如下：qwe =[1,2,3,4,5] if 2 in qwe: print ‘good!' e
- 前言SQLite是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。它是一个零配置的数据库，这意味着与其
- 这是一个简易的员工管理系统，实现最简单的功能：1.登录用户密码验证（错误三次自动退出） 2.支持文本员工的搜索、添加、删除、修改 3.一级层
