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. Mac 配置本地SSL

    1,执行: && openssl req -new -sha256 -x509 -days -key server.key -out server.crt 2,生成过程中,其它可随便填 ...

  2. Net Core使用Lucene.Net和盘古分词器 实现全文检索

    Lucene.net Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎, ...

  3. JS阻止事件冒泡与浏览器默认行为

    阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...

  4. [Python机器学习]机器学习概述

    1.为何选择机器学习 在智能应用的早期,许多系统使用人为的if和else语句来处理数据,以主动拦截邮箱的垃圾邮件为例,可以创建一个关键词黑名单,所有包含这些关键词的邮件被标记为垃圾邮件,这是人为制定策 ...

  5. Linux网络课程学习第三天

    第三天在线视频学习. 学习内容:继续详细介绍了第二章节 Linux常用命令的使用方法. 学习感受:万事开头难,作为Linux零基础的我相信在这本书学完之后会有所收获. 学习心得:记住刘老师的一句口头禅 ...

  6. VS打包程序步骤

    1.下载打包的程序 2.在你的程序里面安装打包的项目 3.添加项目输出 4.为项目添加必要的文件 双击前面建立好的主输出 一般文件为一些配置文件(如使用Nlog写日志,需要添加Nlog的配置文件)和图 ...

  7. Scrum简介

    1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...

  8. CodeForces 1144C

    链接 https://vjudge.net/problem/CodeForces-1144C #include<bits/stdc++.h> using namespace std; in ...

  9. 链表问题----删除倒数第K个节点

    在单链表和双链表中删除倒数第K个节点 分别实现两个函数,一个可以删除单链表中的倒数第K个节点,一个可以删除双链表中的倒数第k 个节点,要求时间复杂度是 O(N),空间复杂度是 O(1). [解析] 基 ...

  10. Selenium chromeDriver启动时报错：session not created: This version of ChromeDriver only supports Chrome

    解决方案: 这是因为ChromeDriver与本地chrome浏览器的版本不一致导致 ChromeDriver下载地址:http://npm.taobao.org/mirrors/chromedriv ...