-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;} .nav li{float:left} .nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;} .nav li a.on, .nav li a:hover{background-position:0 -30px;background:#F60; color:#fff;} </style> </head> <body> <ul class="nav"> <li><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>查看全部
-
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。查看全部
-
1. 为元素创建四个相同的圆角 (1) 这一步可选输入 -webkit-border-radius: r 这里的 r 是圆角的半径大小表示为长度带单位。 (2) 输入 border-radius: r 这里的 r 是圆角的半径大小 使用与第(1)步中相同的值。 这是该属性的标准短形式语法。 2. 为元素创建一个圆角 (1) 这一步可选输入 -webkit-border-top-left-radius: r 这里的 r 是左上方圆角的半径大小表示为长度带单位。 (2) 输 入 border-top-left-radius: r这里的 r 使用与第 (1) 步中相同的值。这是该属性的标准长形式语法。注意这些步骤仅演示了如何创建左上方圆角 此外 还可以单独创建其他方位的圆角 步骤如下。 创建右上方圆角用 top-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建右下方圆角用 bottom-right 替换第 (1) 步和第 (2) 步中的 top-left 。 创建左下方圆角用 bottom-left 替换第 (1) 步和第 (2) 步中的 top-left 。 3. 创建椭圆形圆角 (1) 这一步可选输入 -webkit-border-radius: x / y 其中 x 是圆角在水平方向上的半径大小 y 是圆角在垂直方向上的半径大小均表示为长度带单位。 (2) 输入 border-radius: x / y 其中 x 和y 跟第 (1) 步中的值相等。 4. 使用 border-radius 创建圆形 (1) 输入 -webkit-border-radius: r 这里的 r 是元素的半径大小带长度单位。要创建圆形可以使用短形式的语法 r 的值应该等于元素高度或宽度的一半。 (2) 输入 border-radius: r 这里的 r 是元素的半径大小带长度单位跟第 (1) 步中的 r 相等这是标准的无前缀语法。 (注意 -webkit-border-top-left-radius: r ; 这是一个 厂商前缀)查看全部
-
圆角css代码：border-radius:4px 4px 3px 3px 顺序是左上角，右上角，右下角，左下角 兼容代码：-moz-border-radius: 15px; border-radius: 15px; 圆角菜单：border-radius; /* CSS */ background-image:url(); /* 插入图片 */ background-position: /* 图片定位 */ <style> *{margin:0;padding:0;font-size:14px;} ul { list-style: none; border-bottom: 5px solid #F60; padding-left: 30px; height: 50px; overflow: auto; } li{float:left;margin-top:20px;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 120px; background-color: #ccc; text-align: center; margin-bottom: 1px; border-radius: 5px 5px 0 0; } .on,a:hover{color:#fff;background-position:0 -30px;background:#F60;} </style> <ul> <li><a href="#" class="on">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> 通过a:hover,可以为菜单增加交互效果。查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none;} a{color:#333;text-decoration:none} .nav li{float:left;} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html> 垂直菜单改为水平菜单 li {float:left} 文本对齐方式 text-align:center 垂直菜单左浮动既是水平菜单。 li{float:left} 水平菜单居中对齐：display:block;text-align:center;查看全部
-
通过设置<li>中的float属性能将垂直菜单转变成水平菜单查看全部
-
设置水平菜单导航栏 <style> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;} li{float:left;} a{ text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; //text-indent:10px; 文本缩进 text-align:center; } a:hover{background-color:#f60;color:#fff} </style> ul的宽度去掉，把li的float设为left、就能得到水平菜单 text-align可让文本水平居中对齐 去掉ul前面的圆点 ul{list-style:none;} a标签去掉下划线：a{text-decoration:none;} 纵向垂直菜单：用无序列表构建导航菜单<ul><li><a href="#"></a></li></ul> <a>标签的设置，设置成块级元素 水平菜单跟垂直菜单一样，只需要设置li的属性float：left查看全部
-
水平菜单查看全部
-
文本缩进：text-indent:??px 将该元素转化成块级元素：display:block a标签滑动变换背景颜色及字体： a:hover{background-color:#??????;color:#???} text-indent文字缩进 display:block 将该元素转化成块级元素 display:inline-block 将该元素转化成行内块级元素查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <style type="text/css"> *{margin:0; padding:0; font-size:14px;} ul{ list-style:none; width:100px} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;} .nav li a:hover{ background-color:#F60; color:#fff} </style> </head> <body> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> </body> </html>查看全部
-
1.用无序列表构建菜单 2.垂直菜单转变为水平菜单：对其CSS样式进行重新的设置：float:left 3.在制作圆角菜单时，背景图片是贴在<a>标签上的 4.在制作改变高度的伸缩菜单时用什么技巧实现高度向上延伸：margin-top用负值 5.用JS制作水平伸缩菜单时,“this”代表当前的<a>标签查看全部
-
一般都使用 “ul\li” 来制作“菜单导航条”，也就是无序列表。查看全部
-
<ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul> <style> *{margin:0;padding:0;font-size:14px;} ul{list-style:none;width:100px;} a { text-decoration: none; display: block; height: 30px; line-height: 30px; width: 100px; background-color: #eee; text-align: center; margin-bottom: 1px; padding-left: 10px; } a:hover{ background:yellow; } </style>查看全部
-
height: 30px;line-height: 30px;可使文字垂直居中。 text-indent:文字缩进，可以使文字向右移动 ul的list-style设为none，能去掉前面的默认小圆点 a的text-decrotion设为none，能去掉链接的下划线，在导航栏中经常用 display:block使A标签变成块级元素 <a>标签的设置 ul li a｛display：block；｝ 定义的关键是将<a>标签设置为块元素 对<a>标签的使用 ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素不方便设置所以要把a设置为块级元素：ul li a{display:block;} *{ } （用于全局设置） text-decoration：none; （用于清除文本内容的下划线） text-indent（文本缩进用，text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） 块状元素才可以设置 宽度 高度 a:hover{background-color ; color文字颜色} line height10 height10 字居中 padding-left:10px; 会导致宽度也增加10px text-indent:10px; 字会向右移10px但框的宽度不会增加 text-indent//缩进 用text-indent替换padding-left是为了防止菜单长度增加。查看全部
-
用无序列表构建表单查看全部
举报
0/150
提交
取消