项目四 商品分类页面设计.docx
《项目四 商品分类页面设计.docx》由会员分享，可在线阅读，更多相关《项目四 商品分类页面设计.docx（24页珍藏版）》请在冰点文库上搜索。
项目四商品分类页面设计
项目四商品分类页面设计---常用样式结构
项目任务：
1、制作“商品分类”版块
2、制作背景为圆角矩形的效果
目标：
1、掌握CSS的基本语法
2、使用文本和字体样式美化网页
3、使用背景样式美化网页
4.1CSS基本语法
4.2.1.CSS的基本概念
级联样式表（CascadingStyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。
我们可以使用表格实现网页的布局。
但使用表格进行页面布局会带来很多问题：
（1）把格式数据混入的内容中。
这使得文件的大小无谓地变大。
（2）这使得重新设计现有的站点和内容极为消耗劳力。
（3）这还使我们保持整个站点的视觉的一致性极难，花费也极高。
使用CSS布局页面的优势：
（1）、能实现内容与样式的分离，方便团队开发。
（2）、实现样式复用，提高开发效率，方便网站的后期维护。
（3）、页面的精确控制，实现精美、复杂页面。
（4）、更有利于搜索引擎的搜索。
1、内容和形式分离
网页前台只需要显示内容就行，形式上的美工交给CSS来处理。
生成的HTML文件代码精简，更小打开更快。
这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。
完全的颠覆现在传统（table）网页设计的技术。
致网页文件大小比使用table时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快。
2、易于维护
不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。
3搜索引擎更友好，通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。
4、CSS的用途：
外观美化、布局、定位
4.2.2基本结构与命名规则
1、基本结构
叠层样式表一般用
其中选择器表示被修饰的对象。
属性是希望改变的样式，如颜色color。
属性和属性值用冒号（:
）隔开。
注意：
（1）虽然CSS代码不区分大小写，但推荐使用小写。
（2）每条样式规则用分号（；）隔开，一般写为多行，简单的规则也可以合并为一行
（3）当CSS代码较多时，可以使用/*...........*/添加毕业的注释，增加代码的可读性。
2、CSS选择器规范化命名
规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，CSS命名法，和其他的程序命名差不多，也是有三种：
骆驼命名法，帕斯卡命名法，匈牙利命名法。
（1）骆驼命名法：
第一个字母要小写，后面的词的第一个字母就要用大写，如下：
#headerBlock
.navMenuRedButton
（2）帕斯卡命名法
这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下
#HeaderBlock
.NavMenuRedButton
（3）匈牙利命名法
匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如：
#head_navigation
.red_navMenuButton
以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”
以下为于页面模块的常用命名
头：
header内容：
content/container尾：
footer导航：
nav侧栏：
sidebar
栏目：
column页面外围控制整体布局宽度：
wrapper左右中：
leftrightcenter
登录条：
loginbar标志：
logo广告：
banner页面主体：
main热点：
hot
新闻：
news下载：
download子导航：
subnav菜单：
menu子菜单：
submenu
搜索：
search友情链接：
friendlink页脚：
footer版权：
copyright滚动：
scroll
内容：
content
4.2.3Css样式加载
加载css样式有以下四种:
外部样式、内部样式、行内样式、导入样式。
1、外部样式
这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。
它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
2、内部样式
h2{color:
#f00;}
这种形式是内部样式表，它是以结尾，写在源代码的head标签内。
这样的样式表只能针对本页有效。
不能作用于其它页面。
3、行内样式
18px;">内部样式
这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
4、导入样式
@importurl（"/css/global.css"）;
链接样式是以@importurl标记所链接的外部样式表，它一般常用在另一个样式表内部。
如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@importurl（"/css/global.css"）的形式链接全局样式，这样就使代码达到很好的重用性。
4.2.4选择器的分类
选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器。
1、标签选择器
当需要对页面内某类标签的内容进行修饰时，则采用标签选择器。
使用方法：
标签名{
属性名1：
属性值1；
属性名2：
属性值2；
.....
}
【案例4-1】标签选择器
图4-1标签选择器
无标题文档
浏览效果如图4-1所示
2、类选择器
使用标签选择器修饰的范围广，如果要个别设置
元素样式，这时就要使用类选择器。使用类选择器的步骤：
（1）定义类样式
.类名{
属性名1：
属性值1；
属性名2：
属性值2；
.....
}
（2）应用样式，使用标签“class”属性引用类样式，即
<标签名class=“类名”标签>
内容
要注意定义类名前有个逗点“.”。
要实现对特殊部分大样式设置，先定义表示某类样式的类选择器，再设置特殊部分元素应用这类样式。
【案例4-2】类选择器
//www.w3.org/1999/xhtml">
商品分类