DIV+CSS网页制作实战第33次课(2课时)CSS导航-CSS简写-其他控制.pptxVIP

课次33课时2教具投影仪项目 项目3 网页外观制作技术任务 任务3.6 CSS导航设计、CSS简写、CSS其他控制知识点 1. CSS导航设计（35分钟） 2. CSS简写（25分钟） 3. CSS其他控制效果（30分钟）重点 CSS导航设计、CSS其他控制效果难点 无备注 上机操作90分钟/ 19知识技能目标 掌握CSS导航设计方法 熟悉CSS简写 掌握CSS其他控制效果/ 19 3．3．3 CSS导航设计 CSS导航菜单的设计主要是利用列表和超链接，再为它们设计相应的样式即可。CSS网站导航的HTML代码如下: ul li…/li li…/li … /ul ul是CSS中使用得很广泛的一种元素，主要用来描述列表型内容。每一个ul…/ul标记的内容为一个列表块，块中的每一条列表数据用li…/li标记来描述。 导航也是种列表，CSS导航可以理解为导航列表，每一个列表数据就是导航中的一个导航频道。CSS导航同样可以使用二层嵌套的div来实现，但相对ul列表显得过于复杂，因此，在简单的文字导航中，使用ul就显得更为轻巧灵活。/ 19 例如，以下的HTML代码: ul lia href=/index.asp主页/a/li lia href=/Sort/List_4.htmlDIV+CSS教程/a/li lia href=/Sort/List_5.html常用代码/a/li lia href=/List_6.html水晶图标/a/li lia href=/Sort/List_7.html幻灯图片/a/li lia href=/Sort/List_10.html软件下载/a/li lia href=/css2/css.htmlCSS2.0实用手册/a/li /ul 当不加任何样式时，显示效果如图所示：/ 19 下面为其赋予样式：　 1．为ul定义一个id； 2．指定li左浮动 float:left; 使其导航频道由纵向改为横排显示； 3．使用display:block将a链接对象由内联元素改为块级元素，使超链接布满到整个li； 4．赋予其内边距、外边距等属性，使间距合适，更加美观； 5．为增加鼠标指向的显示效果，给a链接加上伪类样式：hover。? 以上效果的样式代码如下: style type=text/css #nav {width:780px; margin:0 auto;} #nav ul {min-width:780px;} #nav li { float:left; list-style-type:none; /* 不显示圆点*/ } #nav li a { color:#ffffff; text-decoration:none; /* text-decoration:none;实现对文字上划线、下划线和删除线的设置,none表示无*/ padding-top:4px; / 19 width:90px; height:22px; text-align:center;background:#FF0000; margin-left:2px; font-size:12px; display:block;}#nav li a:hover { background-color:#000000; color:#ffffff; font-size:12px;}/style? 导航菜单列表的HTML代码如下： body ul id=nav lia href=/index.asp主页/a/li lia href=/Sort/List_4.htmlDIV+CSS教程/a/li lia href=/Sort/List_5.html常用代码/a/li lia href=/Sort/List_6.html水晶图标/a/li lia href=/Sort/List_7.html幻灯图片/a/li lia href=/Sort/List_10.html软件下载/a/li lia href=/css2/css.htmlCSS2.0实用手册/a/li /ul /body 效果如图所示：/ 19 3．3．4 CSS的简写及其他控制效果 1．CSS的简写 （1）font字体样式简写 font字体样式的传统写法如下: .font_01{ font-family:宋体; font-size:12px; font-style:italic; line-height:20px; font-weight:bold; font-variant:normal; }? 以上代码可以简写为: .font_01{ font:italic normal bold 12px/20px 宋体; }? 使用CSS简写时，不需要的参数可以使