1. Configuración de propiedades de uso común en CSS
1.1 Acerca de la configuración de la lista
Lista: 1. Lista ordenada <ol><li></li> </ol>
2. Lista desordenada <ul><li></li> </ul>
3. Lista personalizada <dl> <dt> <dd> </dd> </dt> </dl>
La configuración de la lista es cambiar el logotipo al principio de la lista.
list-style-image: establecer el icono del logotipo ninguno | 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 Acerca de la configuración de la mesa
border-collapse: establece el borde entre las celdas de la tabla para fusionar [ separar | contraer los lados adyacentes se fusionan ]
espaciado de borde: Forme un solo cuadroinmediatamente, lafila lateral y el paso de las celdas en horizontal y vertical. 【Número px】
celdas vacías: cuando no hay contenido en la celda, si el borde de la celda muestra mostrar | ocultar
<!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 Acerca de la configuración del parche
Parche: la distancia entre el elemento secundario y el elemento principal
Si el elemento principal es set-inner patch [padding]
Si establece un elemento secundario --- parche externo [margen]
relleno: 12px 15px 28px 35px
Los cuatro valores de los parámetros actuarán en los cuatro lados en el orden de arriba a la derecha, abajo a la izquierda.
relleno: 12px
Proporcione uno, que se utilizará para los cuatro lados
relleno: 12px 15px
Dos, el primero es para arriba-abajo, el segundo es para izquierda-derecha
relleno: 12px 15px 28px
Se proporcionan tres, el primero es para arriba, el segundo es para izquierda-derecha y el tercero es para abajo
<!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. Acerca de la configuración de atributos del diseño
flotar: si y cómo un elemento html flotante [ ninguno no | izquierda {flotante izquierda} | derecha {flotante} derecha ]
Elementos a nivel de bloque: se envuelven automáticamente antes y después de los elementos.
Elementos en línea: organizados una vez de izquierda a derecha, a menos que el elemento <br> se utilice para forzar un salto de línea.
<!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. Configurar la ocultación y visualización de elementos html
mostrar: si y cómo se muestran los elementos html
bloque: pantalla
ninguno: oculto
visibilidad: si mostrar elementos html
visible: pantalla
oculto: oculto
¿La diferencia entre visualización y visibilidad ?
Después de que Display oculte el elemento, el espacio físico del elemento desaparecerá,
Visibilidad: Después de ocultar el elemento, el espacio físico del elemento no desaparecerá, dejando un espacio en blanco.
<!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. Acerca de la configuración de la propiedad de posicionamiento
posición: establece el método de posicionamiento de los elementos HTML
estático: el valor predeterminado. Sin posicionamiento especial, los elementos html siguen las reglas de posicionamiento HTML
absoluto : Posicionamiento absoluto. Apártese de las reglas de posicionamiento predeterminadas de HTML , use los atributos izquierdo , derecho , superior , inferior y otros para realizar un posicionamiento absoluto en relación con el objeto principal más cercano con la mayor cantidad de configuraciones de posicionamiento.
relativo : Posicionamiento relativo. No se desvía de las reglas de posicionamiento predeterminadas de HTML , pero compensará la posición en el flujo de documentos normal de acuerdo con los atributos izquierdo , derecho , superior , inferior y otros
izquierdo [margen izquierdo], derecho [margen derecho], superior [margen superior], inferior [margen inferior]
El valor del atributo de posición debe definirse como absoluto o relativo para que este valor surta efecto .
Las reglas de posicionamiento predeterminadas de HTML, los elementos html se organizan en el archivo HTML desde la esquina superior izquierda a la esquina inferior derecha a la vez, y los elementos a nivel de bloque se pliegan.
<!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>índice z: establece el orden de apilamiento de los objetos
Los objetos con un valor numérico mayor sobrescribirán los objetos con un valor numérico menor
Nota: La validez del índice z atributo está relacionado con la p osición atributo.
<!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>