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. linux下定时网站文件备份和数据备份以及删除旧备份标准代码

    直切正题: 文件备份:web.sh 数据备份:db.sh 删除旧备份:clear.sh vi web.sh文件内容为: #!/bin/bash        解释:shell脚本标准头 cd  网站文 ...

  2. 方法重载（method overloading）

    为什么需要方法重载? 在编程语言中,名字的使用很重要.创建对象的时候,我们给一块内存区域起一个名字,然后这个名字就是我们创建的对象的引用,只要我们"叫"这个名字,计算机就知道我们在 ...

  3. C#中调用Windows系统服务exe程序的工具类与重启服务的流程

    场景 使用C#编写的Windows服务程序,在Winform中进行调用. 常用工具类方法检测服务是否存在或者安装,获取服务状态,启动服务,停止服务的方法. 以在Winform中重启服务为例. 注: 博 ...

  4. Windows10开发环境搭建

    开发环境基本介绍:(是以刚重装过系统的电脑进行介绍的,电脑刚装完的操作见其他的文档) Eclipse环境搭建: 1. 下载JDK (本例以JDK13.0.1为例) 2. 配置环境变量(主要是JAVA_ ...

  5. java流程控制结构

    一.流程控制分三类 1. 顺序结构 - 程序是从上往下,从左往右执行 2. 选择结构(判断结构) - if语句 A. if(关系表达式){语句体} - 执行流程:成立就执行语句体,不成立就不执行 B. ...

  6. PAT (Advanced Level) Practice 1152 Google Recruitment (20 分)

    In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...

  7. Unable to execute command or shell on remote system: Failed to Execute process

    1.问题描述 先说下我的项目环境:jenkins部署在windows下面,项目部署也是在windows下面,ssh服务器是FreeSSHd,原来是打算用Send files or execute co ...

  8. sqli-labs less-17 --> less-20

    Less-17 (报错盲注) 参考资料1:https://www.cnblogs.com/AmoBlogs/p/8673748.html

  9. ASP.NET常用内置对象（三）Server

    Server对象是HttpServerUtility的一个实例,也是上下文对象HttpContext的一个属性,提供用于处理Web请求的Helper方法. Server.MapPath("& ...

  10. RN开发-修改工程名

    需要修改如下文件:MainActivity.java , strings.xml , AndroidManifest.xml , build.gradle , package.json 1 packa ...