html网页制作PPTchapter4css.ppt

* 典型的三行两列布局 * 典型的三行两列布局 * * * 演示：因为DIV都是块级元素，前后换行显示原因，所以会出现两块竖排情形？怎么解决？使用float * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * * 图片添加了边框，文本添加了下划线 * 解释：.nav li a的含义，限定范围 * 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 练习——实现中间布局 需求说明： 在前面上机练习基础上，实现页面中间布局 完成时间：10分钟 中间两块宽度各占一半 练习——头部局部布局 需求说明： 在前面上机练习完成的页面中，实现header块的局部布局 完成时间：25分钟 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 超链接样式的特点 加链接后，图片/文本样式的变化 超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ） 可以分别设置链接的四种状态的样式 超链接伪类样式 超链接伪类样式 伪 类 示 例 说 明 a:link a:link{color:#999;} 未访问状态 a:visited a:link{color:#333;} 已访问状态 a:hover a:link{color:#ff7300;} 鼠标移上状态 a:active a:link{color:#999;} 激活选定状态（鼠标点击未释放时） 采用选择器：状态的方式分别定义样式，一般称为伪类 如何设置超链接的样式 style type=text/css .nav li a { padding:8px 15px;} .nav li a:hover { color:#ff7300;font-size:20px; } /style body div class=nav ul lia href=#家用电器/a/li lia href=“#”手机数码/a/li …… 演示示例1：伪类 1、先定义共有样式：表示.nai类下li标签中的链接样式 设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态 2、再单独定义某个状态特有的样式 导航版块的链接样式一般和页面样式不同，需单独定义 典型的局部布局结构 div-ul(ol)-li：常用于分类导航或菜单等场合； div-dl-dt-dd：常用于图文混编场合； table-tr-td：常用于图文布局或显示数据的场合； form-table-tr-td：常用于布局表单的场合； HTML标签中，学过哪些典型的块状布局结构？ div-ul-li局部布局的样式修饰2-1 实现思路 布局结构分析 CSS样式分析 布局结构： 1、图文参差并列结构，宜采用div-ul-li实现 2、图标和文字各占一个li 各类样式： 1、小图标：采用背景图偏移 2、右对齐：float浮动 3、超链接：无下划线样式 4、调整文本对齐和间距 div-ul-li局部布局的样式修饰2-2 实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节 演示示例6：制作贵美顶部菜单 如何复用CSS代码 演示示例7：精简CSS代码 .pic1{width:28px;height:26px;back