程序博客网 > 淘宝怎么投诉别人盗图

html+css 菜单的制作

来源：互联网 发布：淘宝怎么投诉别人盗图 编辑：程序博客网 时间：2024/05/02 01:47

1、垂直菜单

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>垂直菜单</title>
<style>
*{ margin:0px;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:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ background-color:#F60;color:#fff;}
</style>
</head>
<body>
<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>
</body>
</html>


2、水平菜单

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;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-align:center;}
a:hover{ background-color:#F60;color:#fff;}
</style>
</head>
<body>
<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>
</body>
</html>

3、圆角菜单

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-style:none;height:50px; border-bottom:5px solid #f60;}
li{float:left; margin-top:20px;}
a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ color:#fff; background-position:0 0px; background:url(%E6%9C%AA%E5%91%BD%E5%90%8D_meitu_1.jpg)}
</style>
</head>
<body>
<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>
</body>
</html>

在google chrome上可以

4、伸缩菜单

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-style:none;height:50px; border-bottom:5px solid #f60;}
li{float:left; margin-top:20px;}
a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ color:#fff; background-color:#F60;height:40px;line-height:40px; margin-top:-10px; vertical-align:middle;}
</style>
</head>
<body>
<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>
</body>
</html>

5、水平伸缩动画

5.1(通过js实现，鼠标离开后长度恢复)

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-style:none;height:50px; border-bottom:5px solid #f60;}
li{float:left; margin-top:20px;}
a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ color:#fff; background-color:#F60;}
</style>
<script>
 window.onload=function(){
  var aA=document.getElementsByTagName('a');
  for(var i=0;i<aA.length;i++){
   aA[i].onmouseover=function(){
    clearInterval(this.time);
    var This=this;
    This.time=setInterval(function(){
     This.style.width=This.offsetWidth+8+"px";
     if(This.offsetWidth>=120){
      clearInterval(This.time);
      }
     },30)
    }
   
   aA[i].onmouseout=function(){
    clearInterval(this.time);
    var This=this;
    This.time=setInterval(function(){
     This.style.width=This.offsetWidth-8+"px";
     if(This.offsetWidth<=100){
      This.style.width="100px";
      clearInterval(This.time);
      }
     },30)
    }
  }
  }
</script>
</head>
<body>
<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>
</body>
</html>

5.2通过jquery插件实现，比上面简单多了

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>水平菜单</title>

<style>

*{ margin:0px;padding:0; font-size:14px;}

ul{ list-style:none;height:50px; border-bottom:5px solid #f60;}

li{float:left; margin-top:20px;}

a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}

a:hover{ color:#fff; background-color:#F60;}

</style>

<script type="text/javascript" src="jquery-2.2.4.min.js"></script>

<script>

$(function(){

$('a').hover(

function(){

$(this).stop().animate({"width":"160px"},200);

},

function(){

$(this).stop().animate({"width":"100px"},200);

}

)

})

</script>

</head>

<body>

<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>

</body>

</html>

 

 






0 0
淘宝怎么投诉别人盗图 淘宝怎么投诉别人盗图
原创粉丝点击
热门IT博客
网站数据备份网站数据备份
周群上海数据港周群上海数据港
thunder mac
马鞍山网络电视大学
传奇可视数据库编辑器
vb识别网站验证码源码
mvn怎么编译java项目
女性职场歧视 知乎
磁头坏了 数据恢复
java包如何使用
centos debian 比较
己知功率和电压求电流
新浪财经股票数据接口
快恋网软件
mac用itunes制作铃声
directx游戏编程 书籍
高光谱遥感数据的特点
淘宝开店怎么开
微信数据可以清理吗
手机淘宝店怎么改地址
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 羽毛球拍选什么牌子好 尤尼克斯羽毛球拍型号 羽毛被 羽毛球鞋排行榜 双人羽毛球 羽毛球拍手柄 羽毛球计分器 ks15羽毛球 打羽毛球的作文 羽毛球哪个牌子好 小羽毛 苏菲小翅膀 有翅膀的小恶魔简笔画 小翅膀符号可复制 特殊符号小翅膀 小翘鼻图片 韩式小翘鼻适合哪种人 翠花上酸菜 翠花酸菜 玻璃翠花 慕容翠花作品 翠花丑女图片 翠花什么意思 翠花和驴全集阅读 翠花和黑驴电子书 玻璃翠花图片 翠花的六十年代 翠花的种田农家生活 植翠园花肌萃面膜 翠花的种田农家生活 卿卿喵 翻茄社区 翻茄社区下载 惹火小辣妻老公求放过 老公小 小老头 小老头狗叫什么 在学校开小卖部的老头 小卖部老头的幸福生活 小卖部的老头鸟儿真大 平凡修仙 神秘小老头 战场杀戮 糊涂小老头

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里