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"> ...
随机推荐
- ie浏览器不兼容css媒体查询的解决办法
有些页面布局复杂,在不同分辨率下表现需要一致,这时需要用媒体查询根据不同分辨率进行百分比定位(不能用像素定位),如: @media screen and (max-width: 1600px) { . ...
- Windows mobile 下读取手机SIM卡信息(转)
Windows mobile 下读取手机SIM卡信息 c#改善 Windows mobile 下读取手机SIM卡信息
- ORACLE 仿照原表建表语法
用于: 1.修改表前,可用于对原表表结构或表数据的备份 2.仿照原表的表结构建立一张新表 CREATE TABLE T_XXXX_BAK_130810 AS SELECT * FROM T_XXXX ...
- Spark Streaming使用Kafka保证数据零丢失
来自: https://community.qingcloud.com/topic/344/spark-streaming使用kafka保证数据零丢失 spark streaming从1.2开始提供了 ...
- C++面向对象程序设计的一些知识点（4）
摘要:累继承可以实现源代码重用,模板技术也可以达到同样的目的.模板可以分为函数模板和类模板,其共同点是允许参数类进行类型化,编译器根据程序员传递的具体类型,又把函数模板实例化为具体函数,把类模板实例化 ...
- GPIO实验(一)
目标:点亮LED1.看原理图,找到对应的引脚和寄存器2.a.配置寄存器为输入/出引脚 GPFCON[9:8]=0b01 b.设置输出高/低电平 GPDAT[4]=0b0 1.预处理2.编 ...
- html+js+css+接口交互+echarts实例一枚
1. 解决了echarts的展现 2. 解决了echarts全屏幕展现(width:100%;height:100%;) 3. 解决了向接口取数据问题 <!DOCTYPE html> &l ...
- jQuery （二）DOM 操作
一般jquery在web项目的只要作用就是取值和赋值了. 下面了入门下,这些值得获取. <!DOCTYPE html> <html> <head> <meta ...
- USB 之传输编码格式 NRZI 介绍
记录NRZI (Non-Return-to-Zero Inerted code) 非归零翻转编码,之前,我先稍微记录一下他的前身. RZ 编码(Return- to - zero coding) RZ ...
- Python写自己主动化之邮件发送（匿名）
为了可以实现邮件发送功能.首先.我们须要了解一下邮件的发送过程是什么样子的,此处不再具体说明,请大家自行搜索或查看p=438">http://www.sogouqa.com/?p=43 ...