HTML 前端 实例与教程 4

单元6CSS3排版属性HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】6.1CSS3列表6.2CSS3隐藏6.3CSS3的display属性6.4CSS3表格6.4.1caption-side属性6.4.2表格边框属性6.4.3border-collapse属性6.4.4设置表格宽度和高度6.4.5设置表格内文字对齐方式6.4.6设置表格隔行色6.5CSS3盒子模型6.5.1padding属性6.5.2border属性6.5.3box-sizing属性6.5.4outline属性6.5.5margin属性【商业实例】“仿写淘宝首页”项目——设置样式任务一设置分类、轮播图和用户信息模块的样式任务二设置登录模块的样式【综合实训】制作介绍四大名著的Tab【单元小结】目录【学习导读】CSS3排版属性是一组用于控制和定位网页内容的属性集合。通过使用CSS3排版属性，可以实现更灵活和精确的布局效果，改变文本的外观和排列方式，创建各种视觉效果。通过排版属性可以指定文本的字体、行高、行距、对齐方式等，还可以控制元素如何与网页中的其他元素进行交互。本单元将详细介绍CSS3排版属性的使用方法。学习导读【学习目标】知识目标1．掌握有序列表和无序列表样式的设置方法。2．掌握表格样式的设置方法。3．理解CSS3盒子模型的原理。能力目标1．能够独立设置列表样式。2．能够设置表格样式。3．能够熟练运用CSS3盒子模型。素质目标1．培养学生样式组合的能力。2．培养学生的思维能力。3．培养学生的信息收集能力。学习目标思维导图6.1CSS3列表CSS3可以通过使用CSS3样式改变列表项的外观、间距和标记等，以及为列表添加特效和动画。CSS3有序列表和无序列表属性属性描述list-style简写属性，用于把所有用于列表的属性设置于一个声明中list-style-image将图象设置为列表项标记list-style-position设置列表项标志的位置list-style-type设置列表项标记的类型6.1CSS3列表列表属性可以使用list-style进行简写，但必须按照如下顺序排列。list-style-type。123list-style-position。list-style-image。如果上面的属性丢失一个，其余仍按指定的顺序排列，就没有关系。使用方法如下所示。ul{ list-style:squareinsideurl("sqpurple.gif");}6.1CSS3列表例如设置导航列表的样式，代码如下所示（实例位置：单元6/6-1.html）。运行效果6.1CSS3列表list-style-type属性值及其对应的列表项标记6.2CSS3隐藏CSS3隐藏是一种通过CSS3属性和选择器来控制元素在网页中不显示的技术。通过使用CSS3隐藏，可以在不删除元素的情况下，使其在网页上不可见，从而实现一些特定的效果或交互行为。CSS3中控制元素隐藏常用的属性有display、visibility、opacity，CSS3隐藏属性的区别如表所示。属性显示的值隐藏的值特征display除了none之外的其他值none隐藏的元素不会占用任何空间，消失visibilityvisiblehidden隐藏的元素仍需占用与未隐藏之前一样的空间，仅不可见opacity10隐藏的元素只是变透明，仅不可见通过使用CSS3隐藏技术，我们可以在网页中灵活地控制元素是否可见，从而实现特定的交互效果，如单击显示、悬停显示等。6.2CSS3隐藏例如通过display属性来控制导航菜单的显示与隐藏，当鼠标指针移入时会展开二级菜单，代码如下所示（实例位置：单元6/6-2.html）。运行效果6.3CSS3的display属性01OPTION区块元素特性总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制。02OPTION内联元素特性和相邻的内联元素在同一行。宽度（width）、高度（height）、padding-top、padding-bottom、margin-top和margin-bottom都不可改变。6.3CSS3的display属性03OPTION行内区块元素特性同行显示，行内区块元素会在同一行上依次排列，直到当前行的空间不足才会换行。行内区块元素能够设置宽度和高度，这和区块元素的特性相同。行内区块元素可以设置内边距（padding）和外边距（margin）。行内区块元素之间的HTML代码中的空白符（如空格、换行符等）会被解析为一个空格。1234行内区块元素会根据其内容的大小来调整自身的宽度和高度。56.3CSS3的display属性给<li>元素添加display:inline-block样式，使原本垂直的导航菜单水平显示，代码如下所示（实例位置：单元6/6-3.html）。运行效果6.4CSS3表格6.4.1caption-side属性caption-side属性用于设置表格标题（<caption>元素）的位置。表格标题是位于表格上方或下方的文本，用于描述表格的内容或概要信息。IE8只有指定!DOCTYPE才支持caption-side属性。caption-side属性值值描述top默认值。把表格标题定位在表格之上。bottom把表格标题定位在表格之下。6.4CSS3表格6.4.2表格边框属性表格边框属性是用于定义表格及其单元格的边框样式、宽度和颜色的一组CSS3属性。通过调整表格边框属性，可以自定义表格的边框样式、宽度和颜色，以满足不同的设计需求，实现不同的视觉效果。在CSS3中定义表格边框使用border属性，border属性是一个混合属性，由3个子属性border-width、border-style和border-color组合而成。border属性取值描述值描述border-width边框宽度，取值可以是具体的长度值（如px、em、rem等）border-style边框样式，取值必须使用预定义的关键字来指定边框的样式border-color边框颜色，取值可以使用颜色名称、十六进制颜色、RGB颜色、RGBA颜色等6.4CSS3表格6.4.2表格边框属性例如给一个表格的表头、内容分别添加边框，代码如下所示（实例位置：单元6/6-4.html）。运行效果6.4CSS3表格6.4.3border-collapse属性为了使表格只显示一层边框，可以使用border-collapse属性。border-collapse属性用于指定表格边框的合并方式，取值可以是separate（默认值），表示边框独立显示，也可以是collapse，表示相邻单元格的边框合并为一个边框。border-collapse属性取值值描述collapse该值会让相邻单元格的边框合并为一条边框separate该值会让相邻单元格的边框保持独立，每个单元格都有独立的边框inherit该值会让元素继承其父元素的border-collapse属性值6.4CSS3表格6.4.3border-collapse属性设置表格的border-collapse属性，让表格只显示一层边框，代码如下所示（实例位置：单元6/6-5.html）。运行效果6.4CSS3表格6.4.4设置表格宽度和高度width和height属性分别用于定义表格整体或单元格的宽度和高度，通过设置这些属性，可以控制表格的整体大小以及单元格的尺寸。例如设置表格的宽度为200px，高度为100px，单元格高度为50px，代码如下所示（实例位置：单元6/6-6.html）。运行效果6.4CSS3表格6.4.5设置表格内文字对齐方式可通过CSS3属性来控制表格中文字的对齐方式，有text-align和vertical-align两种属性。使用text-align属性设置水平对齐方式，取值可以为left（左对齐）、right（右对齐）、center（居中对齐）或justify（两端对齐）。使用vertical-align属性设置垂直对齐方式，取值可以为top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）或baseline（基线对齐）。0102036.4CSS3表格6.4.5设置表格内文字对齐方式例如将表格内的文字设置为水平方向右对齐，垂直方向底部对齐，代码如下所示（实例位置：单元6/6-7.html）。运行效果6.4CSS3表格6.4.6设置表格隔行色可通过CSS3样式来为表格的奇偶行设置不同的背景色，以增强表格的可读性和视觉效果。设置表格隔行色的属性值描述:nth-of-type(odd)设置奇数行:nth-of-type(even)设置偶数行:nth-child

(odd)设置奇数行:nth-child

(even)设置偶数行:nth-child

(2n+1)设置奇数行:nth-child

(2n)设置偶数行6.4CSS3表格6.4.6设置表格隔行色将表格奇数行背景色设置为蓝色，偶数行背景色设置为绿色，3的倍数列背景色设置为红色，代码如下所示（实例位置：单元6/6-8.html）。6.4CSS3表格6.4.6设置表格隔行色运行效果6.5CSS3盒子模型CSS3盒子模型（boxmodel）用于布局和定位HTML元素。它将每个元素看作一个矩形的盒子，包括内容、内边距、边框、轮廓和外边距等部分。6.5CSS3盒子模型6.5.1padding属性padding属性用于定义元素边框与元素内容之间的空间，可以设置为透明或具有背景颜色。padding是一个融合属性，由padding-top、padding-right、padding-bottom和padding-left等几个子属性组合而成padding子属性属性说明padding-bottom设置元素的底部填充padding-left设置元素的左部填充padding-right设置元素的右部填充padding-top设置元素的顶部填充6.5CSS3盒子模型6.5.1padding属性在CSS3中，可以单独设定不同方向的不同数值的内边距，如下所示。padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;当使用padding属性设置一个数值时，代表所有方向的内边距都是一样的，例如设置内边距为25px，代码如下。padding:25px;6.5CSS3盒子模型6.5.1padding属性当只设定两个数值时，表示上下内边距是一样的，左右内边距是一样的，例如设置上下内边距为25px，左右内边距为50px，代码如下。padding:25px50px;当只设定3个数值时，依次表示上内边距、左右内边距和下内边距，例如设置上内边距为25px，左右内边距为50px，下内边距为75px，代码如下。padding:25px50px75px;当设定4个数值时，依次代表上内边距、右内边距、下内边距和左内边距。例如设置上内边距为25px，右内边距为50px，下内边距为75px，左内边距为100px，代码如下。padding:25px50px75px100px;6.5CSS3盒子模型6.5.1padding属性设置一个元素的上内边距为80px，左右内边距为10%，下内边距为100px，代码如下所示（实例位置：单元6/6-9.html）。运行效果6.5CSS3盒子模型6.5.2border属性border属性用于定义元素的边框样式、宽度和颜色等。border属性也是一个融合属性，由几个子属性构成。border子属性属性描述border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为

4

个边分别设置颜色。border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。6.5CSS3盒子模型6.5.2border属性border子属性属性描述border-left简写属性，用于把左边框的所有属性设置到一个声明中。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。border-right简写属性，用于把右边框的所有属性设置到一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。border-top简写属性，用于把上边框的所有属性设置到一个声明中。border-top-color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。6.5CSS3盒子模型6.5.2border属性border-style属性用来设置边框的样式，取值可以为none（无边框）、solid（实线边框）、dashed（虚线边框）、dotted（点线边框）等。border-style属性取值值描述none默认值，无边框dotted点线边框dashed虚线边框solid实线边框double双线边框。双线的宽度等同于

outline-width

的值groove3D

凹槽边框。此效果取决于

outline-color

值ridge3D

凸槽边框。此效果取决于

outline-color

值inset3D

凹边边框。此效果取决于

outline-color

值outset3D

凸边边框。此效果取决于

outline-color

值inherit从父元素继承边框样式的设置6.5CSS3盒子模型6.5.2border属性border-radius属性用来设置边框的圆角半径，可以使用具体的长度值来指定圆角半径，实现圆角边框效果，示例代码如下。border-radius:左上角右上角右下角左下角;给不同元素分别设置不同边框，代码如下所示（实例位置：单元6/6-10.html）。6.5CSS3盒子模型6.5.2border属性运行效果6.5CSS3盒子模型box-sizing是一个CSS属性，用于控制元素的盒模型计算方式。它决定了元素的内容、内边距和边框的尺寸计算方式，即是否包括内边距和边框的尺寸。box-sizing属性值有content-box、border-box和inherit，如下所示。6.5.3box-sizing属性box-sizing:content-box|border-box|inherit:box-sizing属性值的含义值说明content-box指定元素的宽度和高度不包含元素的padding和borderborder-box指定元素的宽度和高度包含元素的padding和borderinherit代表使用父元素的盒模型计算方式6.5CSS3盒子模型outline是一个CSS3属性，用于设置元素的轮廓样式。轮廓是绘制在元素周围的一条线，类似于边框，但不占用布局空间，可起到突出元素的作用。6.5.4outline属性outline子属性属性说明outline-color设置轮廓的颜色outline-style设置轮廓的样式outline-width设置轮廓的宽度6.5CSS3盒子模型6.5.4outline属性outline-style属性值值描述none默认值。无轮廓dotted点状的轮廓dashed虚线轮廓solid实线轮廓double双线轮廓。双线的宽度等同于

outline-width

的值groove3D

凹槽轮廓。此效果取决于

outline-color

值ridge3D

凸槽轮廓。此效果取决于

outline-color

值inset3D

凹边轮廓。此效果取决于

outline-color

值outset3D

凸边轮廓。此效果取决于

outline-color

值inherit规定应该从父元素继承轮廓样式的设置6.5CSS3盒子模型6.5.4outline属性给不同元素分别设置不同轮廓，代码如下所示（实例位置：单元6/6-11.html）。运行效果6.5CSS3盒子模型margin属性用于定义元素周围的空间，以及控制元素与其他元素之间的距离。6.5.5margin属性margin子属性属性描述margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin-right设置元素的右外边距margin-top设置元素的上外边距6.5CSS3盒子模型通过margin属性可以单独改变元素的上、下、左、右外边距，也可以一次改变所有的外边距。margin属性的值可以是具体的像素值。也可以是百分比。6.5.5margin属性margin属性值值说明auto代表根据浏览器自动分配边距length设置固定长度的边距（像单位，如px、em等）%使用百分比单位来设置边距6.5CSS3盒子模型可以单独设定不同方向的外边距，例如设置上外边距是100px，下外边距是100px，左外边距是50px，右外边距是50px，代码如下。6.5.5margin属性margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;也可以使用属性margin指定所有边距，只设定一个数值代表4个方向的外边距数值是一样的。例如设置4个方向的外边距都是25px，代码如下。margin:25px;6.5CSS3盒子模型当只设定两个数值时，表示上下外边距是一样的，左右外边距是一样的，例如设置上下外边距为25px，左右外边距为50px，代码如下。6.5.5margin属性margin:25px50px;当只设定3个数值时，依次表示上外边距、左右外边距和下外边距。例如设置上外边距为25px，左右外边距为50px，下外边距为75px，代码如下。margin:25px50px75px100px;margin:25px50px75px;当设定4个数值时，依次代表上外边距、右外边距、下外边距和左外边距。例如设置上外边距为25px，右外边距为50px，下外边距为75px，左外边距为100px，代码如下。6.5CSS3盒子模型6.5.5margin属性制作一个盒子模型，包括内外边距、边框和宽高属性，代码如下所示（实例位置：单元6/6-12.html）。运行效果【商业实例】“仿写淘宝首页”项目——设置样式任务一设置分类、轮播图和用户信息模块的样式01OPTION样式分析右侧需要设置用户信息模块的背景颜色、宽高和外边距等属性；设置轮播图模块可视区域的宽高、超出隐藏属性、图片左浮动布局排列，以及图片的圆角边框属性。用户信息模块采用grid布局，依次从上往下排列，同时设置宽高属性，设置头像区域的背