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"> ...
随机推荐
- angular学习笔记(十一)-表达式
本篇只要介绍angular表达式: 在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情: 比如: {{number}} 也可以是: {{number+ ...
- 移动端自动化测试 -- appium 之Desired Capabilities与 定位控件
一.Desired Capabilities Desired Capabilities 在启动 session 的时候是必须提供的. Desired Capabilities 本质上是以 key va ...
- Install haroopad on centos7
1.Install libs sudo yum install systemd-libs -y 2.Download haroopad goto haroopad1 download bin pack ...
- ORACLE 仿照原表建表语法
用于: 1.修改表前,可用于对原表表结构或表数据的备份 2.仿照原表的表结构建立一张新表 CREATE TABLE T_XXXX_BAK_130810 AS SELECT * FROM T_XXXX ...
- 五、String在Java中是传“引用”
这个是Java的经典问题.许多类似的问题在stackoverflow被提问,有很多不正确或不完备的答案.如果不想太多你会认为这个问题比较简单.( The question is simple if y ...
- C++构造函数的调用
C++中类的构造函数的调用有四种形式 C++中对象的实例化有四种情况: 1.调用默认构造函数. 2.隐式调用构造函数 3.显示调用构造函数 4.使用new操作符 如图所示,前三种在对象的作用域之外就会 ...
- 【转】批量删除redis中的key
1. DEL 直接加键名称 DEL key1 key2 key3 127.0.0.1:6379> DEL site_msg_99973 false site_msg_99974 fals ...
- eclipse 集成 github
1.eclipse markketplace 搜索 egit 安装 next next ........ 安装好之后restart 2.开始配置git插件 配置git有2中方式 1.使用http ...
- maven项目install时候一直报错，检查Maven-javadoc-plugin声明错误（Java 8 配置Maven-javadoc-plugin）或者是：警告: @throws 没有说明
在升级JDK至1.8之后,使用Maven-javadoc-plugin插件打包报错,[ERROR] Failed to execute goal org.apache.maven.plugins:ma ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...