如何使用CSS来进行网页排版

最新推荐文章于 2022-08-09 15:34:34 发布
VIP文章 最新推荐文章于 2022-08-09 15:34:34 发布
阅读量3.3k 收藏 7
点赞数 1
分类专栏： DIV+css 文章标签： css xhtml stylesheet div html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiaobo23/article/details/1266461
版权
 

第1天:选择什么样的DOCTYPE


前言

大家好！这个系列文章是按阿捷自己制作w3cn.org站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧。

第一天

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码，可以看到第一行就是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那么这些代码有什么含义？一定要放置吗？

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我们选择什么样的DOCTYPE

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。

补充

DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

更多细节可以访问W3C的网站

第2天:什么是名字空间


DOCTYPE声明好以后，接下来的代码是：

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

通常我们HTML4.0的代码只是<html>，这里的"xmlns"是什么呢？

这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理解是：

由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如：

小王和小李都定义了一个<book>标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空间是"http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆<book>标识，因为它属于不同的名字空间。

更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。

XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。

后面的lang="gb2312",指定你的文档用简体中文。

第3天:定义语言编码


第三步是定义你的语言编码，类似这样：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。

通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：

<?xml version="1.0" encoding="gb2312"?>

你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。

看本站源代码，你会发现语言编码定义的地方还多一句：

<meta http-equiv="Content-Language" content="gb2312" />

这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。

注意：在上面声明语句的最后，你看到有一个斜杠"/"，这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如<br>写成<br />、<img>写成<img />，加空格的原因是避免代码连在一起浏览器不识别。

 

第4天:调用样式表


用web标准设计网站，过渡的方法主要是采用XHTML+CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。

事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。

外部调用样式表

在以前，我们通常采用2种方法使用样式表：

页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样： <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。 <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

双表法调用样式表

查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>

为什么要写两次呢？

实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说，当你希望某些效果在netscape 4.0浏览器中隐藏，在4.0以上或其它浏览器中又显示的时候，你可以采用"@import"命令方法调用样式表。

第5天:head区的其他设置


这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。

收藏夹小图标

如果你将本站加入收藏夹&#x

最低0.47元/天 解锁文章
wangxiaobo23
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12天学会使用CSS来进行网页排版
09-05
12天学会使用CSS来进行网页排版 第一天 　开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。 　查看本站首页原代码，可以看到第一行就是： 　<!DOCTYPE ...
『循序渐进12天学习XHTML』
Tony 's Blog 只为精进而生
07-17 1999
第1天:选择什么样的DOCTYPE   前言 大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧 第一天 开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码，可以看到第一行就是：http://www.
网页的排版布局和原则
weixin_34221332的博客
11-03 654
一.网页排版布局的步骤：1.构思,并且有多个草稿进行粗略布局2.将粗略布局精细化，具体化3.修改二.网页排版布局的原则   1.平衡性　 　(1)文字、图像等要素的空间占用上分布均匀　　 (2)色彩的平衡，要给人一种协调的感觉。  2.对称性 　　对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。  3.对比性　　让不同...
网页排版与布局
likunpeng6656201的博客
10-06 8637
一 网站的层次结构 制作便于浏览页面的一个大敌就是视觉干扰,它包含两类: a,混乱页面主次不清,所有东西都引人注目 b,背景干扰 1.把页面分割成清晰明确的不同区域很重要,因为可以使用户迅速判断出哪些区域应重点看,哪些可以放心地忽略. 2.创建清晰直观的页面层次结构;越重要越要突出;逻辑相关的内容视觉上也应该相关 3.用嵌套的方式形象地显示从属关系 二 网页的布局形式 整个页面可以分为几个部分,...
DIV标签详细介绍
热门推荐
qq_37219446的博客
08-09 3万+
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。...
几种常见的网页布局
zn0128的博客
07-14 1054
两列自适应布局：一列由内容撑开，另一列撑满剩余宽度 <style> * { margin: 0; padding: 0; } .content { width: 1000px; height: 500px; background-color: lightblue; } .left { float: left; background-color: pink; }
CSS 网页布局排版实例
09-25
CSS实现的多列排版布局实例，学习div+css布局的朋友可以参考下。
网页排版 5个CSS基础
09-25
本文给大家介绍在文章的排版中经常会用到的几个CSS基础，当然，包括图文混排，是怎样做到的。 1. 首行缩进 你知道的，从小学，老师就教我们，段落的开头应该空两格。而你使用word的时候，也有首行缩进这个功能，但在...
div+css是网页排版技巧分享
09-25
以下是工作中总结的一些技巧，留下备用，希望对看到的人有用~~
CSS网页布局中文字排版九大技巧
Docter.樱花猪
09-13 2575
http://developer.51cto.com/art/201009/223355.htm   本文和大家重点讨论一下CSS网页布局中文字排版九大技巧，主要包括如何设定字体、颜色、大小、段落空白，首字下沉、首行缩进。最后讲一些常用的web页面中文排版，比如中文字的截断、固定宽度词内折行（word-wrap和word-break）等等。 CSS网页布局中文字排版九大技巧 学习web标准
CSS网页排版
weixin_33889665的博客
05-22 262
自印刷出版物诞生以来，排版就一直是平面设计的基础。 同样，排版在网页设计中也扮演着重要角色。 1.CSS的基本排版技术 1.1 文本颜色 对应网页而言，文本颜色也许是最基本的样式之一。 默认情况下，浏览器把绝大部分文本渲染为黑色。 p { color: #3b4348; } 1.2 字体族 字体族（font-family）属性的值是一个备选字体的列表，按优先级从左到右排列。 body { ...
HTML中<div>层标签的基本使用
weixin_45161161的博客
05-13 3390
（作者水平有限，不足之处请补充，谢谢） 你可能在无聊翻看某个网页源代码时会向下面图片一样看见有一大堆<div></div>标签： 那么这个玩意是啥嘞，他可以把文档分割成独立的小部分，配合class和id使用有奇效。 你可别告诉我上面这个你看不懂？！好吧，简单来说，他就是把一个大的界面分割成独立的小的界面（不严谨的说，它就相当于<body>标签里面套娃一个<body>） 额，它有着很多<body>标签的属性，你可以在<div>
第二章《进行网站设计》——ASP.Net2.0
dfuy63575的博客
01-06 151
关键字：div+css, masterPage, Theme, skin, sitemap, 布局 网站的总体布局和图片的使用，开发网站的第一步，当开始进行网站的界面设计时，一般的做法是首先使用Adobe PhotoShop或者 JascPaintShop Pro等图形工具创建一个图形模型，来展示网站的最终效果，典型的3列布局，有页头、页脚。图形模型可以分割成小块图片，把...
一招秒杀常见网页基本排版布局
cuiidoit的博客
11-29 3369
第一种HTML CSS使用div(盒子)进行基本布局 1.单列布局 网页分为上中下三个模块 ​ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网页上中下</title> </head> <style> body{ ...
在网页设计中如何排版
weixin_34363171的博客
08-13 617
可以说，排版是UI设计中最难的部分。在这篇文章中，我会教你一些实用的技巧，你可以在你的项目中使用。 一.考虑用户 我们应该记住，除了美学，我们还有用户。 你需要使用的字体要灵活。你的字体应该提供粗细不同的宽度。注意这些方面是很重要的，好的排版对读者来说是“透明”的，但坏的就会让人从显示器上“尖叫”出来。 了解什么字体是让人最易读的，整体看起来最简洁大方的，我们就应该选择什么样的字体来排版。 二....
前端HTML+CSS之网页排版（三）
qq_44790423的博客
08-06 2086
    在对HTML和CSS有了一定的了解和结构之后，我们需要知道真正在网页排版中如何设定其属性值，如何得到我们想要的字体，文本以及背景属性的设置     在正式说网页排版之前，由于我们需要在对每次代码修改之后看一下页面效果，每次自动刷新页面会比较的麻烦，所以我们有一个小技巧，在网页中 菜单栏 – 工具 – 自动刷新 – 勾选5秒 这样页面就会自动每过5秒刷新一次 一、字体属性 字体包括字体的风...
DIV+CSS基础教程笔记
sapphire7的博客
07-10 2251
缺点：1）显示样式和数据是绑定的在一起 2）布局的时候，灵活度不高 3）一个页面可能会有大量的元素，代码会冗余 4）增加带宽 5）搜索引擎不喜欢这样的布局优点：1）理解比较简单 2）不同的浏览器看到的效果一般是相同的 3）显示数据还是很好的 基本思想：数据和样式要分离 div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 ......
html div标签属性教程,前端基础之DIV标签讲解！
weixin_35952000的博客
06-05 2459
摘要：DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。DIV元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个...
div入门教程
wtt561111的专栏
01-13 1039
一目了然的让你学会div和css的混合使用方法
网页代码进行排版
最新发布
05-30
好的，以下是排版后的网页代码： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } nav { background-color: #f2f2f2; border-bottom: 1px solid #ccc; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li a { color: #333; text-decoration: none; } nav ul li a:hover { text-decoration: underline; } main { margin: 20px; } article { margin-bottom: 20px; } article h3 { margin-top: 0; } footer { background-color: #333; color: white; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>Welcome to my website!</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <h2>Recent Posts</h2> <article> <h3>Post Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae enim quis metus malesuada sagittis eu vel justo.</p> </article> <article> <h3>Another Post Title</h3> <p>Sed eget ante eu nulla tincidunt tempus. Donec quis malesuada massa.</p> </article> </main> <footer> <p>© 2021 My Website</p> </footer> </body> </html> ``` 在这个排版后的代码中，我们使用了 CSS 样式来控制网页的样式和布局。我们将所有样式都放在了 `<style>` 标签中，在样式中设置了页面的字体、页边距、背景色等。同时，我们对 `<header>`、`<nav>`、`<main>`、`<article>`、`<footer>` 等元素进行了样式设置，使它们在页面中有明显的区分和排版效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值