项目四商品分类页面设计.docVIP

项目四 商品分类页面设计-常用样式结构项目任务：1、制作“商品分类”版块2、制作背景为圆角矩形的效果目标：1、掌握CSS的基本语法2、使用文本和字体样式美化网页3、使用背景样式美化网页4.1 CSS基本语法4.2.1. CSS 的基本概念级联样式表（Cascading Style Sheet）简称“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、基本结构叠层样式表一般用标签来声明样式规则。其基本结构如下： 选择器 对象的属性1：属性值1； 对象的属性2：属性值2； 其中选择器表示被修饰的对象。属性是希望改变的样式，如颜色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 左右中：left right center登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll内容：content4.2.3 Css样式加载加载css样式有以下四种:外部样式、内部样式、行内样式、导入样式。1、外部样式这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。2、内部样式 h2 color:#f00;这种形式是内部样式表，它是以和结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。3、行内样式内部样式这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。4、导入样式import url(/css/global.css);链接样式是以import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个 global.css的文件中，然后在layout.css中以import url(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。4.2.4 选择器的分类选择器表示所修饰的内容类别，选择器又分为标签选择器、类选择器、ID选择器。1、标签选择器当需要对页面内某类标签的内容进行修饰时，则采用标签选择器。使用方法：标签名属性名1：属性值1；属性名2：属性值2；.【案例4-1】 标签选择器 licolor:red;font-size:28px;font-family:隶书; 图4-1 标签选择器无标题文档 家用电器 各类书籍 手机数码 日用百货 浏览效果如图4-1所示2、类选择器使用标签选择器修饰的范围广，如果要个别设置元素样式，这时就要使用类选择器。使用类选择器的步骤：（1）定义类样式.类名属性名1：属性值1；属性名2：属性值2；.(2)应用样式，使用标签“class”属性引用类样式，即 内容要注意定义类名前有个逗点“.”。要实现对特殊部分大样式设置，先定义表示某类样式的类选择器，再设置特殊部分元素应用这类样式。【案例4-2】类选择器 商品分类 meta http-equiv=Content-Type content=text/html; charset=utf-8 / licolor:red;font-size:28px;font-family:隶书; 图4-2 类选择器 .bluecolor:blue; /*类选择器*/ 家用电器 各类书籍 手机数码 日用百货 定义类选择器的好处是任何标签都可以应用该类样式，从而实现样式的共享和代码复用。3、ID选择器ID属性作为HTML元素的唯一标识，要求页面内不能有重复的ID标识属性。对应的ID选择器一般用于修饰对应ID标识的HTML元素内容，实际使用时常与标签配合使用。用于表示某个指定的div区块其使用步骤：（1）使用ID属性标识被修饰的页面元素。如： 内容 （2）定义相应的ID选择器样式，语法如下：#类名属性名1：属性值1；属性名2：属性值2；.【案例4-3】ID选择器商品分类meta http-equiv=Content-Type content=text/html; charset=utf-8 / #bookfont:bold 14px 宋体;图4-3 ID选择器 家用电器 各类书籍 手机数码 日用百货 运行效果如图4-3所示ID选择器用于修饰某个指定的页面元素或区块，这些样式是对应ID标识的HTML元素所独占的。如果希望部分li标签采用其他样式，采用class选择器。如果希望控制某个DIV块样式，并且要求块元素唯一，采用ID选择器。4、css优先级l id优先级高于classl 后面的样式覆盖前面的l 指定的高于继承l 行内样式高于内部或外部样式单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的4.2 常用的样式修饰网页元素可以修饰的样式属性有很多，常用的样式分为：文本及字体、背景、列表等。4.2.1 文本及字体属性文本属性用于定义文本的外观，包括颜色、行高、对齐方式、字符间距等。常用的文本属性如表：1、字体、字号属性font（缩写形式）font-weight（粗细） font-size（大小） font-family（字体）2、行距、对齐line-height （行高） text-align （对齐） letter-spacing （字符间距）text-decoration （文本修饰 ）white-space （空白处理 ）【案例4-4】文本与字体属性meta http-equiv=Content-Type content=text/html; charset=utf-8 /文本属性样式li font:12px 宋体; text-align:left; line-height:28px;.title letter-spacing:5px;white-space:nowrap;text-decoration:underline;/* 大字体的样式*/.bigFont font-size:16px; color:red; 微信之父张小龙谈山寨与创新新一届领导集体:平凡的生活 伟大的梦想 改革时代人物工商总局整治电视购物 中国经济在金融危机中仍保持较强发展态势莫让政绩冲动埋掉我们的乡愁 吃饭！ 运行该页面，其效果如图4-4所示图4-4 文本与字体属性4.2.2 背景属性通过背景属性定义页面元素的背景色或背景图片，同时还可以精确控制背景出现的位置、平铺方向等，常用的背景属性：background （缩写形式）background-color（背景色 ）background-image（背景图 ）background-repeat（背景图重复方式 ）background-position（位置坐标、偏移量）1、设置背景颜色background-color是CSS中的背景颜色属性，这个属性用于为HTML元素设定背景颜色，可以设置整个网页的背景颜色，也可以设置网页中某部分元素的背景颜色，比如表格背景颜色、层背景颜色等等。示例1：这段代码设置整个网页的背景颜色为蓝色#0080FF2、设置背景图片（1）background-image是CSS中的背景图片属性，这个属性用于为HTML元素设定背景图片，可以设置整个网页的背景图片，也可以设置网页中某部分元素的背景图片，比如表格背景图片、层背景图片等等。示例2：这段代码设置整个网页的背景图片，网页和图片可以存放在不同的网站空间内，背景图片既横向重复又竖向重复。示例3：如果网页和图片存放在同一个网站空间内，图片位于images目录下，示例1的代码也可以用图片的相对路径写法：（2）background-repeat是CSS中的背景重复属性，这个属性通常与background-image一起使用，控制背景图片的重复显示方式，属性值包括： repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复示例4：这段代码设置网页的背景图片，背景图片仅竖向重复。示例5：这段代码设置网页的背景图片，背景图片仅横向重复。示例6：这段代码设置网页的背景图片，背景图片不重复。（3）background-attachment是CSS中的背景附着属性，这个属性通常与background-image一起使用，控制背景图片是跟随网页内容滚动，还是固定不动，属性值包括： scroll（缺省值） fixed示例7：这段代码设置网页的背景图片，背景图片不重复，且不随网页内容滚动。（4）background-attachment是CSS中的背景位置属性，这个属性通常与background-image一起使用，控制背景图片的最初位置。示例8：这段代码设置网页的背景图片，背景图片不重复，随网页内容滚动，背景图片的初始位置距网页最左边50px，距网页最顶端30px。（5）background是CSS中的背景属性，这个属性是个综合属性，可以把以上种种单独定义的背景属性合并在一起，简化代码，不同背景属性之间用空格间隔。示例9：这段代码设置网页的背景颜色为蓝色#0080FF，背景图片不重复，且不随网页内容滚动，背景图片的初始位置距网页最左边50px，距网页最顶端30px。3、图标截取-背景偏移量技术（1）设置n个标签（如div）的背景为同一图片背景（2）考虑相应图标的坐标偏移量是多少？如： divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px; ; 购 物 车   帮助中心 登录 4.2.3 列表的常用属性常见的各类商品分类或导航菜单一般都使用ul-li结构实现。1、list-styleList-style属性用于定义类别项的各类风格。list-style （列表风格）属性值方式语法实现示例none无风格list-style:none;刷牙 洗脸disc实心圆（<ul>默认类型）list-style:disc; 刷牙 洗脸circle空心圆list-style:circle; 刷牙 洗脸square实心正方形list-style:square; 刷牙 洗脸decimal数字（<ol>默认类型）list-style:decimal1. 刷牙2. 洗脸顶部导航菜单 liwidth:120px;color:red;font:20px 隶书;list-style:none;float:left;帮助中心 加入收藏 设为首页 登录 注册 运行效果如图4-5所示图4-5 列表属性2、float属性Float属性用于定义元素的浮动方向，该属性对所有的元素都支持，它可以改变块级元素默认的换行显示方式。例如： li width:150px;/*设置宽度确保各列表之间的间距*/ color:red;/*设置颜色*/ fomt:28px;/*设置字体大小*/ list-style:none;/*无列表类型图标*/ float:left;/*设置左浮动，将列表改为横向排列*/ 4.4 项目实施1、项目需求设计商品的分类页面，采用列表显示2、项目实施（1）商品的分类页面/编写HTML代码 买吗商城-商品分类页 联想 一 口 价：80.00元 运 费：免运费 此商品支持 网银支付，网上汇款免手续费。 收货满意后出售者才能拿钱 剩余时间：10天23小时 本