好久没写博客了，主要是懒得呼气都不想呼，上周分给我一个新的任务，就是自己新建一个系统，快速极限开发，虽然之前自己也做过小的系统，但毕竟是自己做，随着自己的心意做，没有做其他的限制等，现在呢是给公司做，所以在质量上是绝对要比自己一个人做着玩要高。上周算是把框架搭起来来，今天上午熟悉下需求，下午的时候把数据库中关键的几个表设计了一下，明天就要往框架里面搬砖了，华为那边还说要两周搞定，word 哥啊，压力山大，不过这几天学的东西也挺多的，之前做的项目是用webform做的，框架也是传统的三层，现在的这个是采用MVC+EasyUI+Mysql,数据库MySql、EasyUI之前也只算是了解，并没真正意思的用到真实的项目中，用过类似的ligerui。所以还是有好多新的知识要学的，比如C#操作MySql、NPOI操作Excel、框架搭建等，不过还好同事们小伙伴们也都很热情，也乐于分享知识，有好多问题都是小伙伴帮忙解决的。

------------------------------------------华丽分割线-----------------------------------------------------

一、为什么要写这篇博客?

上面也说了，自己一个人搞一个网站，从前端到数据库设计再到代码实现，压力不小，这几天在家里也是在想项目的事情。明天有一个页面就是要用到按钮导航，之前也看了些视频了解过ul、li的使用，没想到明天还真用到了，所以今天记录下来，明天也好快速实现。最主要的是华为黄区不能访外网，顶多能使用博客园，正好记录在博客园，一举两得吧。

二、具体实现

CSS

/* ul li以横排显示 */

/* 所有class为menu的div中的ul样式 */

div.menu ul

{

    list-style:none; /* 去掉ul前面的符号 */

    margin: 0px; /* 与外界元素的距离为0 */

    padding: 0px; /* 与内部元素的距离为0 */

    width:auto; /*宽度根据元素内容调整*/

}

/* 所有class为menu的div中的ul中的li样式 */

div.menu ul li

{

    float:left; /* 向左漂移，将竖排变为横排 */

    width:200px;

}

/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */

div.menu ul li a, div.menu ul li a:visited

{

    background-color: #465c71; /* 背景色 */

    border: 1px #4e667d solid; /* 边框 */

    color: #dde4ec; /* 文字颜色 */

    display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */

    line-height: 1.35em; /* 行高 */

    padding: 4px 20px; /* 内部填充的距离 */

    text-decoration: none; /* 不显示超链接下划线 */

    white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */

    margin-left:10px;

    text-align: center;

    }

/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */

div.menu ul li a:hover

{

    background-color: #bfcbd6; /* 背景色 */

    color: #465c71; /* 文字颜色 */

    text-decoration: none; /* 不显示超链接下划线 */

}

/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */

div.menu ul li a:active

{

    background-color: #465c71; /* 背景色 */

    color: #cfdbe6; /* 文字颜色 */

    text-decoration: none; /* 不显示超链接下划线 */

}

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>横向有立体感的CSS按钮式菜单</title>

 <link href="default.css" rel="stylesheet" type="text/css" />

</head>

<style>

</style>

<body >

<div class="menu">

        <ul>

            <li><a href="javascript:void(0);">项目</a></li>

            <li><a href="javascript:void(0);">假设</a></li>

            <li><a href="javascript:void(0);">构建</a></li>

            <li><a href="javascript:void(0);">实验</a></li>

        </ul>

    </div>

</body>

</html>

三、效果

四、问题

上面基本能实现导航按钮，想着在导航按钮下面添加一个div来放表单数据，但是问题出现了。

<body >

<div class="menu">

        <ul>

            <li><a href="javascript:void(0);">项目</a></li>

            <li><a href="javascript:void(0);">假设</a></li>

            <li><a href="javascript:void(0);">构建</a></li>

            <li><a href="javascript:void(0);">实验</a></li>

        </ul>

    </div>

	<div style="background-color:red;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

</body>

　　

从上面的图可以看到，红色的在导航按钮的底部而不是下部。此时就需要用到另外的一个属性.clear

<div style="background-color:red;clear:both;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

　　

ul、li实现横向导航按钮的更多相关文章

  1. ul li做横向导航栏例子

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  2. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  3. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  4. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  5. ul li自适应居中导航

    <BODY> <div class="box"> <ul class="nav"> <li>邮箱管理</l ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  8. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  9. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

随机推荐

  1. Rac grid用户启停监听报错无权限

    [grid@max1 ~]$ lsnrctl stop LSNRCTL for Linux: Version 11.2.0.3.0 - Production on 04-NOV-2016 00:20: ...

  2. mysql IP转换函数

    1.将字符串类型的实际IP转换成十进制数值型的 SELECT INET_ATON('209.207.224.40'); 执行结果:

  3. 烂泥：mysql5.5多实例部署

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. mysql5.5数据库多实例部署,我们可以分以下几个步骤来完成. 1. mysql多实例的原理 2. mysql多实例的特点 3. mysql多实例应用 ...

  4. Makefile变量

    自定义变量 = 是最基本的赋值,会把整个makefile展开之后再决定是多少 x=foo y=$(x)bar #y是asdbar,不是foobar x=asd := 是覆盖之前的值,和=不同,和赋值的 ...

  5. Linux基础命令之cat使用方法大全

    今天在学习部署安装openstack的时候,看到一个关于cat的奇怪用法,可能是本人的才疏学浅没见过这种写法,于是乎查阅资料了一番,并进行了总结,希望也能够帮助有需要的朋友. 以下是我总结的几种常用方 ...

  6. ELK IIS 日志-->logstash-->ElasticSearch

    NXLOG 配置 #define ROOT C:\Program Files\nxlog define ROOT C:\Program Files (x86)\nxlog Moduledir %ROO ...

  7. 用U盘制作启动盘后空间变小的恢复方法，清除U盘启动盘空间

    先把u盘插好,运行cmd, 输入diskpart,回车, (输入list disk,回车,能看到磁盘大致情况,u盘一般是磁盘1) 再输入select disk 1,回车, 再输入clean,回车, 关 ...

  8. 在ASP.NET MVC中使用Unity进行依赖注入的三种方式

    在ASP.NET MVC4中,为了在解开Controller和Model的耦合,我们通常需要在Controller激活系统中引入IoC,用于处理用户请求的 Controller,让Controller ...

  9. 网管把握市场需求，其实一点都不可怜 转载于 [http://tonyxiaohome.blog.51cto.com/925273/955589]

    呵呵,这是我到51CTO做实习斑竹,回复的第一篇帖子,原帖在这里: http://bbs.51cto.com/thread-940532-1.html 这位朋友可能最近受到点挫折,所以有点小灰心,我呢 ...

  10. POJ 1724 ROADS【最短路/搜索/DP】

    一道写法多样的题,很具有启发性. 具体参考:http://www.cnblogs.com/scau20110726/archive/2013/04/28/3050178.html http://blo ...