常用作：导航，少量数据表格，居中

一.做导航，居中

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>做导航</title>

<style type="text/css">

#menu{

    width:1000px;

    height:35px;

    float:right;

    margin:0px;

    clear:both;

    vertical-align:bottom;

}

#ul li{

    list-style-type:none; /*去掉项目符号的，比如你用了<ul><li></li><li></li></ul>默认的li里边的字是有列表符号的，小圆点。这个list-style-type: none就是不要列表符号*/

    clear:both;

    width:100px;

    display:inline; /*li {display: inline} 让 li 不再独占一行, 宽度上只会得到必要的而不是占有所在容器的全宽*/

    font-size: larger;

    text-decoration:none;

}

a{

    text-decoration:none;   /*去掉下划线*/

}

</style>

</head>

<body>

<div id="menu">

<ul id="ul">

<li><a title="" href="http://localhost:1435/BookShop/index.aspx">首页 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">行业图书 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">服饰潮流 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">美容会所 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">妈咪宝贝 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">礼品书籍 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">新闻资讯 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">用户留言 </a></li>

<li><a title="" href="http://localhost:1435/BookShop/">联系我们 </a></li>

</ul>

</div> 

</body>

</html>

二.少量数据表格

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

</style>

</head>

<body>

<div>默认是竖排，并且带圆点

<ul>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

</ul>

</div> 

</body>

</html>

三.少量数据表格

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

</style>

</head>

<body>

<div>

<ul>

<li style="list-style:none;">去掉圆点</li>

<li style="display:inline;">hello</li>

<li>hello</li>

<li style="display:inline;">hello</li>

</ul>

</div> 

</body>

</html>

四.少量数据表格

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#myul li{

    float:left;

    width:100px;

}

</style>

</head>

<body>

<!--制作表格的原理，ul宽度为300px,li宽度为100px，则成三列-->

<div style="text-align:center;background:#eef">

<ul id="myul" style="width:300px;background:#eee">

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

</ul>

</div>

</div>

</body>

</html>

五.少量数据表格

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#myul li{

    float:left;

    width:100px;

}

</style>

</head>

<body>

<!--横向的方法,如果要居中，需要设置宽度才可以，这个宽度要和里面的li总长度一样。-->

<div style="text-align:center;background:#def">

<ul id="myul" style="width:500px;background:#eee;">

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

<li>hello</li>

</ul>

</div>

</body>

</html>

ul和li 基本用法分析（这里主要想学习怎么用在导航栏中）的更多相关文章

  1. 关于<ul><ol><li>的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  4. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  5. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  6. ul、li分列显示

    目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示. 方法1,使用DIV+CSS代码: <style type="text/css"> .my ...

  7. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  8. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  9. java String.split()函数的用法分析

    java String.split()函数的用法分析 栏目:Java基础 作者:admin 日期:2015-04-06 评论:0 点击: 3,195 次 在java.lang包中有String.spl ...

随机推荐

  1. IOS开发者账号的相关配置 － 接受邀请后的步骤

    说明: 1.本文主要针对企业账户, 并假定主账号已经申请到了. 2.账号类型分为3种:Agent(创建者),Admin(管理员)及Member(成员) 一. 1.申请子账号 使用Agent或Admin ...

  2. Jboss7类载入器

    1. 类载入器理论知识介绍 类载入器基于Jboss Module,代替了层次类载入环境,避免了当类存在多个版本号时,导致类载入错误. 类载入是基于模块的.必须显示的定义模块依赖.部署也是模块化的,假设 ...

  3. Python批量复制和重命名文件

    Python批量复制和重命名文件 示例代码 #! /usr/bin/env python # coding=utf-8 import os import shutil import time impo ...

  4. linux 下 ifcfg-eth0 配置 以及ifconfig、ifup、ifdown区别

    这3个命令的用途都是启动网络接口,不过,ifup与ifdown仅就 /etc/sysconfig/network- scripts内的ifcfg-ethx(x为数字)进行启动或关闭的操作,并不能直接修 ...

  5. spring boot 读取配置文件（application.yml）中的属性值

    在spring boot中,简单几步,读取配置文件(application.yml)中各种不同类型的属性值: 1.引入依赖: <!-- 支持 @ConfigurationProperties 注 ...

  6. ICON小工具如何使用

    对于ICON这个小资源,我们可以手动绘制.选择bmp图形的大小,尤其是旁边的选择工具(矩形或者弧形),我们可以通过选择工具挪动我们手动绘制的图标,其实图标只有中间那部分有用,其他没有用.还有最右边色拾 ...

  7. 【转载】关于 .Net 逆向的那些工具：反编译篇

    在项目开发过程中,估计也有人和我遇到过同样的经历:生产环境出现了重大Bug亟需解决,而偏偏就在这时仓库中的代码却不是最新的.在这种情况下,我们不能直接在当前的代码中修改这个Bug然后发布,这会导致更严 ...

  8. 【转载】aspx,ascx和ashx使用小结

    做asp.net开发的对.aspx,.ascx和.ashx都不会陌生.关于它们,网上有很多文章介绍."纸上得来终觉浅,绝知此事要躬行",下面自己总结一下做个笔记.1..aspxWe ...

  9. 【Web API系列教程】3.10 — 实战：处理数据（公布App到Azure App Service）

    在这最后一节中.你将把应用程序公布到Azure.在Solution Explorer中,右击项目并选择Publish. 点击Publish打开Publish Web对话框. 假设你在新建项目的时候选中 ...

  10. 【Union Find】JAVA implementation

    import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.Scan ...