html实现导航栏效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导肮栏</title>

/*导航栏样式开始*/
<style>
ul{
height:60px;
list-style: none;
}
li{
padding: 15px;
width: 100px;
display: inline-block;
float: left;
background-color: darkred;
}
li a{
display: inline-block;
float: left;
color: #fff;
text-indent: 10px;
text-decoration:none;
}
</style>

/*导航栏样式结束*/
</head>
<body>
<!--导航栏开始-->
<div>
<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>
</div>
<!--导航栏结束-->
</body>
</html>

原文地址:https://www.cnblogs.com/yanpingping/p/10419826.html

时间: 2024-10-16 23:58:57

html实现导航栏效果的相关文章

PagerSlidingTabStrip实现网易新闻导航栏效果

PagerSlidingTabStrip实现网易新闻导航栏效果之前在项目当中有一个需求,实现类似网易新闻标题导航的效果,于是在在github搜索下,找了一个开源PagerSlidingTabStrip,研究了这个空间的使用和一些方法,在此与大家分享,希望能够帮到有需要的朋友,好了废话不多讲,直接上代码. package com.example.textpagerslidingtabstrip.activity; import com.example.textpagerslidingtabstri

php实现三级导航栏效果

首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array( 'three_tit' => '企业荣誉', 'three_cont' => array(

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

jquery实现导航栏效果

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <div class="box"> <ul class="menu"> <li

网页定位 - 右侧导航栏效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页定位导航效果</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 body{ 13 font-size: 12px; 14 line-height: 1

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

css3制作炫酷导航栏效果

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

css3制作炫酷导航栏效果 &lt;转&gt;

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

html表单——使用frameset写一个导航栏效果

主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--frameset 说明:1.frameset不能潜入在body标签里面,只能嵌入在html标

jQuery实现侧边导航栏效果

效果图: 以下是完整代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="JS代码,侧边菜单,拉出菜单,高级菜单,导航菜单,jquery菜单" /><met