<!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:0px; padding:0px; font-size:20px;}
ul{ list-style:none;
width:110px;}
a{ display:block; text-decoration:none; height:30px;
background:#666; margin-bottom:1px; text-indent:10px;}
a:hover{
display:block; text-decoration:none; height:30px; background:#F00;
margin-bottom:1px;
text-indent:10px;}
</style>
</head>
<body>
<ul><li><a>123</a></li><li><a>123</a></li><li><a>123</a></li><li><a>123</a></li><li><a>123</a></li><li><a>123</a></li><li><a>123</a></li></ul>
</body>
</html>
简单导航栏的效果
时间： 2024-08-03 15:33:44
简单导航栏的效果的相关文章
jquery实现简单的导航栏切换效果($(this).index)
一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现 html代码: <div class="container"> <ul class="top-nav"> <li class="nav">html</li> <li class="nav">css</li> <li class="nav"&g
用CSS制作简单导航栏
纯css实现的简单导航栏. 前端开发基础中的基础.. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏练习-01</title> <style type="text/css"> /* ul与div样式 */ #nav ul{ list-style-type: none; display: inl
通过html和css做出下拉导航栏的效果
引用前请标明出处:http://www.cnblogs.com/zkhzz/ 谢谢 通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">hao123</a&g
手机端左侧固定导航栏推出效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-
css制作最简单导航栏
css制作最简单导航栏 (1)先建一个列表: <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">新浪</a></li> <li><a href="#"&
jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m
Android 自定义组合控件 简单导航栏
最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件. 先上图: 导航栏包括: 返回按钮 标题 右侧按钮(功能不确定) 首先是布局文件,如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res
MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/home.html" class="mui-tab-item mui-active" id="defaultTab"> <span class="mui-icon iconfont icon-shouye"></span
<ul>标签设计简单导航栏
当我们刚开始学习html/css的时候,对于padding .float.行内元素.块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用. 1.首先我们创建一个大的容器,用来固定我们的nav在屏幕上展示 我们给它设置一个宽度和背景色. 2.我们设置nav的<div>标签属性,并让他依据它的父元素container给它居中显示. 这里的nav我们给它一个width和height. 3.我们再设置<ul>的属性,因为它是nav里面文字总的一个宽度,我们对它