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"> ...

随机推荐

TransitiveClosure
http://acm.nudt.edu.cn/~twcourse/TransitiveClosure.html https://en.wikipedia.org/wiki/Closure_(mathe ...
WCF transport-and-message-security
Things to Consider When Implementing a Load Balancer with WCF https://msdn.microsoft.com/library/hh2 ...
MFC图形编辑器
前言 vs2015竟然可以完美打开工程,哈哈可以直接生成类图了.由于内容较多,所以根据内容的重要性会安排详略. https://github.com/bajdcc/GraphEditor/releas ...
WPF学习之X名称空间详解
X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的.用来引导XAML代码将XAML代码编译为CLR代码. 4.1X名称空间里面到底都有些什么? x名称空间映射的是:htt ...
vue自动化单元测试
// 引用vue和需要测试的组件 import Vue from 'vue' import HelloWorld from '@/components/HelloWorld' // 创建测试套件,一个 ...
LeetCode: Roman to Integer 解题报告
Roman to IntegerGiven a roman numeral, convert it to an integer. Input is guaranteed to be within th ...
字符串copy推导演变
#include <stdio.h> #include<string.h> /*基本水平*/ void mycopy1(char *des,char * sou) { unsi ...
多核CPU上python多线程并行的一个假象
GIL 与 Python 线程的纠葛 GIL 是什么东西?它对我们的 python 程序会产生什么样的影响?我们先来看一个问题.运行下面这段 python 程序,CPU 占用率是多少? # 请勿在工作 ...
TOMCAT源码分析——生命周期管理
前言从server.xml文件解析出来的各个对象都是容器,比如:Server.Service.Connector等.这些容器都具有新建.初始化完成.启动.停止.失败.销毁等状态.tomcat的实现提 ...
CenOS6.5下源码安装vim-7.4
1.[下载] vim-7.4下载地址: ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 2.[解压] tar jxvf vim-7.4.tar.bz2 之 ...

css之导航菜单的制作

css之导航菜单的制作的更多相关文章

随机推荐

热门专题