header网页设计(html网页头部设计图)

很高兴“优才网”公号用户会利用这个平台提出一些问题，此篇文章回应用户对xhtml入门的基础知识的需求而贴出，希望能够切实地帮助到用户理解此类知识。

什么是XHTML?

1. xhtml指的是可扩展超文本标记语言。

2. xhtml与html4.01几乎是相同的。

3. xhtml是更严格更纯净的html版本。

4. xhtml是以xml应用的方式定义的html。

5. xhtml是2001年1月发布的W3C推荐标准。

6. xhtml得到所有主流浏览器的支持。

网站开发之DIV+CSS

简单布局网站入门篇

这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。

这是非常基础的一篇引入性文章，采用案例的方式进行介绍，希望对你有所帮助。运行结果如下图所示：

main.html主页面代码

主要通过div进行布局，同时<h2><a></a></h2>用户设置导航条，鼠标悬停时背景颜色切换。

css/main.css代码

该部分代码主要是CSS文件，用于布局和设置主页面。

　　#bg { text-align: center; margin:0 auto; width: 80%; height: 100px; /* background-image: url("../images/bg.jpg"); */}#bt { margin:0 auto; /* 水平居中 */ margin-top: 10px; width: 80%; height: 40px; background-color: yellow;}h2 { float: left; /* 水平显示,否则竖直显示 */ margin-top: 0px; /* 置顶 */ margin-left: 10px; width: 18%; background-color: red; height: 34px; font-size: 24px; text-align: center; padding-top: 6px;}a { text-decoration: none; }a:hover { color: black;}h2:hover { background-color: #0F0;}#main { margin:0 auto; /* 水平居中 */ margin-top: 10px; width: 80%; height: 60%; background-color: #E6E6FA;}#left { float: left; margin-left: 20px; margin-top: 5px; width: 40%; height: 90%; background-color: #9ACD32;}#right { float: left; margin-left: 20px; margin-top: 5px; width: 50%; height: 90%; background-color: #BFEFFF;}#footer { margin:0 auto; /* 水平居中 */ margin-top: 10px; width: 80%; height: 50px; background-color: #8B2500;}#main2 { margin:0 auto; /* 水平居中 */ margin-top: 10px; width: 80%; height: 60%; background-color: #F00;}.xz { float: left; /* 水平显示,否则竖直显示 */ margin-top: 0px; /* 置顶 */ margin-left: 10px; width: 18%; background-color: #0F0; height: 34px; font-size: 24px; text-align: center; padding-top: 6px;}

下面讲解几个重点：

1.在<div>布局过程中，需要在CSS中设置"margin:0 auto;"，才能让它居中显示，这段代码的含义是：第一个值就是元素的上下边距0，第二个值就是左右边距。当元素的定义了width属性时，auto还能实现居中的效果。

2.在CSS中设置h2，需要添加"float: left;"，使其水平显示，不增加该句的效果：如下所示：

3.整个DIV布局代码如下所示，h2会向下移动一段距离，这时CSS中通过"margin-top: 4px;"进行微调。

4.悬停的核心代码如下所示，其中"text-decoration: none;"设置超链接无下划线，然后是悬停在超链接a和字体h2的变换效果。注意冒号(:)和hover之间不能有空格，否则效果消失。

简单补充CSS内容，更多的是希望你从课本中学习，这篇文章我以案例为主。

什么是CSS

CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。它是将样式信息与网页内容分离的一种标记性语言。

样式定义的语法

样式表项的组成

Selector{property1:value1;property2:value2;property3:value3;……}

Selector定义样式作用的对象，property为CSS属性，value为属性对应的值。

CSS直接在标记符中嵌套

HTML标记符的style属性

例如：<P style=“text-align:center” >，

其中，style属性的取值形式为“CSS属性:CSS属性值”，使用多个属性用分号分隔。

在STYLE标记符定义样式

样式定义的方式为：

Selector{property1:value1;property2:value2;property3:value3;……}

　　<HTML><HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE><STYLE>P{ font-size:24px; text-align:center }H1{ font-family:楷体_gb2312; text-align:center }</STYLE></HEAD><BODY> <H1>一代人</H1> <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY></HTML>

运行结果如下所示：

链接外部样式表文件

使用LINK标记符

样式表文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。

　　<HTML><HEAD><TITLE>链接式样式示例</TITLE><LINK rel="stylesheet" type="text/css" href="mycss.css"></HEAD><BODY> <H1>一代人</H1> <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY></HTML>

其中CSS的代码如下所示：

　　P{ font-size:12px; text-align:center }H1{ font-family:黑体; text-align:center;background-color:green }

运行结果如下所示：

文章来源：

https://www.tuicool.com/articles/MBZ7NbY

利用DIV+CSS快速布局页面

在各类智能手机和平板出现前的很长一段时间里，Web网页都是通过表格进行布局的。由于表格在视觉呈现上的直观，早期很多WYSIWYG（所见即所得）的网页设计软件通常也多使用表格。

但是这种布局方式有很大的局限性——比如，同一行或列的单元格在长度、宽度上会相互影响和制约等。如今，表格式布局早已不再流行，本文就此介绍将其“拍死在沙滩上”，目前最为广泛采用的网页布局方式——DIV + CSS。

什么是 DIV+CSS

所谓DIV+CSS，是指通过HTML“层”标签——<div></div>，辅以CSS中对该“层”宽度、排列等样式的定义，来实现网页布局的一种方式。

如果你不懂什么是CSS和HTML，可以参考前端入门篇（一）：如何把设计稿还原成真实网页。

（https://www.jianshu.com/p/a981158df5a8）

为什么要用 DIV

为什么要用 Div取代Table？一言以蔽之：灵活。

Table的格式其实是一定的——首先要有一个表格，其次表格里要有行，每一行又分为许多列(单元格)。

如果在同一行的某个单元格中，要布局放入更多内容，而左右两边的单元格不变的话，要怎么实现？

只能在单元格里再嵌套一个表格。如果嵌套层数少那还好，一旦层数多起来，绝逼要疯。

这还是不涉及修改的情况。如果某天你老板拍脑袋说，把登录模块给我从右边移到左边，你就等着加班吧。

与之相对地，用Div布局就远为灵活。首先，每一个<div></div>中都可以嵌入另外一个或几个<div></div>，子子孙孙可无穷尽也。另外，要修改某个Div的布局位置，也只需要相应的调整其CSS样式即可。

如何连接Div和CSS

但是Div所谓的灵活也并非随心所欲、胡乱排布，它也是遵守一定的排布规则的——事实上，它在排布上与Table还是有些相似的。具体来说，Table的排布方式一般如下。

而一般Div的排布方式也与之类似，只不过并没有表格<table></table>、行<tr></tr>、单元格<td></td> 这许多层级，只是单一层级的<div></div>而已。

那么问题来了，这些Div长得一毛一样啊，我怎么让浏览器知道它们是在什么位置的？这里就轮到CSS出场了。

我们通过CSS样式的定义，再在HTML的<div></div>中调用这些样式，就可以实现Div和CSS的连接。

举例来说，如果我们在CSS中声明了一个样式——.row{width:100%;}，那么在HTML中就可以注明某一或某些Div适用这一类，来调用这一样式。如下，第二层的Div就使用了row这个样式。

将页面等分成12栏

分栏布局是使用Div+CSS布局网页的一种主要布局方式，主要通过把页面等分成12栏来实现。为什么要分成12栏？话说网页被分成12栏也太恐怖了吧，在小点的屏幕上每一栏大概只有两个手指宽吧？啊喂，会引发密集恐惧症的吧？

等等，你先别急，先来想想一般你看到的网站都会分成几栏？一栏？有的。两栏？也有。三栏？这个好像还比较常见。四栏？这个也比较常见。栏数再加下去也不是没有，但是就像之前说的，恐怕要引发密恐了。

那么这几个数字和12有什么关系呢？很简单，都能整除12。所以说，把页面分成12栏的好处就是——能利用合并栏来将页面等分成2、3、4 栏，如下图。

而在利用这个12 column grid以后，在使用CSS布局上也会有非常大的好处。具体是什么好处呢？我们来直接看代码的实例吧。首先我们在CSS中，定义如下样式。

　　.row { width:100%; display:flex; /* 这是为了让同一 row 中的 Div 横向排列而不是默认的纵向 */}.col-1 { width: 8.33%;}.col-2 { width: 16.67%;}.col-3 { width: 25%;}/* 继续 col-4,col-5 一直定义下去直到 col-12，具体省略 */.col-12 { width:100%;}

有了这些不同宽度的column样式定义，我们就可以开始自由地排列页面中的Div啦，举例来说，假设下边图中的黑框就是我们网页中要布局的层，那我们就可以用其下的代码来实现。

怎么样，很简单吧？

header网页设计(html网页头部设计图),header网页设计(html网页头部设计图),header网页设计,信息,文章,浏览器,第1张