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

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 由于需要做ESXI相关的实验,所以就在自己的机器上利用VM虚拟ESXI进行实验.因为此次实验是需要两块网卡的,所以就在创建ESXI虚拟机时添加了两块网卡 ...

  2. 关于SUID、SGID、Sticky

    SUID属性 passwd命令可以用于更改用户的密码,一般用户可以使用这个命令修改自己的密码.但是保存用户密码的/etc/shadow文件的权限是400,也就是说只有文件的所有者root用户可以写入, ...

  3. myBatis系列之四：关联数据的查询

    myBatis系列之三:增删改查是基于单表的查询,如果联表查询,返回的是复合对象,需要用association关键字来处理. 如User发表Article,每个用户可以发表多个Article,他们之间 ...

  4. delphi 安装.dpk;package

    打开.dpk,若要将包直接安装在delphi的默认安装目录下(D:\Program Files (x86)\Borland\Delphi7\Projects\Bpl), 可清除,点击options打开 ...

  5. C++学习笔记【转载】

    转载自:http://www.cnblogs.com/maowang1991/p/3290321.html 1.struct成员默认访问方式是public,而 class默认访问方式是private! ...

  6. python curses使用

    python 中curses封装了c语言的curses,把c中复杂部分简单化,比如addstr(),mvaddstr(),mvwaddstr()合并成了一个addstr()方法. 一.语法入门 1.打 ...

  7. SpringMVC从入门到精通之第四章

    第一个知识点:@Controller注解,用于标识这个类是一个后端控制器(类似struts中的action),主要作用就是接受页面的参数,转发页面.中间的业务逻辑是调用业务类处理的这个就是MVC设计模 ...

  8. vlan协议及端口类型

    一.VLAN协议 1.协议的应用 802.1Q协议,即Virtual Bridged Local Area Networks协议,主要规定了VLAN的实现. 2.协议结构 每一个支持802.1Q协议的 ...

  9. UVALive 5058 Counting BST --组合数

    题意:排序二叉树按照数插入的顺序不同会出现不同的结构,现在要在1~m选n个数,使按顺序插入形成的结构与给出的结构相同,有多少种选法. 解法:先将给出的结构插入,构造出一棵排序二叉树,再dfs统计,首先 ...

  10. 正弦 sin 余弦 cos

    正弦 以下概念需掌握 直角,锐角 sinA = 对边 / 斜边 性質 奇偶性 奇 定義域 (-∞,∞) 到達域 [-1,1] 周期 2π 在數學中,正弦是一種週期函數,是三角函数的一種.它的定义域是整 ...