23 , CSS 构造列表与导航
1. 列表图片
2. 背景列表
3. 翻转列表
4. 水平导航
1. 内边距与外边距
Ul {
Margin: 0;
Padding: 0;
}
2. 使用图片作为列表图标
Ul {
Margin: 0;
Padding:0;
Width: 200px;
List-style-image:url(images/list.gif);
Line-height: 150%;
}
3. 以背景图片作为项目列表图标
Ul {
List-style-type:none;
}
Li {
Background: url(images/list.gif) no-repeat left center;
Padding: 0 0 0 25px;
}
4. 内联列表
Ul {
List-style-type:disc;
}
Li {
Display: inline;
}
这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.
5. 背景图片和内联列表
Ul {
List-style-type: none;
}
Li {
Display:inline;
Background url(images/list.gif) no-repeat left center;
Margin: 0 0 0 10px;
Padding: 0 0 0 15px;
}
6.垂直导航栏
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
Ul {
List-style-type:none;
Margin:5px;
Padding:2px
Width: 160px;
Font-size: 12px;
}
Li {
Background: #ddd;
Margin: 0;
Padding: 2px 10px;
Border-left: 1px solid #fff;
Border-top: 1px solid #fff;
Border-right: 1px solid #666;
Border-bottom: 1px solid #aaa;
}
7.创建垂直翻转的列表
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Ul a{
Display: block;
Width: 200px;
Height: 40px; /*39px*/
Line-height: 40px; /*39px*/
Color:#000;
Text-decoration: none;
Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/
Text-indent: 50px;
}
a:hover {
background-position: right bottom;
}
8.创建水平导航条
ul {
Margin: 0;
Padding: 0 2em;
List-style: none;
line-height: 2.1em;
Width: 720px;
Background: #faa819 url(images/mainNavBg.gif) repeat-x;
}
ul li {
float: left;
}
ul a {
color:#fff;
padding: 0 10px;
background: url(images/divider.gif) repeat-y left top;
text-decoration: none;
}
1CSS构造列表内边距与外边距
<!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>CSS构造列表内边距与外边距</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
</head> <body>
<ul>
<li>CSS构造列表5个浏览器兼容顶格</li>
<li>CSS构造列表5个浏览器兼容顶格</li>
<li>CSS构造列表5个浏览器兼容顶格</li>
<li>CSS构造列表5个浏览器兼容顶格</li>
</ul>
</body>
</html>
2CSS构造列表使用图片作为列表图标
<!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>CSS构造列表使用图片作为列表图标</title>
<style type="text/css">
body{
margin: 50px; }
ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: url(images/2.jpg) }
</style>
</head> <body>
<ul>
<li>CSS构造列表使用图片作为列表图标</li>
<li>CSS构造列表使用图片作为列表图标</li>
<li>CSS构造列表使用图片作为列表图标</li>
<li>CSS构造列表使用图片作为列表图标</li>
</ul>
</body>
</html>
3CSS构造以背景图片作为项目列表图标
<!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>CSS构造以背景图片作为项目列表图标</title>
<style type="text/css">
body{
margin: 50px; }
ul{
margin: 0;
padding: 0;
list-style-type: none;
line-height: 150%; }
ul li{
background:url(images/2.jpg) no-repeat left center; /*center 可以改为60%*/
padding-left: 20px;
}
</style>
</head> <body>
<ul>
<li>CSS构造以背景图片作为项目列表图标</li>
<li>CSS构造以背景图片作为项目列表图标</li>
<li>CSS构造以背景图片作为项目列表图标</li>
<li>CSS构造以背景图片作为项目列表图标</li>
</ul>
</body>
</html>
4CSS构造内联列表
<!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>CSS构造内联列表</title>
<style type="text/css">
body{
margin: 50px; }
ul{
margin: 0;
padding: 0;
background: orange;
display:inline;
}
li{
background: yellow;
display: inline;
}
</style>
</head> <body>
<ul>
<li>CSS构造内联列表</li>
<li>ul是区块，display:inline把区块改成内联</li>
<li>li也是区块，display:inline把区块改成内联</li>
<li>这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.</li>
</ul>
外面的
</body>
</html>
5CSS背景图片和内联列表
<!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">
body{
margin: 50px; }
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
li{
background:url(images/2.jpg) no-repeat left center;
padding-left: 15px;
display: inline;
}
</style>
</head> <body>
<ul>
<li>背景图片和内联列表</li>
<li>小圆点图片不会掉，也变成内联</li>
<li>li也是区块，display:inline把区块改成内联</li>
<li>这里的 display 属性是块级值的设置,定义是否要成为块 .
Inline 是是内联,block 是区块.</li>
</ul>
外面的
</body>
</html>
6垂直导航栏
<!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">
body{
margin: 50px; }
ul{
List-style-type:none;
Margin:5px;
Padding:2px
width:160px;
Font-size: 12px;
}
li{
Background: #ddd;
Margin: 0;
Padding: 2px 10px;
Border-left: 1px solid #fff;
Border-top: 1px solid #fff;
Border-right: 1px solid #666;
Border-bottom: 1px solid #aaa;
}
</style>
</head> <body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
7创建垂直翻转的列表
<!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">
body{
margin: 50px; }
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
Ul a{
Display: block;
Width: 200px;
Height: 40px; /*39px*/
Line-height: 40px; /*39px*/
Color:#000;
Text-decoration: none;/*去掉下划线*/
Background: #94b8E9 url(images/pixy-rollover.png) no-repeat left center; /*left bottom*/
Text-indent: 50px;/*将段落的第一行缩进 50 像素：*/
}
a:hover {
background-position: right bottom;
}
</style>
</head> <body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
8创建水平导航条
<!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">
body{
margin: 50px; }
ul {
List-style-type: none;
width:800px;
Margin:0;
Padding:0;
background: #faa819 url(images/6.gif) repeat-x;
float: left;
line-height: 26px;
font-size: 12px;
text-align:center; }
ul li {
float: left;
background: url(images/5.png) no-repeat right center;
width: 100px; }
ul li a {
color:red;
text-decoration: none;
}
</style>
</head> <body>
<div>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
23 , CSS 构造列表与导航的更多相关文章
- CSS构造列表
列表图片 背景列表 翻转列表 水平导航 内边距与外边距 Ul { List-style-type:none; Margin: 0; Padding: 0; } 使用图片作为列表图标 Ul { Marg ...
- CSS控制列表与导航的制作
<style type="text/css"> /*body默认是有边距的*/ body{ margin:0;} /*ul默认是有边距的所以先将边距去掉IE78只要加上 ...
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- css制作最简单导航栏
css制作最简单导航栏
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- 一个带标号的CSS文章列表写法
<title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...
- CSS图片列表
1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
随机推荐
- Dora.Interception，为.NET Core度身打造的AOP框架 [2]：以约定的方式定义拦截器
上一篇<更加简练的编程体验>提供了最新版本的Dora.Interception代码的AOP编程体验,接下来我们会这AOP框架的编程模式进行详细介绍,本篇文章着重关注的是拦截器的定义.采用“ ...
- 请不要在JDK7及以上用Json-lib了
[Json-lib 介绍] Json-lib 是以前 Java 常用的一个 Json 库,最后的版本是 2.4,分别提供了 JDK 1.3 和 1.5 的支持,最后更新时间是 2010年12月14日. ...
- SUSE12Sp3安装配置.net core 生产环境-总汇（持续更新中...）
最近正在使用SUSE系统,项目环境是没有外网的,所以提供的基本都是离线安装,对应的安装包可能需要自行去下载,我这边就不整理了. 网上查找SUSE的资料比较少,于是整理了一下,希望对有需要的人有一点点帮 ...
- zuul网关入门（一、网关具有的功能）
1. zuul网关入门(一.网关具有的功能) 1.1. 基本场景 1.1.1. API网关的由来 1.1.2. API网关基本功能 1.2. 高级应用 1.2.1. 亮点 可动态发布的过滤器机制 1. ...
- C/C++数据在内存中的存储方式
目录 1 内存地址 2 内存空间 在学习C/C++编程语言时,免不了和内存打交道,在计算机中,我们存储有电影,文档,音乐等数据,这些数据在内存中是以什么形式存储的呢?下面做一下简单介绍. 本文是学 ...
- MySQL面试必考知识点：揭秘亿级高并发数据库调优与最佳实践法则
做业务,要懂基本的SQL语句: 做性能优化,要懂索引,懂引擎: 做分库分表,要懂主从,懂读写分离... 数据库的使用,是开发人员的基本功,对它掌握越清晰越深入,你能做的事情就越多. 今天我们用10分钟 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- 自定义圆形的ProgressBar
1.自定义圆形的ProgressBar 效果图: 圆形ProgressBar的样式主要有以下几个,我们这里以progressBarStyleLarge为例进行样式的修改,其他的类似. <Prog ...
- 9.Django form组件
Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 创建Form类时,主要涉及到 [ ...
- Netty(一) SpringBoot 整合长连接心跳机制
前言 Netty 是一个高性能的 NIO 网络框架,本文基于 SpringBoot 以常见的心跳机制来认识 Netty. 最终能达到的效果: 客户端每隔 N 秒检测是否需要发送心跳. 服务端也每隔 N ...