1.CSS中常用的属性设置
1.1关于列表的设置
列表--1.有序列表 <ol><li></li></ol>
2.无序列表 <ul><li></li></ul>
3.自定义列表<dl><dt><dd></dd></dt></dl>
列表的设置就是改变一下列表的前面的标识。
list-style-image : 设置标识图标none | url ( url )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于列表的设置</title>
<style>
ul li a{
font-size: 50px;
text-decoration: none;
color: black;
}
ul{
list-style-image:url("imgs/home.PNG");
}
</style>
</head>
<body>
<h1>关于列表的设置</h1>
<h2>list-style-image : 设置标识图标none | url ( url ) </h2>
<ul>
<li><a href="#">用户信息管理</a></li>
<li><a href="#">部门信息管理</a></li>
<li><a href="#">职位信息管理</a></li>
</ul>
</body>
</html>
1.2关于表格的设置
border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并]
border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】
empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格属性设置</title>
<style>
table{
width: 800px;
height: 400px;
border-collapse:separate;
border-spacing:10px;
empty-cells:show;
}
table tr{
font-size: 20px;
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>表格属性设置</h1>
<h2>border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] </h2>
<h2>border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】</h2>
<h2>empty-cells :当单元格中没有内容时,单元格的边框是否显示 </h2>
<table border="1px">
<tr>
<td colspan="3"><h1>表格属性设置</h1></td>
</tr>
<tr>
<td>border-collapse</td>
<td>设置单元格是否合并</td>
<td>separate | collapse相邻边被合并</td>
</tr>
<tr>
<td>border-spacing</td>
<td>框独立时，单元格之间的间距</td>
<td>数字px</td>
</tr>
<tr>
<td>empty-cells</td>
<td>当单元格中没有内容时,单元格的边框是否显示</td>
<td></td>
</tr>
</table>
</body>
</html>
1.3 关于补丁的设置
补丁--子元素和父元素之间的距离
如果设置的是父元素---内补丁【padding】
如果设置的是子元素---外补丁【margin】
padding:12px 15px 28px 35px
四个参数值，将按上－右－下－左的顺序作用于四边。
padding:12px
提供一个，将用于全部的四边
padding:12px 15px
两个，第一个用于上－下，第二个用于左－右
padding:12px 15px 28px
提供三个，第一个用于上，第二个用于左－右，第三个用于下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>补丁设置</title>
<style>
div{
width: 500px;
height: 400px;
background-color: black;
}
#div1{
padding: 50px;
}
#img2{
margin: 50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="imgs/avatar2.png" />
</div>
<br>
<div id="div2">
<img id="img2" src="imgs/avatar5.png" />
</div>
</body>
</html>
2.关于布局的属性设置
float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】
块级元素:其元素的前后会自动折行
行内元素:按照由左向右一次排列，除非使用<br>元素强制换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素浮动</title>
<style>
span{
float: right;
}
</style>
</head>
<body>
<font size="7">设置元素浮动</font>
<span>
<a href="#">登陆</a>
|
<a href="#">注册</a>
</span>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素浮动</title>
<style>
span{
float: right;
}
ul{
list-style-type: none;
}
ul li{
float: left;
padding-left:50px;
}
ul li a{
font-size: 30px;
text-decoration: none;
color: darkgrey;
}
ul li a:hover{
color: red;
}
</style>
</head>
<body>
<font size="7">设置元素浮动</font>
<ul>
<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">更多</a></li>
</ul>
</body>
</html>
3.设置html元素的隐藏和显示
display:html元素是否及如何显示
block：显示
none:隐藏
visibility:是否显示html元素
visible：显示
hidden:隐藏
display与visibility的区别?
Display隐藏元素之后，元素的物理空间也会消失，
Visibility:隐藏元素之后，元素的物理空间不会消失，会留出空白。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置html元素的隐藏和显示</title>
<script>
function test1(){
document.getElementById("img1").style.display="none";
}
function test2(){
document.getElementById("img1").style.display="block";
}
function testvisibility1(){
document.getElementById("img2").style.visibility="hidden";
}
function testvisibility2(){
document.getElementById("img2").style.visibility="visible";
}
</script>
</head>
<body>
<h1>设置html元素的隐藏和显示</h1>
<h2>display:html元素是否及如何显示</h2>
<h3>block：显示</h3>
<h3>none:隐藏</h3>
<h1 onmouseover="test1();" onmouseout="test2();">图片的隐藏和显示</h1><br>
<img id="img1" src="imgs/avatar2.png" /><br>
<img id="img2" src="imgs/avatar5.png" />
<h2>visibility:是否显示html元素</h2>
<h3>visible：显示</h3>
<h3>hidden:隐藏</h3>
<h1 onmouseover="testvisibility1();" onmouseout="testvisibility2();">图片的隐藏和显示</h1><br>
</body>
</html>
3.关于定位的属性设置
position：设置HTML元素的定位方式
static：默认值。无特殊定位，html元素遵循HTML定位规则
absolute:绝对定位。脱离HTML默认的定位规则，使用left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
relative：相对定位。不脱离HTML默认的定位规则，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
left【左距】，right【右距】 ， top【上距】 ， bottom【下距】
必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。
HTML默认的定位规则，html元素在HTML文件中按照从左上角向右下角一次排列，遇见块级元素折行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位设置</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left:10%;
top:100px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 1000px;
top:70%;
}
</style>
</head>
<body>
<h1>position</h1>
<hr>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>z-index：设置对象的层叠顺序
较大 number 值的对象会覆盖在较小 number 值的对象之上
注意:z-index属性是的有效性与position属性有关。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素的层叠</title>
<style>
#div1{
width: 300px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#div2{
width: 300px;
height: 200px;
background-color: blue;
position: absolute;
left: 150px;
top: 160px;
z-index: 2;
}
#div3{
width: 300px;
height: 200px;
background-color: yellow;
position: absolute;
left: 200px;
top: 220px;
z-index: 3;
}
#div4{
width: 300px;
height: 200px;
background-color: green;
position: absolute;
left: 250px;
top: 280px;
z-index: 4;
}
div p{
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
<p align="right">div1--[z-index=1]</p>
</div>
<div id="div2">
<p align="right">div2--[z-index=2]</p>
</div>
<div id="div3">
<p align="right">div3--[z-index=3]</p>
</div>
<div id="div4">
<p align="right">div4--[z-index=4]</p>
</div>
</body>
</html>