项目四商品分类页面设计.docx
- 文档编号:5059095
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:19
- 大小:35.46KB
项目四商品分类页面设计.docx
《项目四商品分类页面设计.docx》由会员分享,可在线阅读,更多相关《项目四商品分类页面设计.docx(19页珍藏版)》请在冰豆网上搜索。
项目四商品分类页面设计
项目四商品分类页面设计---常用样式结构
项目任务:
1、制作“商品分类”版块
2、制作背景为圆角矩形的效果目标:
1、掌握CSS的基本语法
2、使用文本和字体样式美化网页
3、使用背景样式美化网页
4.1CSS基本语法
CSS的基本概念
级联样式表(CascadingStyleSheet)简称“CSS,通常又称为风格样式表(Style
Sheet)”,它是用来进行网页风格设计的。
我们可以使用表格实现网页的布局。
但使用表格进行页面布局会带来很多问题:
(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:
#fOO;}
这种形式是内部样式表,它是以结尾,写在源代码的head标签内。
这样的样式表只能针对本页有效。
不能作用于其它页面。
3、行内样式
18px;">内部样式
这种在标签内以style标记的为内部样式,内部样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用。
4、导入样式
@importurl("/css/global.css");
链接样式是以@importurl标记所链接的外部样式表,它一般常用在另一个样式表内部。
如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个global.css的文件中,然后在layout.css中以@importurl("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性。
424选择器的分类
选择器表示所修饰的内容类别,选择器又分为标签选择器、类选择器、ID选择器。
1、标签选择器
当需要对页面内某类标签的内容进行修饰时,则采用标签选择器。
使用方法:
标签名{
属性名1:
属性值1;
属性名2:
属性值2;
}
【案例4-1】标签选择器
- 家用电器
- 各类书籍
- 手机数码
- 日用百货
浏览效果如图4-1所示
2、类选择器
使用标签选择器修饰的范围广,如果要个别设置
器。
使用类选择器的步骤:
(1)定义类样式
.类名{
属性名1:
属性值1;
属性名2:
属性值2;
}
⑵应用样式,使用标签“class”属性引用类样式,即
<标签名class=“类名”标签>
内容
标签>
要注意定义类名前有个逗点“.”。
要实现对特殊部分大样式设置,先定义表示某类样式的类选择器,再设置特殊部分元
素应用这类样式。
【案例4-2】类选择器
li{color:
red;font-size:
28px;font-family:
隶书;
商品分員x|©•家用电器.各类书藉.手机数码•日用百货
.blue{color:
blue;}/*类选择器*/
- 各类书籍
- 日用百货