1. Commonly used property settings in CSS
1.1 About the setting of the list
List--1. Ordered list <ol><li></li></ol>
2. Unordered list <ul><li></li></ul>
3. Custom list<dl><dt><dd></dd></dt></dl>
The setting of the list is to change the logo at the front of the list.
list-style-image: set logo icon 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 About the settings of the table
border-collapse: Set the border between table cells to merge [ separate | collapse adjacent sides are merged ]
border-spacing: Form single frameimmediately,side row and the pitch of the cells in the horizontal and vertical. 【Number px】
empty-cells: When there is no content in the cell, whether the border of the cell shows 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 About patch settings
Patch - the distance between the child element and the parent element
If the parent element is set-inner patch [padding]
If you set a child element---outer patch [margin]
padding:12px 15px 28px 35px
The four parameter values will act on the four sides in the order of top-right-bottom-left.
padding:12px
Provide one, which will be used for all four sides
padding:12px 15px
Two, the first is for up-down, the second is for left-right
padding:12px 15px 28px
Three are provided, the first is for up, the second is for left-right, and the third is for down
<!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. About the attribute settings of the layout
float: whether and how a floating html element [ none no | left {left floating} | right {float} Right ]
Block-level elements: automatically wrap before and after the elements
In-line elements: Arranged once from left to right, unless the <br> element is used to force a line break.
<!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. Set the hiding and display of html elements
display: whether and how html elements are displayed
block: display
none: hidden
visibility: Whether to display html elements
visible: display
hidden: hidden
The difference between display and visibility ?
After Display hides the element, the physical space of the element will disappear,
Visibility: After hiding the element, the physical space of the element will not disappear, leaving blank space.
<!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. About the property setting of positioning
position: Set the positioning method of HTML elements
static: The default value. No special positioning, html elements follow HTML positioning rules
absolute : Absolute positioning. Depart from the HTML default positioning rules , use left , right , top , bottom and other attributes to perform absolute positioning relative to the closest parent object with the most positioning settings.
relative : Relative positioning. Does not deviate from the default positioning rules of HTML , but will offset the position in the normal document flow according to the left , right , top , bottom and other attributes
left[left margin], right[right margin], top[top margin], bottom[bottom margin]
The position attribute value must be defined as absolute or relative for this value to take effect .
HTML default positioning rules, html elements are arranged in the HTML file from the upper left corner to the lower right corner at a time, and block-level elements are folded.
<!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: Set the stacking order of objects
Objects with a larger number value will overwrite objects with a smaller number value
Note: The validity of the z-index attribute is related to the osition attribute.
<!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>