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. PHP0011：学生信息管理案例

    PHP中 html js 混合用

  2. 【Debian学徒记事】记一次解决Debian开机1min30s

    记一次解决Debian开机1min30s 打开我亲爱的Debian 欸,好像有点慢 [* * * * ] A start job is running for....(*/1min30s) [TIME ...

  3. centos 7 安装npm

    下载网址https://nodejs.org/dist/latest-v8.x/ 安装过程参考https://blog.csdn.net/micarlxm/article/details/810912 ...

  4. qt creator源码全方面分析(1)

    目录介绍 首先我们对软件源代码根目录下的各个重要文件(夹)做一个简单的介绍,对整体有一个大概的了解. 下面对目录及其内容做一个大概的初步的介绍,后面我尽量按照目录顺序进行依次介绍,当然可能会有一些交叉 ...

  5. ES6--函数的参数

    参数展开(扩展) 1.收集剩余的参数 function show(a, b, ...args) { console.log(a); console.log(b); console.log(args); ...

  6. mac anyconnect 卸载方法

    打开终端: 输入下面的命令 sudo /opt/cisco/vpn/bin/vpn_uninstall.sh 有问题 端口占用 sudo /opt/cisco/anyconnect/bin/webse ...

  7. c#获取所有枚举

    获取所有的枚举 1.将所有的枚举单独成一个项目 2.通Assembly加载程序集 3.通过Assembly对象的GetTypes获取所有的枚举类型 4.通过Enum.GetValues可以得到枚举的所 ...

  8. Linux虚拟文件系统–VFS简介

    http://www.embeddedlinux.org.cn/emb-linux/file-system/201712/20-7907.html 导读 Linux中可以支持多种文件系统,而且支持各种 ...

  9. WeUI基础样式库——写一个移动端界面

    WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的.我们来看看这个基础库样式到底长什么样. 这些密密麻麻的就是压缩后的样式库.密密麻麻地看起来简直要 ...

  10. Ubuntu WiFi连接问题

    1,先说明下, 这种方式仅针对 RTL8723BE这款无限网卡. 先用 lspci|grep -i net 先用这个命令查询网卡型号, 我的电脑查询结果: 00:19.0 Ethernet contr ...