-
分类导航菜单的制作(附源码)--HTML
不多说,直接贴代码哈!有疑问,可追加评论哈!
demo.html:
<!DOCTYPE html>
<html>
<head>
<title>分类导航菜单</title>
<meta charset="utf-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link href="css/demo.css" rel="stylesheet" text="text/css"/>
</head>
<body>
<nav>
<ul>
<li></li>
<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>
<li><a href="#">商务合作</a></li>
<li><a href="#">教育培训</a></li>
<li><a href="#">创业专区</a></li>
</ul>
</nav>
</body>
</html>
demo.css:
@CHARSET "UTF-8";
*{padding:0;margin:0;}
nav{border:1px solid #BCFF1D;font-size:12px;background:#D6FF8C url(../images/background.gif)
no-repeat top left;float:left;height:128px;}
nav ul{list-style:none;312px;margin:2px;}
nav ul li{104px;float:left;height:45px;text-align:center;line-height:35px;}
nav ul li a{background:url(../images/menu.gif) no-repeat;display:block;text-decoration:none;color:black;padding-left:18px;}
nav ul li a:hover,nav ul li a:active{background-position:0px -55px;color:#ff3300;font-weight:bold;}
Effect picture:
-
相关阅读:
解决Android SDK Manager更新、下载速度慢
selenium报错以及各解决方法
webdriver对各种浏览器的支持
selenium driver版本和Chrome浏览器版本对应关系
selenium web driver
js中变量注意事项
js选项卡实现
两种JS方法实现斐波那契数列
三种JS方法确定元素在数组中的索引值
javascript内置属性——arguments
-
原文地址:https://www.cnblogs.com/qikeyishu/p/7666008.html
Copyright © 2020-2023
润新知