项目四 商品分类页面设计

《项目四 商品分类页面设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目四商品分类页面设计---常用样式结构项目任务：1、制作“商品分类”版块2、制作背景为圆角矩形的效果目标：1、掌握CSS的基本语法2、使用文本和字体样式美化网页3、使用背景样式美化网页4.1CSS基本语法4.2.1.CSS的基本概念级联样式表（CascadingStyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。我们可以使用表格实现网页的布局。但使用表格进行页面布局会带来很多问题：（1）把格式数据混入的内容中。这使得文件的大小无谓地变大。（2）这使得重新设计现有的站点和内容极为消耗劳力。（3）这还使我们保持

2、整个站点的视觉的一致性极难，花费也极高。使用CSS布局页面的优势：（1）、能实现内容与样式的分离，方便团队开发。（2）、实现样式复用，提高开发效率，方便网站的后期维护。（3）、页面的精确控制，实现精美、复杂页面。（4）、更有利于搜索引擎的搜索。1、内容和形式分离网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。完全的颠覆现在传统（table）网页设计的技术。致网页文件大小比使用table时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快。2、易于

3、维护不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。3搜索引擎更友好，通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。4、CSS的用途：外观美化、布局、定位4.2.2基本结构与命名规则1、基本结构叠层样式表一般用其中选择器表示被修饰的对象。属性是希望改变的样式，如颜色color。属性和属性值用冒号（:）隔开。注

4、意：（1）虽然CSS代码不区分大小写，但推荐使用小写。（2）每条样式规则用分号（；）隔开，一般写为多行，简单的规则也可以合并为一行（3）当CSS代码较多时，可以使用/*...........*/添加毕业的注释，增加代码的可读性。2、CSS选择器规范化命名规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。（1）骆驼命名法：第一个字母要小写，后面的词的第一个字母就要用大写，如下：#headerBlock.navMenuRedButton（2）帕斯卡命名法这种命名法同样也

5、是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下#HeaderBlock.NavMenuRedButton（3）匈牙利命名法匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如：#head_navigation.red_navMenuButton以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”以下为于页面模块的常用命名头：header内容：content/container尾：

6、footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenter登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content4.2.3Css样式加载加载css样式有以下四种:外部样式、内部样式、行内样式、导入样式。1、外部样式

7、ut.css"rel="stylesheet"type="text/css"/>这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。2、内部样式h2{color:#f00;}这种形式是内部样式表，它是以结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。3、行内样式