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

    HTTPS简介 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版. ...

  2. Linux shell if [ -n ] 正确使用方法

    if [ str1 = str2 ]  当两个串有相同内容.长度时为真 if [ str1 != str2 ] 当串str1和str2不等时为真 if [ -n str1 ] 当串的长度大于0时为真( ...

  3. 使用Tcmalloc进行堆栈分析

    在前一篇译文<使用TCmalloc的堆栈检查>,介绍了Tcmalloc进行堆栈检查,今天翻译<heap-profiling using tcmalloc>,了解如何 TCmal ...

  4. Hadoop 基准测试与example

    #pi值示例 hadoop jar /app/cdh23502/share/hadoop/mapreduce2/hadoop-mapreduce-examples--cdh5. #生成数据 第一个参数 ...

  5. C#基础---C#如何对Json字符串处理

    Json字符串对于做web应用的应该很熟悉,其实在很多请求我们返回的都是Json字符串.那对于C#代码如何处理Json字符串呢,.Net封装了一个类叫做JavaScriptSerializer[MSD ...

  6. ASP.NET执行模型之IIS服务器处理流程

    之前在网上看过很多对这方面的讲解,但个人觉得看下来过于 "深奥",不容易理解,所以想用更简单的方式进行阐述,便于理解. 本次我们重点分析用户请求到页面呈现过程中Web服务器的处理过 ...

  7. GTAC 2015 的视频和文档已经放出

    视频见https://developers.google.com/google-test-automation-conference/2015/stream,文档见https://developers ...

  8. oracle数据库误操作把表删除了,怎样恢复

    一:表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有:1.从flash back里查询被删除的表 select * from re ...

  9. 'gulp'不是内部或者外部命令，也不是可运行的程序或批处理文件

    1,在用户变量里新建变量 PATH: %USERPROFILE%\AppData\Roaming\npm(如果已有path变量,则在后面直接加上即可) 2,在系统环境变量里的path加上node.js ...

  10. 你所未知的3种 Node.js 代码优化方式

    from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...