好久没写博客了，主要是懒得呼气都不想呼，上周分给我一个新的任务，就是自己新建一个系统，快速极限开发，虽然之前自己也做过小的系统，但毕竟是自己做，随着自己的心意做，没有做其他的限制等，现在呢是给公司做，所以在质量上是绝对要比自己一个人做着玩要高。上周算是把框架搭起来来，今天上午熟悉下需求，下午的时候把数据库中关键的几个表设计了一下，明天就要往框架里面搬砖了，华为那边还说要两周搞定，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. Access字段类型“查阅向导”

    1.显示控件有:“列表框”和“组合框”两种 2.组合框:第一个字段为“填充字段” 3.通过查阅向导建立的会自动添加“关系”(外键),因此在删除或修改字段时需要先删除二者关系,最好不通过“查阅向导”建立 ...

  2. Servlet/JSP-08 EL表达式

    EL - Expression Language 一. 基本语法 EL表达式以 ${} 的形式访问变量的值 1. "." 和 "[]" 运算符 <%@ p ...

  3. Android,LIstView中的OnItemClick点击无效的解决办法

    在List_Item布局文件中的根节点加上如下背景标黄的这一行 <?xml version="1.0" encoding="utf-8"?> < ...

  4. 系统进程 zygote（二）—— zygote.rc 脚本

    夕阳已在沉沉的淡化,这黄昏的美,有谁能描画?莽莽的天涯,哪里是我的家,哪里是我的家?爱人呀,我这般的想着你,你那里可也有丝毫的牵挂?—— 徐志摩·海边的梦 ilocker:关注 Android 安全( ...

  5. 解决SQL死循环问题

    解决SQL死循环问题 当我们在执行在使用for循环的时候,往往会遇到死循环的问题,我们可以通过SSH来连接数据库,并结束其进程:代码如下: Su - db2inst1 Db2 connect to s ...

  6. CDN下nginx获取用户真实IP地址

    随着nginx的迅速崛起,越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速,但是随之也遇到一个问题:nginx如何获取用户 ...

  7. [转]Membership三步曲之入门篇 - Membership基础示例

    本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例   Members ...

  8. Machine Learning Algorithms Study Notes(3)--Learning Theory

    Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 本系列文章是Andrew Ng 在斯坦福的机器学习课程 CS 22 ...

  9. Vim插件管理——Vundle

    Vim插件管理--Vundle 都说Vim时程序员写给自己的编辑器,其中的情结可想而知.身为一只程序狗CodingDoge,今天就让我带各位学习Vim的使用. vim因为其庞大而强劲的插件受到无比的推 ...

  10. SonarLint(Sonar) 代码质量管理

    一.Sonar是什么? Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groov ...