html5制作导航条
(1)background-repeat:no-repeat;图片不平铺
(2)使用<ul>和<li>便签,代码简介有序、易于编排。
(3)在引入外部css文件时,<link>标签中的rel是关联的意思,rel="stylesheet";
(4)display:inline;实现使多个<div>像<span>标签显示在一行。
(5)list-style:none;列表样式:无。 用于在一个声明中设置列表的所有属性的简写属性。涵盖了所有其他列表样式属性,仅作用于具有display值为list-item的对象(如li对象)。
(6)text-decoration:none;无值;underline定义文本下的一条线;overline定义文本上的一条线;line-through定义穿过文本下的一条线;blink定义闪烁的文本。
(7)outline:none;为不设置边框;语法:Object.style.outline = outlineWidth outlineStyle outlineColor 设置边框宽、样式、颜色。
(8)target="_self" <a>标签内设置,本页面打开;target="_blank"新打开一个页面
(9)定义伪类链接,鼠标经过更改颜色或其他a:hover{color:#abcdef;}
test.css
body{
margin:0px;
background-image:url(images/body.jpg);
background-repeat:no-repeat;
width:1003px;
} nav{
float:left;
width:920px;
height:40px;
background-image:url(images/students.jpg);
margin:100px 0 0 0;
padding:;
} nav ul{
float:left;
margin:0px;
padding:0 0 0 0;
width:920px;
list-style:none;
}
nav ul li{
display:inline;
}
nav ul li a{
float:left;
padding:12px 40px;
text-align:center;
font-size:14px;
background:url(images/user.png) center right no-repeat;
color:#fff;
font-family:Tahoma;
outline:none;
} nav li a:hover{
color:#2a5f00;
}
html内容
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<link href="CSS/test.css" rel="stylesheet" type="text/css" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<header>
<nav>
<ul>
<li><a href="#" title="首页" target="_self">首页</a></li>
<li><a href="#" title="首页" target="_self">男男女女</a></li>
<li><a href="#" title="首页" target="_self">急急急</a></li>
<li><a href="#" title="首页" target="_blank">呸呸呸</a></li>
</ul>
</nav>
</header>
</body>
</html>
html5制作导航条的更多相关文章
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- css 制作导航条布局
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- ps制作导航条 分割线技巧
1 用矩形工具画一个像素的矩形(注意不是路径) 2给矩形添加蒙版,用渐变工具对其进行渐变,达到两头渐隐藏的效果. 制作按钮技巧 用矩形工具画出矩形 然后给矩形添加 内发光 渐变叠加 光泽 描边等操作 ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- Bootstrap_导航条
一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- Bootstrap学习-导航条-分页导航
1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 为PHP7安装Windows Server 2012 R2过程记录
因为要安装php-7.0.6-Win32-VC14-x64,需要先安装vcredist2015_x64_14.0.23026.0. 之前安装了Windows Server 2012 R2后,一直无法成 ...
- 怎样将本地web项目部署到腾讯云服务器上?
怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...
- 【ArcGIS】安装ArcEngine 10的顺序
Step1.安装VS 2010Step2.安装ArcGIS Desktop(不可跳过这步),如果直接安装ArcEngine,将出现如下错误提示因此必须首先安装ArcGIS Desktop或者ArcGI ...
- 控件布局_TableLayout
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" ...
- eclipse+tomcat测试连接时候HTTP Status 404错误
想要在eclipse里部署tomcat,结果tomcat单独可以通过连接测试,用eclipse就404了 404肯定都是目录不对,试了半天在eclipse下改了一下配置和文件位置就行了 1.先在菜单栏 ...
- php单例模式实现对象只被创建一次
这是我在php面试题中遇到的一道试题,单例模式按字面来看就是某一个类只有一个实例,这样做的好处还是很大的,比如说数据库的连接,我们只需要实例化一次,不需要每次都去new了,这样极大的降低了资源的耗费. ...
- MySQL主从同步原理
mysql主从复制用途 实时灾备,用于故障切换 读写分离,提供查询服务 备份,避免影响业务 主从部署必要条件 主库开启binlo日志(设置log-bin参数) 主从server-id不同 从库可以连同 ...
- mybatis多数据源切换
文章转自https://yq.aliyun.com/articles/188540?t=t1 https://www.liaoxuefeng.com/article/00151054582348974 ...
- 类似Visual Studio一样,使用Qt Creator管理多个项目,创建子项目
1. 简介 QtCreator是一个十分好用的跨平台IDE,由于最近需要在Windows和Mac同时写一个C++的代码,使用VS和XCode不能实现项目的统一管理(可以使用cmake来组织源码,但是每 ...
- 大功率DC-DC方案
三端稳压芯片只适合于小功率器件的直流稳压(电流<1A):如7805,这个电路是可以应付大多数情况的: 如果出现大功率的器件就需要采用新的稳压方案,可以参考下图方案: https://www.bi ...