导航条菜单的制作_学习笔记

首页免费课导航条菜单的制作笔记

导航条菜单的制作

最热最新

左岸16

<!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 } ul{ list-style: none; } .nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;} .nav li { float: left; position:relative; height:30px; width:120px } .nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; } .subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden} .subNav li a{ background:#ddd } .subNav li a:hover{ background:#efefef} </style>

查看全部

0 采集收起来源：编程挑战
2018-03-22
是王江山

float：left

查看全部

0 采集收起来源：编程练习
2016-05-07
是王江山

text-decoration:none//去下划线 display：block//成块 text-indent锁进

查看全部

0 采集收起来源：编程练习
2016-05-07
bobobill

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}鼠标经过样式

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-06
小菜地

渐变背景-

查看全部

0 采集收起来源：编程练习
2016-05-06
文小

文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block}

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-06
慕粉1461599522

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{} 时间: 2016-01-06

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-05
被淹死的鱼56

1.清除定时器clearinterval2.设定定时器:setinterval3.建立宽度:setoffwidth

查看全部

0 采集收起来源：编程练习
2016-05-05
倔强的小瓶盖

基本的样式清除： *{margin:0;padding:0} 无序列表圆点去除： ul{list-style:none} 下划线去除： a{text-decoration:none} 文本缩进标签 text-indent 不会影响总体宽度（padding会）需要将a标签设置为块元素，才能设高宽、hover效果代码：a{display:block} hover格式 a:hover{}

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-05
hgliuxiong

<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{float:left; margin-top:20px;} a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px; margin-top:-10px;} </style>

查看全部

0 采集收起来源：编程练习
2018-03-22
六月湮风华

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
龙猫上的橡宝子 01:53

伸缩菜单：➖原先的圆角背景效果。➕为hover添加margin－top：负值（向上拉伸）；设置比原先高的高度；这时文字也会向上平移，设置文字垂直居中line－height：背景高度

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-05-05
龙猫上的橡宝子

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如需对<ul> 进行整体的背景设置，首先要给<ul>定义宽和高

查看全部

0 采集收起来源：练习题
2018-03-22
龙猫上的橡宝子 03:11

通过设置背景，改变外观样式<br> 通过a：hover，可以增加交互效果圆角水平菜单：➕底部装饰线border-bottom:5px solid #f60。➕圆角背景，设置a标签的长宽跟圆角背景一样，background：图片地址。➕首个圆角背景变色，为a标签添加class＝on，添加on的样式background-position:0 -30px;及颜色

查看全部

0 采集收起来源：圆角菜单的制作
2018-03-22
龙猫上的橡宝子 00:38

从垂直菜单到水平菜单，添➕浮动（float:left），➖垂直的宽度

查看全部

0 采集收起来源：水平菜单的制作
2016-05-05