css之导航菜单的制作
通过设置<a>的背景改变样式，通过a:hover改变交互效果，改变文字颜色color
纵向
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
ul{
list-style: none;
width: 100px;
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:15px;
}
a:hover{background-color: orangered;
color: #000;}
</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>
横向
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
ul{
list-style: none;
/* width: 100px;*/
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
li{
float: left;
}
/*给li加上浮动*/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-right:1px;
/*text-indent:15px;*/
text-align: center;
color:navajowhite;
}
a:hover{background-color: orangered;
color: #000;
}
</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>
美化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>横向导航</title>
<style>
*{
margin:0;
padding: 0;
font-size: 14px;
}
.nav{
padding-left: 100px;
height: 30px;
margin-top:20px;
border-bottom: 10px solid orange;
}
ul{
list-style: none; /* width: 100px;*/
}
/*
li{
height: 30px;
line-height: 30px;
width:100px;
background-color: dimgray;
margin-top:1px;
text-indent:10px; } /*padding-left:10px*/
/*********************关键是将<a>标签变成块级元素**************/
li{
float: left; }
/*给li加上浮动*/
a{
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width:100px;
background-color: lightgrey;
margin-right:1px;
color: black;
/*text-indent:15px;*/
text-align: center;
}
a:hover{background-color: orange; color: #ffffff;
}
</style>
</head>
<body>
<div class="nav">
<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>
css之导航菜单的制作的更多相关文章
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
- CSS之导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- 顶 企业站常用css横向导航菜单
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...
- 分类导航菜单的制作（附源码）--HTML
不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...
- CSS自适应导航菜单
以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...
- 利用Html.css OPPO手机导航菜单的制作解析
<body> <div id="top" class="auto"> <div class="nav"> ...
随机推荐
- Parallel Programming AND Asynchronous Programming
https://blogs.oracle.com/dave/ Java Memory Model...and the pragmatics of itAleksey Shipilevaleksey.s ...
- NY891 区间选点 找点
找点 时间限制:2000 ms | 内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...
- Oracle中文字符乱码？设置Oracle客户端字符编码与服务端一致
经常可能出现查询Oracle数据时,中文显示乱码,这很可能是因为,Oracle服务端的字符编码与客户端不一致引起的. 这时,我们需要做的是,如何设置自己的客户端字符编码与服务端一致. 查询Oracle ...
- 孙鑫VC++视频教程笔记
写在前面的话:在学习孙鑫老师的VC++视频时,为了加深自己对知识的深入理解,就做了下面的笔记. 第一讲: 第二讲: 第三讲: 第四讲: 第五讲: 第六讲: 第七讲: 第八讲: 第九讲: 第十讲: 第十 ...
- web.xml 基本配置
session timeout 配置 <session-config> <session-timeout>5</session-timeout> </sess ...
- c++友元函数之---一种特殊的友情
类可以允许其他类或者函数访问它的私有成员,方法是令其他类或者函数成为它的友元.如果类想把一个函数或者类声明成它的友元,只需要增加一条以friend关键字开始的声明语句即可. 友元声明只能出现在类定义的 ...
- CSS3 Transitions属性打造动画的下载按钮特效
一个网站的下载按钮应尽量吸引读者的注意. 这意味着网页设计师应该非常重视文件的下载界面.一个页面这么多的文件,如图片,视频和插件可以通过直接HTTP下载共享.许多免费网站甚至发布图标集和PSD文件供用 ...
- Linux 网络子系统之网络协议接口层（二）
这一篇主要围绕网络协议接口层的发送函数的解析 int dev_queue_xmit(struct sk_buff *skb) 函数解析 声明: /* include/linux/netdevice.h ...
- server后台程序的内存使用问题
眼下我开发的一个server后台程序存在这么一个问题,因为我的程序要不断的收发消息,并做统计.统计用的是stl的多重map.在统计中会不断的往map里赛数据. 可是每次统计后我都会调用clear()去 ...
- ftp的主动模式active mode和被动模式 passive mode的配置和区别
ftp的主动模式active mode和被动模式 passive mode的配置和区别 2017年05月08日 17:47:16 阅读数:21768 本文主要记录的是在linux上的区别,弄了一整天才 ...