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. 分享10个免费或便宜的Photoshop替代工具

    说到编辑照片和图像文件,一般很多人都使用photoshop软件.然而,使用现在的最新版本Photoshop CC每月最低也要支付980日元,感觉使用门槛有点高的人应该不少吧. 有一篇文章,推荐了10个 ...

  2. UVA1349（带权二分图最大匹配 --> KM算法模板）

    UVA1349 题意:给定一些有向带权边,求出把这些边构造成一个个环,总权值最小 解法: 对于带权的二分图的匹配问题可以用通过KM算法求解. 要求最大权匹配就是初始化g[i][j]为0,直接跑就可以: ...

  3. ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)

    场景 在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页:https: ...

  4. linux 文件系统管理三部曲之三：挂载文件系统

    linux 文件系统管理三部曲之一:磁盘分区 linux 文件系统管理三部曲之二:创建文件系统 上面说明了,硬盘的划分和格式化,那么怎么使用,还没说,这里说一下,怎么使用创建好的文件系统. 使用文件系 ...

  5. 启动zabbix-server/agent报错：cannot open "/etc/zabbix/logs/zabbix_server.log": [13] Permission denied

    注:该报错解决方式同样适用于zabbix-agent 启动zabbix-server报错信息如下: 2月 27 16:52:44 localhost.localdomain zabbix_server ...

  6. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 54.Python中Meta类常见的配置

    对于一些模型级别的配置.我们可以通过在模型中定义一个类,叫做Meta.然后在这个类中添加一些属性来控制模型的作用. 注意:添加的这个类一定要是Meta,否者的话Django就会不能够识别. from ...

  8. C#中怎样获取System.Drawing.Color的所有颜色对象并存到数组中

    场景 需要在生成一组多条曲线时,随机从一颜色数组中取颜色,至少一百种颜色以上. 而System.Drawing.Color自带140多种颜色 那么怎样将其自带的颜色对象取出并存在数组中. 注: 博客主 ...

  9. canvas转盘转动?

    怎么实现类似转盘转动的效果? 现在这种实现思路是,canvas每次draw()并不是让图形在旋转,而是让每一份的颜色改变到达好像是转动的效果, 但是现在有一个问题,一开始渲染的颜色数量于份数是相同的, ...

  10. CSS的文本样式

    CSS的文本样式 1.颜色 2.文本对齐方式 3.首行缩进 4.行高 5.装饰 1. 文本位置 居中: text-align: center; 靠左: text-align: left; 靠右: te ...