1 ul

1)list-style:none;

3)设置宽度

2)清除浮动的影响,使高度自适应

2 li

1)向左浮动

2)设置margin和padding都为0

3 a

1) dsiplay :block

2)设置width和height

完整的代码如下:

ul
{
list-style:none;
width:1040px;
margin:0px auto;
zoom:1 }
ul:after
{
content:".";
font-szie:0px;
line-height:0px;
display:block;
clear:both;
}
ul li
{
float:left }
ul li a
{
text-decoration:none;
display:block;
width:130px;
height:50px; }

用ul 来制作导航栏的几个要点的更多相关文章

  1. 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  2. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  4. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  5. 运用<ul><li>做导航栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css制作导航栏的上下三角

    1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...

  7. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  8. CSS制作导航栏

    最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...

  9. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

随机推荐

  1. html标签

    HTML常用标签 首先要知道html标签的一些特点: 1.类似“<关键字>”这样由尖括号包关键字组成,例如<html>,<div>…… 2.一般是成对出现的,由开始 ...

  2. 解决:Redis:java.util.NoSuchElementException: Unable to validate object at

    在Java使用Redis的过程中遇见了一个问题, redis.clients.jedis.exceptions.JedisConnectionException: Could not get a re ...

  3. IDE编辑器编码配置

    做跨平台开发时,大家用不同的IDE合作开发,最令人头疼的事就是各种乱码问题. 常用的IDE都支持utf-8编码和unix格式行尾'\n'. 1.XCODE设置文本编码及换行Xcode >> ...

  4. 网站指纹识别工具——WhatWeb v0.4.7发布

      WhatWeb是一款网站指纹识别工具,主要针对的问题是:“这个网站使用的什么技术?”WhatWeb可以告诉你网站搭建使用的程序,包括何种CMS系统.什么博客系统.Javascript库.web服务 ...

  5. Windows Store App JavaScript 开发:文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  6. [并查集] POJ 2236 Wireless Network

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 25022   Accepted: 103 ...

  7. 键盘对应的ASCII码

    ESC键 VK_ESCAPE (27)回车键: VK_RETURN (13)TAB键: VK_TAB (9)Caps Lock键: VK_CAPITAL (20)Shift键: VK_SHIFT ($ ...

  8. SQL语句导致cpu占用如此高

    一般我们可以使用sql server自带的性能分析追踪工具sql profiler分析数据库设计所产生问题的来源,进行有针对性的处理.但我们也可以通过自己写SQL语句来有针对性的进行性能方面的查询.通 ...

  9. sass安装记录

    之前曾经安装过一次sass,不过可惜没使用,现在换了电脑重新安装,又上网找了些资料,终于安装成功,现在就当做个记录方便下次安装. 首先 到官网下载个最新版的ruby :http://rubyinsta ...

  10. C# ADO.NET 连接Sybase 数据库

    using Sybase.Data.AseClient;//反编译修改后的DLL public class SybaseHelper { public AseConnection con; publi ...