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"> ...
随机推荐
- 中间件监控之tomcat
中间件主要目的:能够支持更多人去访问 一.Tomcat 介绍 Tomcat 是一个小型的轻量级应用服务器,当配置正确时,Apache 为HTML页面服务,而Tomcat 实际上运行JSP页面和Serv ...
- 李洪强iOS之集成极光推送二iOS 证书 设置指南
李洪强iOS之集成极光推送二iOS 证书 设置指南 创建应用程序ID 登陆 iOS Dev Center 选择进入iOS Provisioning Portal. 在 iOS Provisioning ...
- CSS里有哪些常见的块级元素和行内元素以及其区别？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- pyv8使用总结
在使用python爬虫的过程中,难免遇到要加载原网站的js脚本并执行.但是python本身无法解析js脚本. 不过python这么猛的语言,当然设置了很多方法来执行js脚本.其中一个比较简单的方法是使 ...
- HTML5的video虽然可用controls来展示控件
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制.下面是一个小例子. 当 ...
- 适配器模式和外观模式（head first设计模式——6）
为什么要把适配器模式和外观模式放在同一篇文章中,主要是其相对前面的几个模式来讲会简单些并且具有相似之处.下面就分别通过例子来看理解一下两种模式,然后再进行对其进行比较. 一.适配器模式 1.1适配器模 ...
- linqtosql 实现数据分页
cs代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst ...
- if的另一个实现思路
在一些场景中需要根据根据一个传入的额值来做不同的处理,而且if有很多层,此时如果一直写if代码就会雍容.一种比较好的方法就是写一个map列出与if对应的情况,然后map的value就能放一些方法或者其 ...
- 【WPF】ListBox使用DataTemplate 以及默认选中第一项Item
ListBox中DataTemplate的用法如下 . <ListBox x:Name="areaLB" ItemsSource="{Binding AreaNum ...
- C语言 · 高精度乘法
算法提高 高精度乘法 时间限制:1.0s 内存限制:256.0MB 问题描述 在C/C++语言中,整型所能表示的范围一般为-231到231(大约21亿),即使long long型,一 ...