| HTML5 DIV+CSS综合运用 | 您所在的位置：网站首页 › css样式定义的基本结构包括 › HTML5 DIV+CSS综合运用 |
HTML5 DIV+CSS综合运用
|
实训目标：
(1)掌握CSS基本概念、CSS类型及4种CSS样式定义的方法。 (2)掌握CSS中字体、排版、颜色、背景、列表等属性设置。 (3)掌握DIV和SPAN标记语法,学会使用相关CSS属性来定义样式。 实训内容(1)定义4种样式表,并学会引用。 (2)自定义外部样式表,并能在Web页面中导人或链接外部样式表。 (3)使用CSS盒模型的MBPC(margin、border、padding、content)来精确定位网页元 素,运用段落、字体、颜色、背景及列表等CSS专有的属性进行页面精细加工。 (4)区别CSS选择符类型，并能灵活运用各种选择符完成样式的定义。 实训项目(1)设计《中国教育网络》杂志简介页面。 (2)设计《京东商品导购》页面。 什么是CSS？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 项目一 设计《中国教育网络》杂志简介 实训要求(1)利用多种CSS样式表设计《中国教育网络》杂志简介页面。 (2)学会综合运用DIV+CSS进行页面布局设计。 实训内容(1)定义行内样式表(内嵌样式表/内联样式表)。 (2)定义内部样式表。 (3)导入(嵌人)外部样式表。 (4)链接外部样式表。 (5)无序列表的定义与应用。 (6)定义列表的定义与应用。 (7)标题字标记的使用。 知识点： （1）span标记
行内样式——>ID样式——>类样式——>标记样式 实训过程：先建立一个layout_import.css文件： #div0{border:1px solid #cccccc; width:850px; height:1500px; margin:5px auto;} #div3{padding-left:40px; font-size:14px; clear:both; text-indent:2em;} #div4{height:160px; margin:10px auto; padding-left: 40px;} CSS @import url("layout_import.css"); .div2{ width: 100%; background: #F0F0F0; height: 120px; line-height: 1.5em; padding: 10px auto; } li{ float: left; width: 33%; } 《中国教育网络》杂志简介 2016-03-03 >>推荐阅读 COST论坛“迎新”系列视频讲座 技术应用升级百所高校IPv6蝶变 教育信息化关注“十二五”规划 2010下一代互联网发展和应用论坛 教育信息化服务器应用突破壁垒 强调应用移动IPv6发展空间 2004年12月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准,教育部主管,教 育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》 正式出版发行。 立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国 教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念,及 时报道相关政策及重大事件,广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生及 技术人员提供借鉴。 依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士提 供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，是与中国教 育信息化同步发展的核心媒体。 目标 始终保持教育信息化领域第一品牌的市场地位 是与中国教育信息化同步发展的核心媒体 定位 中国教育网络领域的综合杂志 ————全面反映教育网络研究、建设、管理及应用、文化、产业化的成就及重大事件。 受人尊敬的专业权威杂志 ————依托政府、教育界、IT产业界专家，专注于教育网络领域，制作高水准的内容。 创新IT媒体服务 ————以创新、深入的视角报道教育信息化的进展和变化。 影响高端人士，成为教育信息化宣传队 ————服务 于教育网络的研究、建设与使用者，通过对高端人群的影响，确立自己作为教育信息化权威窗口的地位。 杂志优势 强有力的政府指导 在教育部及相关部门的指导下，及时准确地传达贯彻教有信息化发展的方针、政策、法规等，保证中国教育网络健康发展，推动教育网络建设与应用。 权威的专家队伍 依托CERNET及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水准的内容，为工作提供高起点的业务及技术指导。 影响未来的用户群 《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在该领域具有强大的影响力。 遍布全国的渠道 依托各地方教委及CERNET,《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。 效果如下：
通过设置元素的margin（边界）、border（边框）、padding（填充）、content（内容）等相关属性，设计京东商品导购页面。 实训内容（1）图层的定义与样式应用。 （2）图层、图像、标题字、超链接等标记CSS属性的设置。 （3）内部样式表的定义与使用 （4）CSS盒模型的margin、border、padding、content等属性的设置与应用 知识点： CSS盒子模型（Box model）：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。、 元素的宽度和高度 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。 要知道，完全大小的元素，你还必须添加填充，边框和边距。 下面的例子中的元素的总宽度为300px： div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }让我们自己算算： 300px (宽) +50px (左 + 右填充) +50px (左 + 右边框) +50px (左 + 右边距) = 450px 试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素: div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; }最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 实训过程： CSS @import url('layout_import.css'); h3{ text-align: center; font-size: 32px; color: red; } p{ text-align: center; } 淘宝商品导购 雪乃手办 伊卡洛斯手办 光明炽天使手办 缘之空手办 花椰菜手办 八重樱手办css： #div0{width:1500px; height:3500px; border: 1px solid red; margin: 0px auto;} #div1{margin: 10px 100px; border: 5px groove #9999CC; float: left;} #div2{margin: 10px 100px; border: 5px groove #9999CC; float: left;} #div3{margin: 10px 100px; border: 5px groove #9999CC; float: left;} #div4{margin: 10px 100px; border: 5px groove #9999CC; float: left;} #div5{margin: 10px 100px; border: 5px groove #9999CC; float: left;} #div6{margin: 10px 100px; border: 5px groove #9999CC; float: left;} 效果如下：
|
实例 链接一个外部样式表：
不同部分的说明：
【本文地址】