PPT
【文档说明】第3章asp使用CSS布局网张课件.ppt，共(50)页，1.005 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-45195.html
以下为本文档部分文字说明：
第3章使用CSS布局网页ASP.NET程序设计教程北京理工大学计算机学院金旭亮主要内容3.1CSS简介3.2在HTML文档中使用CSS3.3编写CSS样式规则3.4样式的继承与层叠3.5CSS盒模型3.6流式布局与浮动布局3.7盒子的定位方式3
.8网页布局实践23.1CSS简介CSS的作用CSS文档的基本组成元素CSS起什么用？SimplestPage.htm4结论：HTML定义了网页的结构CSS决定了浏览器如何显示HTML代码仅仅HTMLHTML+CSS3.2在HTML文档中使用CSS5如何在HTML中引入C
SS？行内式：在HTML标签的style属性中编写CSS代码嵌入式：在<head></head>中编写CSS代码链接式：使用<link>链接外部CSS文件<linktype="text/css"
rel="stylesheet"href="mycss.css"/>导入式：使用import指令<styletype="text/css">import"mystyle.css";</style>63.3编写CSS样式规则7CSS规则与声明CSS文档由一条或多条CSS规则组
成，规则拥有特定的格式：8p{color:red;background:yellow;}选择器属性值声明声明块CSS单位单位名称说明pc(pica)1pc=12pointpt(point)1pt=1/72inchmm(millime
ter)亳米cm(centimeter)厘米in(inch)英寸px(pixel)像素，代表计算机屏幕上的一点em表示字体的高度的单位ex表示字体中字母X的高度9学会编写CSS选择器标签选择器用于设定HTML文档中指定标签的显示样式11p{color:Red;font-s
ize:25px;}类别选择器给特定的一组CSS代码取名，然后可以应用于多个不同的标签：12.red_large_text{color:Red;font-size:25px;}<pclass="red_large_text">thisisaparagraph.</p><acl
ass="red_large_text"href="bit.edu">北京理工大学</a>定义一个类别选择器在不同元素中应用类别选择器ID选择器对于页面中独一无二的元素，如页脚，可以给其id属性赋予一个独一无二的值13<divid="footer">任何建议，请发
送至<ahref="mailto:JinXuLiangbit.edu">教师邮箱</a></div>然后可以用ID选择器给指定ID的元素设置样式#footer{font-style:italic;font-size:16
px;}伪类选择器超链接标签<a>支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类（pseudoclass）”14属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过后呈现的样式a:hover鼠标指针悬停于超链接
元素之上时呈现的样式a:active单击超链接时呈现的样式Demo:PseudoSelector.htm基本选择器与复合选择器将前面介绍的“标记选择器”、“类别选择器”和“ID选择器”统称为“基本选择器”。“复合选择器”包括：（1
）交集选择器（2）并集选择器（3）后代选择器15交集选择器直接指定特定标记中特定类别或ID的样式。16p.special{/*标记.类别选择器*/color:red;}p#special{/*id选择器*/color:green;}Demo:I
ntersectionSelector.htm注意：选择器字符间不要有空格！并集选择器一次定义多个标签或类别或ID的样式17div,.special,#one{/*集体声明*/text-decoration:underline;/*下划线*/}注意：以逗号隔开各个选择器Demo:Un
ionSelector.htm后代选择器选择嵌套在指定元素的内部元素的样式18pspan{color:red;}Demo：DescendantSelector.htm注意：以空格分隔选择器关于选择器CSS选择器是编写样式表文档的基础，一定要熟悉并掌握这六种基本的选择器样式，
从而为今后网页设计打下基础。193.4CSS的继承与层叠原则浏览器如何显示未定义样式的元素？样式定义相互冲突时如何决定最终显示效果？CSS的继承原则21结论：没有定义CSS规则的HTML元素从它的父元素中继承样式！div.father{color:blue;
/*颜色*/text-decoration:underline;/*下划线*/}<divclass="father">这是父元素内的文本，显示为蓝色加下划线<div>这是子元素内的文本</div></div>使用交集选择器定义样式定义两个嵌套的元素Demo:CSSInh
erits.htmCSS层叠原则选择器定义的规则相互冲突怎么办？Demo:CascadingExample.htm22行内样式>id样式>类别样式>标签样式结论：特殊者胜出!3.5CSS盒子模型页面布局的关键CSS强大排版能
力的根基HTML文档的逻辑结构24htmlheadbodyphtmlheadbodypdivid=”newblock”新加的div标签导致一个新块的创建什么是“Box”?25marginpaddingBoxCSS盒
子模型26块级标签与行内标签HTML标签分为两大类：1.<div>、<p>、<h2>等是常见的块级（block）元素标签2.<span>、<a>、<img>等是常见的行内（inline）元素标签每
一个块级元素都定义了一个盒子。<div>与<span>没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。27设置div块的显示效果Demo:ShowBox.htm28div{border-width:6px;border-colo
r:#000000;margin:20px;/*盒子间距*/padding:5px;/*内容与边界距离*/background-color:#FFFFCC;border-style:dashed;}要点：通过设定盒子的边框和线型可以在页面上清晰
地显示出盒子所占用的页面区域。有关CSS盒子设定边框属性的简写属性值个数说明2第1个值表示上下边框的属性第2个值表示左右边框的属性3第1个值表示上边框的属性第2个值表示左右边框的属性第3个值表示下边框的属性4依次表示上、右、下、左边框的属性（成顺时针方向）29di
v{border-color:RedGreen;border-width:1px2px3px;border-style:dotteddashedsoliddouble;}3.6流式布局与浮动布局3.6.1流式布局默认情况下的布局方
式行内元素与块元素的显示默认情况下，浏览器新起一行显示块元素，而在同一行显示行内元素，这种方式被称为“标准流式布局”。32行内元素的间距Demo:InlineMargin.htm33行内元素之间的左右距离＝左元素的右边距+右元素的左边距块元素的上下间距Demo:BlockMar
gin.htm34两块之间的上下间距＝max{上一个块元素的下边距，下一个块元素的上边距}嵌套块元素的边界Demo:EmbodiedBoxMargin.htm35子块元素是以父元素为基准定位的。3.6.2浮动布局让一切“动”起来！盒子的浮动属性盒子拥有一个flo
at属性，可以设置为向左或向右浮动Demo:floatleft.htm和SreamLayout.htm要点：1.float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。2.设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。373.7定位
方式决定元素的真正位置元素的定位问题主要影响网页布局的是块元素。块元素有两种主要的显示方式：流式布局与浮动布局流式布局比较简单：（1）块元素分行显示（2）行内元素在同一行内显示，一行显示不下则折行。对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用
于指定元素的布局方式。39静态定位方式position=staticdemo:staticPosition.htm这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。40相对定位方式position=relatived
emo:relativePosition.htm.htm要点：1.使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。2.使用相对定位方式的盒子仍在标准流中，因此会影响其后继元素的定位关键：弄清楚以什么为基准定位41绝对定
位方式position=absolutedemo:absolutPosition_1.htm和absolutPosition_2.htm要点：1.使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。2.绝对定位的盒子从标准流中
脱离，它们对其后元素的定位没有影响。“已经定位”：指position属性被设置为除static以外的所有值之一。42固定定位position=fixedDemo:fixedPosition.htm要点：
1采用固定定位方式的盒子以浏览器窗口为基准定位。2采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。3采用固定定位的盒子不理会父盒子的定位方式。433.8设计实践灵活应用所学知识进行实践四图像圆角框步骤：1创建四个角的小图
像2按如下格式定义圆角框逻辑结构45+标题＝＝＝＝+正文关键：1块元素的背景图像可以设置放在哪个角2将块的背景色设为与图像一样掌握常见的页面布局方法网页的通用模板47页眉（header）内容（content）页脚（footer）分栏的页面布局方案48页眉（header）左面板页脚（foot
er）右面板嵌套的页面结构49页眉（header）页脚（footer）页面构造块网页设计具体步骤1.有多种网页的布局模型，根据实际情况选择一种合适的。2.在设计前要分析并确定网页的逻辑结构，用<div>进行界定。3.然后通过CSS规则定义出基
本块（block）的显示效果。4.使用定义好的基本块布局网页，在具体设计时要灵活应用块元素的浮动和定位方式。5.在各种版本的浏览器中进行测试。50
辽公网安备 21102102000191号
营业执照
