web前端Html+css课程笔记，HTML5从入门到精通-布局方案与整页制作

时间：2023-07-26 14:36:02 | 来源：网站运营

时间：2023-07-26 14:36:02 来源：网站运营

web前端Html+css课程笔记，HTML5从入门到精通-布局方案与整页制作：白嫖上岸的我，分享一下web前端Html和css课程学习时的笔记， 如果你需要这门课的所有资料，我也是有的，如果需要可以评论区留言或者私信我，看到就发你们，免费。整理分享不容易，关注我啊～首先，来一张学习HTML5从入门到精通-布局方案与整页制作内容的学习路线图




CSS布局

阅读刊物时可以发现，虽然刊物中的内容很多，但经过合理的排版，版面将会变得清晰、易读。同理在制作网页时，如果想要使网页结构清晰，也需要通过CSS布局对网页进行整理。本节将对常用的几种CSS布局进行详细讲解。

固定布局

固定布局是利用容器宽为固定值的方式来实现。固定布局是最简单的布局方案，可以分为一列布局、二列布局、三列或多列布局等。

1. 固定一列布局

固定一列布局，即一行只显示一列的布局方式，容器宽度值为固定值。

2. 固定二列布局

固定二列布局，即一行显示两列的布局方式，两列容器宽度值都为固定值，左右排列需要设置浮动属性。

3. 固定三列布局

固定三列布局，即一行显示三列的布局方式，三列宽度值都为固定值，左、中、右排列需要设置浮动属性。

自适应布局

自适应布局是利用容器宽为百分比或auto的方式来实现，是网页中比较常见的布局方式。也可以分为一列布局、二列布局、三列或多列布局等。

1. 自适应一列布局

自适应一列布局通过给容器元素设置宽度值为百分比或auto的方式来实现。

2. 自适应二列布局

自适应二列布局可以通过两列都自适应和一列自适应一列固定两种布局方式实现，接下来分别介绍这两种实现自适应两列布局的方式。

（1）首先介绍二列都自适应的布局方式。

（2）下面介绍一列固定一列自适应的布局方式。

通过给固定列进行浮动处理，使固定列脱离文档流，自适应列位于固定列的右方。然后给自适应列设置margin-left值为固定列的宽度值，这样就可以达到一列固定一列自适应且左右排列展示的布局效果。

除了通过浮动的方式可以脱离文档流外，还可以利用绝对定位的方式来实现同样的布局方式，修改上例代码即可，示例代码如下。

3. 自适应三列布局

自适应三列布局方案与两个布局方案类似，但要注意让固定的列一定要书写在HTML结构的最后，这样才能利用脱离文档流的形式来实现。

混合布局

混合布局是把不同的布局方案结合到一起，来适应复杂的布局需求。具体分为如下两类。

1. 固定与自适应混合

固定与自适应混合布局是很常见的组合方式，如千锋官网的头部效果，如图所示。

图中可以看到内容区域是固定展示的，而周围的背景色是自适应展示，这种方式就是固定与自适应混合的布局方式。

例中通过嵌套标签的方式来实现固定与自适应布局混合，父容器采用自适应布局，子容器采用固定布局，即可达到混合的目的。

2. 不同列混合

不同列混合指的是在多行展示中，每一行所展现的列数可能是不相同的，如优酷官网的主体效果，如图所示。

图优酷官网主体效果

可以看到图中，每一行的列数都不相同，且排列也没太多规则，这里需要对每一行进行单独的布局设置。

混合布局

整页制作

学习了常见的布局方案，将讲解开发一个整页的布局，从规划到制作的整页制作设计图。如图所示。

结构划分与公共样式

首先确定整页的结构该如何划分，这样有利于后期分段进行处理，大概可划分为头部、导航、广告、列表、信息、尾部等模块。

然后提取整页中公共部分的样式，这样做的好处是可以复用样式代码，节省代码量，提高性能。如网页中清除浮动的.clear样式就是公共样式，同样CSS reset部分也是属于公共部分的样式。

结构划分和公共样式都确定好后，可以先通过注释的方式，把区域确定出来，方便后续操作。示例代码如下。

网页模块命名规范

网页模块的命名，如果没有统一的命名规范对其进行必要的约束（自由地命名），会使后续工作难以进行。因此，命名规范很重要，读者应予以重视。通常网页模块的命名需要遵循以下三个原则：

l 命名避免使用中文字符（如id=”内容”）。

l 命名不能以数字开头（如id=”1header”）。

l 命名不能使用关键字（如id=”div”）。

命名应尽量用最少的字母表达含义，使之简明、易懂。

在网页开发中，常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。

l 驼峰式命名：除第一个单词后面的单词首字母都要大写，其余小写，如navOne。

l 帕斯卡命名：每个单词之间用“_”连接，如nav_one。

下面列举网页中常用的一些命名。具体如表所示。

表 常用命名

模块	命名	模块	命名
头部	header	标签页	tab
内容	content/container	文章列表	list
尾部	footer	提示信息	msg
导航	nav	小技巧	tips
子导航	subnav	栏目标题	title
侧栏	sidebar	加入	joinus
栏目	column	指南	guild
左右中	left right center	服务	service
登录条	loginbar	注册	regsiter
标志	logo	状态	status
广告	banner	投票	vote
页面主体	main	合作伙伴	partner
热点	hot	CSS文件	命名
新闻	news	主要的	master.css
下载	download	模块	module.css
菜单	menu	基本共用	base.css
子菜单	submenu	布局，版面	layout.css
搜索	search	主题	themes.css
友情链接	frIEndlink	专栏	columns.css
页眉	header	文字	font.css
页脚	footer	表单	forms.css
版权	copyright	补丁	mend.css
滚动	scroll	打印	print.css

头部制作

头部采用固定布局方案，通过Photoshop工具可测量出容器大小为950px。头部包含logo和菜单两部分，其HTML结构实现，示例代码如下。

logo的位置可以通过盒子模型的margin值来控制。菜单的父容器采用右浮动，菜单子项采用左浮动，这样菜单可以采用整体靠右的形式进行排序。菜单项的文字与图标之间的空隙可以通过盒子模型的padding属性来调整。

导航制作

导航部分采用混合布局方式，里面的内容是固定布局，父容器是自适应布局。导航分为左边的主导航、右侧的分享导航和下方的子导航。其实现HTML结构。

主导航整体左浮动，分享导航整体右浮动。这里要注意，主导航有个选中的状态，需要添加一个单独的样式，即active样式。具体代码如下。

整页制作

广告制作

广告主要以图片展示为主，HTML+CSS结构都比较简单，属于一列布局方式，具体代码如下。

展示效果如图所示。

列表制作

列表属于三列固定布局，采用浮动+固定宽的方式来实现。根据不同的展现内容，采用合理的语义化标签展示。其实现HTML结构，代码示例如下。

代码中用到一个CSS3中操作子项的方法，即nth-of-type，这个可以针对一组元素进行不同样式的操作，此操作会在CSS3章节中进行详细讲解，这里暂时先使用一下。

信息制作

消息区域采用两列固定布局来实现。一列靠左，一列靠右，这里HTML+CSS比较简单。

尾部制作

尾部部分与导航部分类似，同样采用混合布局方式，即内容区域采用固定布局，父容器采用自适应布局。

浏览器兼容性

由于某些因素，不同的浏览器不能完全地采用统一的Web标准，或者说不同的浏览器对于同一个网页有不同的解析。因此会导致同一个网页在不同的浏览器下显示效果可能不同。为了保证页面的统一，往往需要对网页进行浏览器兼容问题的调试。本节将以谷歌、IE两个浏览器为例，对浏览器兼容性问题的调试方法进行详细讲解。

CSS Hack

解决浏览器的兼容性问题，通常需要通过CSS样式来调试，最常用的是CSS Hack。CSS Hack是为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。CSS Hack主要分为CSS选择器Hack和CSS属性Hack两类，下面将详细介绍这两类CSS Hack。

1. CSS选择器Hack

CSS选择器Hack是通过在CSS选择器前，加上只有特定浏览器才能识别的Hack前缀，从而控制不同的CSS样式。针对不同版本的浏览器，选择器Hack分为以下两类：

（1）IE6及IE6以下版本的浏览器可以识别的选择器Hack

编写CSS样式代码时，如果想要此样式只是针对IE6及IE6以下版本的浏览器生效，可以使用IE6及以下版本的选择器Hack，其语法格式如下。

*html 选择器{样式代码}

在Chrome和IE6浏览器中的运行结果分别如图所示。

（2）只有IE7浏览器可以识别的选择器Hack

编写CSS样式代码时，如果此样式只是针对IE7浏览器生效，可以使用只有IE7识别的选择器Hack，其语法格式如下。

*+html 选择器{样式代码}

2. CSS属性Hack

CSS属性Hack是通过在CSS属性名前加上只有特定浏览器才能识别的Hack前缀，如“_size：300px”中的Hack前缀“_”只对IE6浏览器生效。下面介绍针对不同版本的浏览器，CSS属性Hack中的两类：

（1）IE6及IE6以下版本的浏览器可以识别的属性Hack

编写CSS样式代码时，如果想要此样式只对IE6及IE6以下版本的浏览器生效，可以使用IE6及IE6以下版本的CSS属性Hack，其语法格式如下：

_属性：样式代码;

（2） IE7及IE7以下版本的浏览器可以识别的属性Hack

编写CSS样式代码时，如果想要此样式只对IE7及IE7以下版本的浏览器生效，可以使用IE7及IE7以下版本的CSS属性Hack，其语法格式如下。

+或*属性：样式代码;

注意：

CSS Hack能够针对不同的浏览器编写不同的CSS样式代码，从而实现兼容最大化。但当多次重复定义CSS样式时，浏览器会默认执行最后定义的样式，因此，在使用CSS Hack时，一定要按照浏览器版本从高到低的顺序编写样式。

下面列举一些CSS Hack，如表10.2和表10.3所示。以方便读者查看。

表10.2 选择器Hack

选择器Hack写法	针对的浏览器
@media screen/9{body{样式代码}}	只对IE6/IE7有效
@media /0screen{body{样式代码}}	只对IE8有效
@media /0screen/,screen/9{body{样式代码}}	只对IE6/IE7/IE8有效
@media screen/0{body{样式代码}}	只对IE8/IE9/IE10有效
@media csreen and (-ms-high-contrast:active), (-ms-high-contrast:name){body{样式代码}}	只对IE10有效

表10.3 属性Hack

CSS属性Hack(前缀)	针对的浏览器
_color:red;	IE6及其以下的版本
*color:red;或+color:red;	IE7及其以下的版本
color:red/9	IE6/IE7/IE8/IE9/IE10版本
color:red/0	IE8/IE9/IE10版本
color:red/0/9	IE9/IE10
color:red!important	IE7/IE8/IE9/IE10及其他非IE浏览器

IE条件注释语句

在开发中，IE浏览器的兼容性问题比较多，经常需要对其兼容性进行调试，因此，微软官方专门提供了“IE条件注释语句”。“IE条件注释语句”是专门针对IE浏览器的Hack，对于不同版本的IE浏览器，编写方法也不同。其主要包括判断浏览器类型的条件注释语句和判断IE版本的条件注释语句。其具体介绍如下。

1. 判断浏览器类型的条件注释语句

判断浏览器类型的条件注释语句用于判断浏览器类型是否为IE浏览器，其基本语法格式如下。

其中，第一行中的IE代表浏览器的类型，表示该条件注释语句只能被IE浏览器识别。

2. 判断IE版本的条件注释语句

判断IE版本的条件注释语句用于判断IE浏览器的版本，其基本语法格式如下。

其中，第一行的IE7代表IE浏览器的版本号，表示该注释语句只能被当前IE版本浏览器识别。

下面列举一些常用的IE条件注释语句，如表所示。

表 IE条件注释语句

IE条件注释语句	针对的浏览器版本
<!—[if lt IE7]>内容<![endif]-->	IE7以下的版本
<!—[if lte IE7]>内容<![endif]-->	IE7及其以下的版本
<!—[if gt IE7]>内容<![endif]-->	IE7以上版本
<!—[if gte IE7]>内容<![endif]-->	IE7及其以上版本
<!—[if !IE7]>内容<![end if]-->	非IE7版本
<!—[if !IE]><!-->内容<!--<![endif]-->	非IE浏览器

表中出现了lt、lte、gt、gte和！等字母符号。

l gt(greater than)：选择条件版本以上版本，不包含条件版本；

l lt(less than)：选择条件版本以下版本，不包含条件版本；

l gte(greater than or equal)：选择条件版本以上版本，包含条件版本；

l lte(less than or equal)：选择条件版本以下版本，包含条件版本；

l !：选择条件版本以外的所有版本，无论高低；

常见IE6浏览器的兼容性问题

在实际开发工作中，出现浏览器兼容性问题比较多的浏览器是IE6浏览器，举一些常见的IE6浏览器兼容性问题及其解决方法。

1. IE6显示多余字符问题

在IE6浏览器中，当两个浮动元素之间加入HTML注释时，会产生多余字符。

解决IE6浏览器的兼容问题，有三个解决方法，具体如下：

l 删除HTML注释；

l 在产生多余字符的标签的CSS样式中添加“position:relative”样式；

l 不设置浮动div的宽度；

2. IE6浏览器中元素最小高度的问题

IE6浏览器有默认的最小像素高度19px，因此它无法识别19px以下的高度值。

解决这个问题有两种方法，具体如下。

l 为元素定义“overflow:hidden”样式，通过这个样式，将超出的部分隐藏；

l 为元素定义“font-size:0”样式；

两种方法都可以解决IE6浏览器不能识别低于19px高度的问题，但第二种方法会妨碍字体大小的设置，因此建议使用第一种方法。

3. IE6浏览器中浮动元素的双倍外边距问题

在制作网页时，经常出现IE6浏览器浮动的双倍外边距问题，即设置浮动元素的左外边距或右外边距时，在IE6浏览器中运行，元素对应的左外边距或右外边距是所设置值的两倍。

IE6浏览器中元素的左外边距是在Chrome浏览器中左外边距的两倍。IE6浏览器中的双倍外边距问题可以通过为元素定义“display：inline”CSS演示解决。例中在box2的CSS样式中添加代码如下。

_display:inline;

可以看到，在上述代码中加了只针对IE6浏览器的CSS属性Hack前缀“_”，这是因为只有IE6浏览器有这个兼容问题。

4. IE6中3px间距问题

当非浮动元素或者文本在一个浮动元素之后，运行在IE6浏览器中时，非浮动元素或文本与浮动元素之间会有3px的间距，这就是典型的IE6的3px间距问题。

在Chrome浏览器中正常显示，在IE6浏览器中，文本和浮动盒子之间会有3px间距。可以通过为浮动元素设置负外边距的方法解决IE6浏览器中的这个问题。在例10-17的CSS样式中提添加代码，具体代码如下。

_margin-right:-3px; /*这里要使用只有IE6识别的属性Hack*/

5. IE6中图片底部的像素间隙问题

一张图片插入到与其大小相同的元素中，当在IE6浏览器中显示时，图片底部会有3px的间隙。

解决这种IE6浏览器的兼容性问题有以下两种解决方法。

（1）<img>标签与<div>标签放在同一行，如例中，将第11行和第12行代码合成一行，具体示例如下。

（2）为<img>定义“display：block”样式，具体示例如下。

为了便于阅读，在实际开发中常建议使用第二种方法。




布局方案与整页制作小结

通过学习掌握常见的布局方案，以及实现一个整页开发，通过整页开发学习到如何规划结构和规划样式。根据整页的制作流程，举一反三制作其他页面效果。