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. 论文阅读笔记（十九）【ITIP2017】：Super-Resolution Person Re-Identification With Semi-Coupled Low-Rank Discriminant Dictionary Learning

    Introduction (1)问题描述: super resolution(SP)问题:Gallery是 high resolution(HR),Probe是 low resolution(LR). ...

  2. spawn id exp6 not open

    原因 脚本没有被执行 解决方案 手动执行该条命令参看报错的原因

  3. IDEA开发Maven构建SSM项目遇到的坑，action

    Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid b ...

  4. 【Android休眠】之Android休眠机制

    一.休眠概述 休眠,简而言之就是设备在不需要工作的时候把一些部件.外设关掉(掉电或让它进入低功耗模式). 为什么要休眠呢?一言以蔽之:省电. 休眠分主动休眠和被动休眠.主动休眠:比如我电脑不用了,就通 ...

  5. [SDOI2010]粟粟的书架 [主席树]

    [SDOI2010]粟粟的书架 考虑暴力怎么做 显然是提取出来 (x2-x1+1)*(y2-y1+1) 个数字拿出来 然后从大到小排序 然后就可以按次取数了- 然而接下来看数据范围 \(50\%\ r ...

  6. Leetcode Week5 Maximum Sum Circular Subarray

    Question Given a circular array C of integers represented by A, find the maximum possible sum of a n ...

  7. 0009 基于DRF框架开发（02 创建模型）

    上一节介绍了DRF开发的基本流程,共五个步骤: 1 创建模型 2 创建序列化器 3 编写视图 4 配置URL 5 运行测试 本节主要讲解创建模型. 构建学校,教师,学生三个模型,这三个模型之间的关系是 ...

  8. [CF1303F] Number of Components - 并查集,时间倒流

    有一个 \(n \times m\) 矩阵,初态下全是 \(0\). 如果两个相邻元素(四连通)相等,我们就说它们是连通的,且这种关系可以传递. 有 \(q\) 次操作,每次指定一个位置 \((x_i ...

  9. ActiveMQ的JMS消息可靠机制

    JMS消息可靠机制 ActiveMQ消息签收机制: 客戶端成功接收一条消息的标志是一条消息被签收,成功应答. 消息的签收情形分两种: 1.带事务的session 如果session带有事务,并且事务成 ...

  10. 【Unity|C#】基础篇(14)——预处理指令（#）

    [学习资料] <C#图解教程>(第23章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...