- 1、本文档共43页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
javascript入门到精通3解读
样式的优先级3-2 “日用百货”链接 head …… style type=text/css .nav ul li a:link{color:blue;} /style link rel=stylesheet href=css/layout.css type=text/css / /head body div class=nav ul lia href=#家用电器/a/li lia href=#手机数码/a/li !—下面为行内样式-- lia href=# style=color:red;font-size:10px;日用百货/a/li /ul /div /body 内部样式表 外部样式表 行内样式表 红色 蓝色 演示示例4:样式优先级 样式的优先级3-3 购物车的样式 head style #nav_id { width:300px; background: #ccc; } .nav { height:100px; background: red; } div { border:5px solid green; background: blue; } /style /head body div class=nav id=nav_id ul lia href=#购物车/a/li /ul /div /body ID选择器 类选择器 标签选择器 不冲突的样式,边框5px、绿色 同时应用ID、class、标签三类选择器 灰色背景 演示示例5:CSS优先级 练习——使用超链接伪类实现导航条 需求说明: 用提供的背景图素材,实现如下导航菜单效果 要求使用外部样式表 div-ul-li结构 完成时间:25分钟 链接无下划线(text-decoration),鼠标悬停,显示菜单的投影背景(background) 、字体变大 行高:24px 字体大小:10px 典型的局部布局结构 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;background:url(../images/icon.gif) no-repeat;} .pic2{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -28px 0px;} .pic3{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -84px 0px;} .pic4{width:28px;height:26px;background:url(../images/icon.gif) } 大量重复的CSS代码,如何精简? .抽取重复代码建立类 .pic {//共有的CSS代码;} 应用样式:多个类样式 li class=pic pic1/li 练习——修饰div-ul-li局部布局 需求说明: 重新实现贵美网站的导航菜单 完成时间:25分钟 行高:26px 图标宽度:28px 图标宽度:38px div-dl-dt-dd局部布局样式修饰2-1 实现思路 布局结构分析 CSS样式分析 布局结构: 1、图文混编结构,宜用div-dl-dt-dd结构。 2、dt放图片,dd放文字,dl做结构容器,方便扩展 布局结构: 1、图片和文字一行:采用float 2、文字居中:调整dd宽高与行高 div-dl-dt-dd局部布局样式修饰2-2 实现步骤 先建立HTML标签组织结构 建立CSS样式表,逐一添加各类样式 测试样式细节 演示示例8:制作新品上架 制作新品上架版块样式 小结 基本符号: (空格) ,(逗
您可能关注的文档
- 新版译林版英语三年级上册第四单元《Unit4-my-family》第一课时教研课课件讲述.ppt
- 新版食品安全法前后对比讲述.ppt
- 奥迪大客户潜客管理工作手册精要.ppt
- 新版道德与法治3.1我们悄悄长大讲述.ppt
- IPRAN技术基础-20120616解读.pptx
- IQC16年半年统计1解读.pptx
- IP网络技术培训解读.ppt
- 新环保法PPT课件讲述.ppt
- 新版苏教版一年级语文上《给刘洋阿姨的信》讲述.ppt
- 新版铁路线路高级工题库讲述.doc
- 2024年江西省寻乌县九上数学开学复习检测模拟试题【含答案】.doc
- 2024年江西省省宜春市袁州区数学九上开学学业水平测试模拟试题【含答案】.doc
- 《GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语》.pdf
- 中国国家标准 GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语.pdf
- GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- 《GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构》.pdf
- 中国国家标准 GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 中国国家标准 GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 《GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南》.pdf
文档评论(0)