《HTML5+CSS3+JavaScriptWeb前端开发案例教程》课件 第3章 用CSS3装饰网站.pptxVIP

用CSS3装饰网站

图文混排展示“人邮经典”系列图书

案例描述本案例实现了明日学院“人邮经典”系列图书页面。通过这个案例，向读者介绍CSS3的相关内容。

技术准备选择器ID选择器和类选择器

选择器选择器是用来选择标签的，比如ID选择器就是通过ID来选择标签，类选择器就是通过类名选择标签。

ID选择器语法#red{color:red;}举例h1id=styleA这是ID为styleA的样式。/h1

类选择器语法.red{color:red;}举例h1class=styleB这是styleB的样式。/h1

案例实现

制作商品列表页面

案例描述本案例实现一个购物网站中的商品列表页面，页面中的商品信息按顺序展示出来。

技术准备CSS列表属性

CSS列表属性?list-style：把所有用于列表的属性设置在一个声明中。?list-style-image：将图像设置为列表项标志。?list-style-position：设置列表项标志的位置。?list-style-type：设置列表项标志的类型。

案例实现

制作网购商城的商品抢购页面

案例描述本案例实现一个网购商城的商品抢购页面。商品信息使用不同大小的文字，同时页面文字的颜色也可以使用CSS样式属性进行设置。

技术准备a链接标签的CSS属性文本相关的CSS属性

a链接标签的CSS属性

文本相关的CSS属性字体font-family，font-size文本color，text-align，text-indent

案例实现

打造多彩网站主题背景

案例描述本案例实现一个课程主题背景页面。使用页面的背景图片为整个页面增添更丰富的效果。

技术准备背景相关的CSS属性

背景相关的CSS属性

案例实现

AI辅助编程——添加CSS样式

内容概览为指定文本添加CSS样式为列表构成的导航菜单添加CSS样式