样式表

六、列表方块

1.有序列表变无序列表

<ol>

        <li>张店</li>

        <li>桓台</li>

        <li>淄川</li>

</ol>

网页上显示为1. 张店     2. 桓台   3. 淄川  （竖向显示）

<ol style="list-style:none">

        <li>张店</li>

        <li>桓台</li>

        <li>淄川</li>

</ol>

网页上显示   张店     桓台    淄川

list-style:none将列表前面的序号去掉，成为了无序列表。

<ol style="list-style:inside"> 列表前面的序号和列表内容在一起

<ol style="list-style:outside">列表前面的序号和列表内容分开

<ol style="list-style-image:url(001.png)">将列表前面的序号变成图片

七、格式和布局

1.位置 position

①fixed固定   相对于浏览器边框位置固定，上下拉滚动条不随着滚动条的上下拖拉而变化。

<div style="width:200px; height:200px; position:fixed; top:"></div>

调整位置：top：距离上边距的位置  right：距离右边距的位置  bottom：距离下边距的位置  left：距离左边距的位置

<div style="width:200px; height:200px; background-color:#03F; position:fixed; top:20px; left:20px"></div>

②absolute   相对于父级元素（浏览器、绝对定位的上级，此处的上级就是<body>）。

<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>

<div style="width:500px; height:500px; position:absolute; top:100px; left:100px; background-color:#FCC">

　　<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>

</div>

上面的代码里面的position的位置是相对于外面那一级的position的位置决定的。但是外面的那一级中也要有position并且值是absolute才可以，否则上一级对里面那一级就失去了约束作用。

③relative  相对位置  相对于原来自身的位置移动

网页上的元素都存在默认的边界（margin或者padding），在网页上布局开始时要把元素自身带的margin或者padding去掉，防止因为元素自身的边界不同而造成布局时各元素发生错乱，去掉方式为。

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

<style type="text/css">

*{ margin:0px; padding:0px}

</style>

页面布局时一定要加上 *{ margin:0px; padding:0px} 如果 四周的 margin和padding如果一样的话写上一个值就可以。

实际上去掉边界时会写成 *{ margin:0px auto; padding:0px}，加上auto里面的元素会水平居中

2.流  float

right   向右流

left    向左流

<style type="text/css">

    *{ margin:0px auto; padding:0px}

    .text{ width:200px; height:200px; background-color:#63C; margin:0px 0px 0px 10px; float:left}

    </style>

    </head>

    <body>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

    <div class="text"></div>

使用  流  时，里面的元素会默认的浮上一层，流结束后，要把流清掉，清掉方式是在流结束的位置加上<div style="clear:both"></div>。使用margin时，一般要配合着流使用，自己使用没有效果。

以下代码是一个简单的导航栏

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑}

#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}

.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}

.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}

</style>

</head>

<body>

<div id="menu">

　　<div class="text">首页</div>

　　<div class="text">产品中心</div>

　　<div class="text">产品介绍</div>

　　<div class="text">图集</div>

　　<div class="text">联系我们</div>

　　<div class="text">友情链接</div>

　　<div style="clear:both"></div>

</div>

：hover表示鼠标放上来，当鼠标放到这些元素上来以后

.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}   表示把鼠标变成手。background-color:#63C表示鼠标放上后变成的背景色。 color:#FFF表示鼠标放上后文字变成什么颜色。导航栏除了用<div>制作以外，还可以用序列制作。

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑}

#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}

#menu1{width:800px; height:45px; background-color:#CCC; margin-top:20px; list-style:none}

.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}

.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}

</style>

<ul id="menu1">

　　<li class="text">首页</li>

　　<li class="text">产品中心</li>

　　<li class="text">产品介绍</li>

　　<li class="text">图集</li>

　　<li class="text">联系我们</li>

　　<li class="text">联系我们</li>

</ul>

用列表制作的导航栏和用<div>制作的是一样的效果。

<div style="width:300px; height:300px; background-color:#0F0; z-index:3; position:relative"></div>

<div style="width:300px; height:300px; background-color:#F00; position:relative; top:-100px; left:-50px; z-index:6"></div>

z-index表示分层，z-index的值越大表示图层越靠上。

八、其它样式

1.display  显示block和隐藏none ，不占位置，隐藏后下面的代码内容会覆盖原来的区域。

2.visibility  显示visible和隐藏hidden ，占位置，隐藏后原来的区域不会被覆盖。

3.overflow 超出范围hidden隐藏，比如两个套着的<div>，如果里面的区域比外面的区域面积大，则外面的<div>区域多出的里面的<div>区域隐藏。

4.opacity  透明  opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)    半透明是0.5

5.border-radius:5px;  圆角  5px是圆角的半径

6.box-shadow阴影  box-shadow:0 0 5px white;  5px是距离上一个<div>的距离，距离越远，阴影面积就越大。white是阴影的颜色。

转载请注明出处，谢谢合作！
http://www.cnblogs.com/xiaofox0018

9月11日上午HTML有序列表、无序列表、网页的格式和布局的更多相关文章

  1. 8月11日嵌入式Linux开发免费项目体验邀您参与

    嵌入式Linux开发免费项目体验开课啦~~我们特意邀请到粤嵌金牌讲师和技术专家,为大家带来精彩有趣的嵌入式公开课,涉及到嵌入式学习.研发的方方面面.课堂中我们能体验到的不仅仅是最新资讯.技术体验,还有 ...

  2. Yoshua Bengio 2016年5月11日在Twitter Boston的演讲PPT

    Yoshua Bengio最新演讲:Attention 让深度学习取得巨大成功(46ppt) Yoshua Bengio,电脑科学家,毕业于麦吉尔大学,在MIT和AT&T贝尔实验室做过博士后研 ...

  3. 2016年12月11日 星期日 --出埃及记 Exodus 21:6

    2016年12月11日 星期日 --出埃及记 Exodus 21:6 then his master must take him before the judges. He shall take hi ...

  4. 2016年11月11日 星期五 --出埃及记 Exodus 20:2

    2016年11月11日 星期五 --出埃及记 Exodus 20:2 "I am the LORD your God, who brought you out of Egypt, out o ...

  5. 2016年10月11日 星期二 --出埃及记 Exodus 18:22

    2016年10月11日 星期二 --出埃及记 Exodus 18:22 Have them serve as judges for the people at all times, but have ...

  6. 西安Uber优步司机奖励政策（1月11日~1月17日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. 2019年IntelliJ IDEA 最新注册码，亲测可用（截止到2020年3月11日）

    2019年IntelliJ IDEA 最新注册码(截止到2020年3月11日) 操作步骤: 第一步:  修改 hosts 文件 ~~~ 在hosts文件中,添加以下映射关系: 0.0.0.0 acco ...

  8. 优步UBER司机全国各地奖励政策汇总 (4月11日-4月17日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 成都Uber优步司机奖励政策（4月11日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

随机推荐

  1. mysql5.7.13-windows 免安装版配置简介

    1.下载mysql5.7.13-windows版本 (1)mysql5.7.13-win64版本百度云下载链接分享地址:链接:http://pan.baidu.com/s/1slMl4Ah 密码:w6 ...

  2. Cinder 调试 - 无法挂载到虚拟机

    1.问题 我们有时候在通过云主机挂载云硬盘的时候会出现挂载不上的问题.像这中问题有多种情况导致的. 看一下我遇到的两种情况. 1.权限问题 在cinder节点查看 /var/log/cinder/ci ...

  3. JS入门学习，写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  4. ZBrush该如何通过结合KeyShot制作逼真玉佩

    玉在中国的文明史上有着特殊的地位,古人的很多生活器具都是玉雕成的,能常戴在身上的惟有玉佩,古语有云"君子无故,玉不去身".即便到了现代,仍有很多人佩戴玉,倒不一定是因为它有多彰显地 ...

  5. [tem]树状数组

    通过差分可以玩区间: bi＝ai-a(i-1) 查询时考虑位置对答案的贡献 推导一下 #include<iostream> #include<cstdio> #include& ...

  6. [No00006F]总结C#获取当前路径的各种方法

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    http://dl.bintray.com/sequenceiq/sequenceiq-bin/ http://www.secdoctor.com/html/yyjs/31101.html

  8. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 总部业务部门主管管理整个集团分公司的某项业务

    由于整个集团公司非常庞大,有上千个分支机构,不可能由总部某个人能管理所有的数据,或者掌握所有的业务.某个业务都会由于某个相应的部门进行管理,例如所有分公司的人力资源,都由总部的人力资源部门管理.哪些分 ...

  10. javaScript 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...