CSS菜单制作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>菜单</title>

     <style type="text/css">

         .ui {

             width: 1200px;

             height: 100px;

             list-style: none;

             margin: 0;

             padding: 0;

         }

         .ui li {

             width: 200px;

             margin: 0 10px;

             float: left; /*该处换为display:inline-block;同样效果*/

         }

         .ui li a {

             width: 70px;

             height: 50px;

             padding: 0 20px;

             font-size: 12px;

             line-height: 50px;

             border: solid 1px;

             {#background: red;#}

             display: inline-block;

             text-decoration: none;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <ul class="ui">

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

菜单制作CSS

菜单制作:ul li横向排列的更多相关文章

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

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

  2. CSS + ul li 横向排列的两种方法

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

  3. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  4. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  5. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  6. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  7. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  8. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  9. UL/LI

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

随机推荐

  1. Mybaits（10）N+1问题

    N+1问题 从上面的例子日志中我们可以看到所有级联都成功了,但是引发了性能问题,例如我们在查询雇员的信息和工作任务信息,此时体检表和工牌信息就是多余,我们没必要查询一次.如果想日志体现的那样,取出了所 ...

  2. 一种使用SOC精确控制脉冲的方法

    在emfi测试中需要精确的控制脉冲时间.控制器产生的脉冲信号会经过控压的MOS管,这些组件会造成很严重的延时,但是尽管如此,控制系统的高精度也是必须的,因为控制系统的误差会逐级下延,引起更大的误差. ...

  3. ESXI | ESXI6.7如何在网页端添加用户并且赋予不同的权限

    一.首先添加一个用户 管理---用户---安全和用户 添加的新用户会显示在下面 二.给添加上的用户赋予对应权限(我这里演示赋予的是只读权限) 主机---操作---权限 三.测试登录 当用只赋予了只读权 ...

  4. Hadoop学习之路(6)MapReduce自定义分区实现

    MapReduce自带的分区器是HashPartitioner 原理:先对map输出的key求hash值,再模上reduce task个数,根据结果,决定此输出kv对,被匹配的reduce任务取走. ...

  5. 浅析Thread的join() 方法

    Thread中的 join() 方法在实际开发过程中可能用的不是很多,但是在面试中作为考察基本功知识的扎实与否,经常会被用到.因此,对于 Thread 的 join() 方法进行了一定的研究. 常见的 ...

  6. PAT 基础编程题目集 6-10 阶乘计算升级版 (20 分)

    本题要求实现一个打印非负整数阶乘的函数. 函数接口定义: void Print_Factorial ( const int N ); 其中N是用户传入的参数,其值不超过1000.如果N是非负整数,则该 ...

  7. SQL语句中设置字段值取反操作

    1.对布尔值取反,使用 ~. 如 update set status=~status where id=2; status的值为true || false. 2.对0.1 数值取反,使用abs() 取 ...

  8. BZOJ4668 冷战(LCT维护最小生成树)

    BZOJ4668 冷战(LCT维护最小生成树) 题面 自己找去 HINT 这道题就是动态加边,然后查询u,v两点最早什么时候联通,强制在线.思考一下,最早什么时候联通不就等同于维护最小生成树吗(把这条 ...

  9. Oracle 中关于 Group By 子句与多行函数嵌套搭配使用的注意事项

    目录 你需要知道的 啥叫单行函数 啥叫多行函数 如何理解这个概念 Group by 子句使用规则 看一道 071 考题 你需要知道的 提到 Group by 子句,你需要先理解一个东西:函数的分类.提 ...

  10. 查询避免Unknown column ‘xxx’ in ‘where clause

    问题: 单从字面理解,我们很容易得出列名称不存在的结论, 但是,很多时候并不是列名出错造成的,而是由于拼凑sql语句时对字符类型数据没有用引号引起来造成的. 例子: 例如:  String sql=& ...