1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定）
1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。
1.2 relative：相对定位，指的是相对自己默认的位置。
1.3 static：默认
1.4 fixed：固定
2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
3.text-align：横向排列：left right center
4.line-height:指定行高，垂直居中
5.display: 设置元素是否是：行内元素（inline）、块状元素（block）、行内块状元素（inline-block）或者none隐藏标签作用
6.overflow：设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时 ，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此选项都会为层添加滚动条。而值使用auto值时，只在内 容超出层的范围时才会显示滚动条。
三、设置浮动（float）和清除浮动（clear）
专用来摆放标签的位置用的，而不是绝对位置和相对位置。absolute和relative是用来实现漂浮用的
用display：inline 可以，但是不兼容
3.1 float：设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left，右漂浮right值
。
3.2 clear：清除 left both
加div clear
回顾上一页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*需求：设置sb里面的每一个li标签的边框*/
#sb li{
border: 1px solid red;
}
ul:last-child li{
border: 10px solid blue;
color: red;
font-size: 10px;
background-color: yellow;
width: 100%;
height: 30px;
font-weight: bold;
text-decoration: underline;
text-indent: 10px;
text-align: center;
line-height: 30px;
background-image: url("路径");
background-repeat: no-repeat;
background-position: 10px 10px;
}
</style>
</head>
<body>
<!--
课前回顾：
1.css基本使用
css:层叠式样式表 美化HTML标签
2.使用方式？4种
style
<style></style>
<link rel="stylesheet" href="">
<style>
@import:url("");
</style>
3.选择器 在标签上设置记号 方便利用css设置样式
选择器：
ID选择器 +id属性 #
类选择器 +class属性 .
元素选择器 标签本身
后代选择器 空格
子代选择器 >
5.文本属性 和图片属性
-->
<!-- #sb>li{border} -->
<ul id="sb"> <!-- ul-谢凯进的父亲 -->
<li>item1</li><!-- li——儿子 谢凯1 -->
<li>item2</li><!-- li——儿子 谢凯2 -->
<ul><!-- ul 谢凯5-女儿 -->
<li>item1</li><!-- li 谢凯5的儿子1 -->
<li>item2</li><!-- li 谢凯5的儿子2 -->
<li>item3</li><!-- li 谢凯5的儿子3 -->
<li>item4</li><!-- li 谢凯5的儿子4 -->
</ul>
<li>item3</li><!-- li——儿子 谢凯3 -->
<li>item4</li><!-- li——儿子 谢凯4 -->
</ul>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</body>
</html>1.盒模型介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*通配符选择器*/ *{ padding: 0px; margin: 0px; } /*标签选择器*/ div{ display: inline-block; width: 100px; height: 100px; } #oDiv{ background-color: red; /*外边距*/ margin-right: 100px; /*设置盒模型中的内填充*/ padding-left: 20px; /*边框*/ /*border: 20px solid blue;*/ border-right: 30px solid blue; } #oDiv2{ background-color: yellow; } p{ width: 300px; height: 200px; background-color: red; margin: 0 auto; } </style> </head> <body> <!-- HTML中所有的块状标签都可以称为一个盒模型 盒模型的作用：美化页面，方便设计。 可以设置宽度和高度以及其他属性都可以做到。 目前最流行的盒模型标签是属于：div 盒模型的组成： 外边距:margin margin: 1px 1px; margin-top margin-bottom margin-left margin-right 内填充:padding padding-left padding-right padding-top padding-bottom 边框:border border-left: ... 内容:content 控制标签居中显示 margin:0px auto; --> <div id="oDiv"> 我唐烨怕过谁？ </div> <div id="oDiv2"> </div> <p>居中对齐</p> </body> </html>2.布局中常用的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .oBox{ width: 100px; height: 100px; background-color: red; /*绝对定位*/ position: absolute; top: 100px; left: 200px; } .oBox2{ width: 300px; height: 300px; background-color: yellow; /*绝对定位*/ position: absolute; top: 300px; left: 300px; } .oBox3{ width: 100px; height: 100px; background-color: green; /*相对定位*/ position: relative; top: 20px; left: 10px; } #oDiv{ width: 200px; height: 200px; background-color: yellow; /*fixed*/ position: fixed; right: 0px; bottom: 0px; } </style> </head> <body> <!-- css布局常用的属性 --> <!-- 1.position属性 针对的是所有标签的定位 background-position:针对的图片属性 absolute绝对定位 将标签脱离整个文档流。 top left relative 相对定位 随着父容器的变化而变化 --> <div class="oBox"> </div> <div class="oBox2"> <div class="oBox3"></div> </div> <div id="oDiv"> 广告 </div> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 1 <br> 2 <br> 3 <br> 4 <br> 5 <br> </body> </html>3.布局中常用的属性z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; /*绝对定位*/ position: absolute; } #oDiv1{ background-color: red; top: 50px; left: 50px; z-index: 1; } #oDiv2{ background-color: blue; z-index: 2; } </style> </head> <body> <!-- z-index 当网页中的标签处于一种层叠的情况下，可以利用 该属性控制谁前谁后。 设置标签的定位为绝对定位。 --> <div id="oDiv1">1</div> <div id="oDiv2">2</div> </body> </html>效果图
4.属性display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ /*将div块状标签转换成行内标签*/ display: inline; border: 1px solid red; } a{ border: 1px solid red; /*将a标签行内元素转换成块状元素*/ display: block; } p{ border: 1px solid red; /*将p标签块状元素转换成行内块状元素*/ display: inline-block; width: 300px; height: 100px; } h1{ width: 100px; height: 100px; border: 1px solid red; /*利用display属性隐藏标签 不会占位置*/ /*display: none;*/ /*visibility 隐藏，但是会占位置*/ /*visibility: hidden;*/ } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("oBtn"); oBtn.onclick = function(){ //alert(123) var oDiv = document.getElementById("oDiv"); oDiv.style.display = 'block'; }; }; </script> </head> <body> <!-- display属性 1.作用1 使用display属性转换行内，块状，以及行内块状。 a标签------行内标签---》块状使用display属性 2.作用2 可以使用display属性控制标签的显示与隐藏 --> <div> div属于块状元素 </div> <a href="">行内标签元素</a> <p>行内块状标签</p> <p>行内块状标签</p> <button id="oBtn">点击显示</button> <h1 id="oDiv">标题1</h1> </body> </html>5.属性overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid red; /*控制滚动的显示*/ /*overflow: scroll;*/ /*自动 类容没有超过时滚动条不会显示*/ overflow: auto; /*内容溢出后 多余的内容进行隐藏*/ overflow: hidden; } </style> </head> <body> <!-- overflow属性 --> <div> 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 好好学习天天向上好好学习天天向上好好学习天天向上 </div> </body> </html>6.属性浮动float与清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; } .oBox1{ background-color: blue; /*float 也会漂浮*/ float: left; } .oBox2{ background-color: green; float: right; } </style> </head> <body> <!-- float --> <div class="oBox1"></div> <div class="oBox2"></div> </body> </html> 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container{ width: 500px; border: 1px solid red; /* height: 200px;*/ } #container>.top{ width: 100px; height: 100px; background-color: yellow; float: left; } #container>.clear{ clear: both; } </style> </head> <body> <!-- clear --> <div id="container"> <div class="top"></div> <!-- 控制子容器设置高度后，对应的父容器会增加到对应的高度 --> <div class="clear"></div> </div> </body> </html>网页的一部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background-image: url("img/body_bg.gif"); background-repeat: repeat-x; } *{ padding: 0px; margin: 0px; list-style: none; } #container{ width: 980px; height: 1000px; /*border: 1px solid red;*/ /*居中*/ margin: 0 auto; } #container>.top{ width: 980px; height: 300px; /*background-color: #ccc;*/ } #container>.main{ width: 980px; height: 300px; background-color: pink; } #container>.foot{ width: 980px; height: 300px; background-color: #333; } #container>.top>.top_logo{ width: 980px; height: 95px; margin-top: -1px; /*background-color: red;*/ } #container>.top>.top_nav{ /*background-color: red;*/ width: 980px; height: 36px; } #container>.top>.top_nav>ul>li{ float: left;/*浮动*/ } #container>.top>.top_nav>ul>li>a{ /*行内块状*/ display: inline-block; width: 95px; height: 36px; line-height: 36px; text-decoration: none; color: white; text-align: center; } /*hover 超链接的伪类选择器*/ #container>.top>.top_nav>ul>li>a:hover{ color: yellow; background-image: url("img/menu_hove_bg.gif"); } #container>.top>.top_nav>ul>.items{ background-image: url("img/menu_fg.gif"); background-repeat: repeat-y; height: 36px; } </style> </head> <body> <div id="container"> <!-- 网页的头部 --> <div class="top"> <div class="top_logo"> <img src="img/logo.gif" alt=""> </div> <div class="top_nav"> <ul> <li><a href="">首页</a></li> <li class="items"> </li> <li><a href="">关于星博</a></li> <li class="items"> </li> <li><a href="">产品展示</a></li> <li class="items"> </li> <li><a href="">新闻中心</a></li> <li class="items"> </li> <li><a href="">资料下载</a></li> <li class="items"> </li> <li><a href="">技术支持</a></li> <li class="items"> </li> <li><a href="">客户留言</a></li> <li class="items"> </li> <li><a href="">人才招聘</a></li> <li class="items"> </li> <li><a href="">联系我们</a></li> </ul> </div> <div class="banner"> <img src="img/banner.jpg" alt=""> </div> </div> <!-- 网页的主体 --> <div class="main"></div> <!-- 网页的尾部 --> <div class="foot"></div> </div> </body> </html>
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
