propiedades css:
1. El atributo border-radius
Usando la propiedad border-radius de CSS3, puede hacer "esquinas redondeadas" a cualquier elemento.
/* esquina superior izquierda, esquina superior derecha, esquina inferior derecha, esquina inferior izquierda*/ border-radius: 20px 0 30px 0;
2. atributo flotante
① izquierda: el elemento flota hacia la izquierda.
② derecha: el elemento flota a la derecha.
③ ninguno: el valor predeterminado.
④ heredar: hereda el atributo flotante del elemento principal.
3. Atributo de posición: especifica el tipo de posicionamiento del elemento. Es decir, los elementos se separan del diseño del flujo del documento y se muestran en cualquier parte de la página.
① absoluto : Posicionamiento absoluto; fuera del diseño del flujo del documento, el espacio restante se llena con los siguientes elementos. La posición inicial de posicionamiento es el elemento principal más cercano (la posición no es estática), de lo contrario, es el propio documento del cuerpo.
② relativo : posicionamiento relativo; no se aparta del diseño del flujo de documentos, solo cambia su propia posición y deja un área en blanco en la posición original del flujo de documentos. El posicionamiento comienza en la posición original de este elemento en el flujo del documento.
③ fijo : posicionamiento fijo; similar al absoluto, pero no cambia de posición con el movimiento de la barra de desplazamiento.
④ estático : valor predeterminado; diseño predeterminado.
Atributos auxiliares:
El atributo de posición simplemente mantiene el elemento fuera del flujo del documento. Para mostrar el elemento en la posición deseada, debe usar los siguientes atributos (posición: estática no los admite):
①izquierda: indica cuántos píxeles se insertan a la izquierda del elemento y cuántos píxeles se mueven a la derecha del elemento.
②derecha: indica cuántos píxeles se insertan a la derecha del elemento y cuántos píxeles se mueve el elemento a la izquierda.
③superior: indica cuántos píxeles se insertan sobre el elemento y cuántos píxeles se mueve el elemento hacia abajo.
④inferior: indica cuántos píxeles se insertan debajo del elemento y cuántos píxeles sube el elemento.
El valor del atributo anterior puede ser negativo, unidad: px.
El índice z solo es válido en elementos cuyo valor de atributo de posición es relativo, absoluto o fijo.
posicionamiento de posición y diseño de flotación para lograr el efecto de amor
CSS:
div{
/* ancho: 300px;
altura: 300px;
borde: 1px sólido rebeccapurple; */
/* flotar a izquierda y derecha */
/* flotador izquierdo; */
}
/* Posicionamiento: hijo y padre*/
.fu{
ancho: 300px;
altura: 300px;
posición: relativa;
/* borde: 1px rojo sólido; */
}
.z1, .z2, .z3{
posición: absoluta;
}
.z1{
ancho: 300px;
altura: 300px;
izquierda: 200px;
arriba: 100px;
/* borde: 1px sólido rebeccapurple; */
color de fondo: rgb (228, 70, 97);
borde-radio: 50%;
}
.z2{
ancho: 300px;
altura: 300px;
arriba: 200px;
izquierda: 300px;
/* borde: 1px verde sólido; */
color de fondo: rgb (228, 70, 97);
transformar: rotar (45 grados);
}
.z3{
ancho: 300px;
altura: 300px;
izquierda: 400px;
arriba: 100px;
/* borde: 1px rojo sólido; */
color de fondo: rgb (228, 70, 97);
/* círculo */
borde-radio: 50%;
}
html:
<div class="fu">
<div clase="z1"></div>
<div clase="z2"></div>
<div clase="z3"></div>
</div>
Mapa de chismes de Tai Chi para lograr efectos dinámicos:
CSS:
cuerpo{
color de fondo: gainsboro;
}
.fu{
ancho: 500px;
altura: 500px;
/* borde: 1px negro sólido; */
posición: relativa;
/* color de fondo: gainsboro; */
animación: círculos 2s lineal infinito;
}
.fu>div{
posición: absoluta;
}
.z1{
ancho: 250px;
altura: 500px;
color de fondo: blanco;
borde-radio: 250px 0px 0px 250px;
}
.z2{
ancho: 250px;
altura: 500px;
color de fondo: negro;
borde-radio: 0px 250px 250px 0px;
izquierda: 250px;
}
.z3{
ancho: 250px;
altura: 250px;
color de fondo: negro;
borde-radio: 50%;
izquierda: 125px;
índice z: 1;
}
.z4{
ancho: 250px;
altura: 250px;
color de fondo: blanco;
borde-radio: 50%;
izquierda: 125px;
arriba: 250px;
índice z: 1;
}
.z5{
ancho: 80px;
altura: 80px;
color de fondo: blanco;
borde-radio: 50%;
izquierda: 200px;
arriba: 85px;
índice z: 2;
}
.z6{
ancho: 80px;
altura: 80px;
color de fondo: negro;
borde-radio: 50%;
izquierda: 200px;
arriba: 335px;
índice z: 2;
}
Círculos @keyframes{
desde{
transformar: rotar (0 grados);
}a{
transformar: rotar (360 grados);
}
}
html:
<div class="fu">
<div clase="z1"></div>
<div clase="z2"></div>
<div clase="z3"></div>
<div clase="z4"></div>
<div clase="z5"></div>
<div clase="z6"></div>
</div>
Las representaciones son las siguientes:
Conceptos básicos de JS
js-dom
¿Qué es la manipulación dom? interactuar con html
1. Obtenga la etiqueta html y devuelva un objeto de elemento
2. Establecer valor/cambiar valor
atributo del botón:
El atributo onclick representa un atributo de evento de clic
El valor del atributo onclick es un nombre de función ()
Indica que una vez que se hace clic en el botón, esta función se llama
<cuerpo>
<p>
¿Qué es la manipulación dom? Interactuar con html<br>
1. Obtenga la etiqueta html y devuelva un objeto de elemento<br>
2. Establecer valor/cambiar valor<br>
</p>
<entrada id="inp1" tipo="texto" valor="aa">
<ul id="ul1">
<li>1-a-12</li>
<li>2-b-13</li>
<li>3-c-14</li>
</ul>
<button onclick="changeTest()">reemplazar botón</button>
<ul>
<li>El atributo onclick representa un atributo de evento de clic</li>
<li>El valor del atributo onclick es un nombre de función()</li>
<li>Indica que una vez que se hace clic en el botón, se llama a esta función</li>
</ul>
</cuerpo>
<script>
//Uno, un solo escenario
//1, obtener
let inp1=document.getElementById('inp1')
//2, establecer el valor
inp1.value='Cao Cao'
// 2. Configuración de lotes
sea arr2=[
{id:1,nombre:'Cao Cao',edad:36},
{id:2,nombre:'Liu Bei',edad:34},
{id:3,nombre:'Sun Quan',edad:30},
]
// 1. Obtener ul
let ul1=document.getElementById('ul1')
función cambioPrueba(){
//2, reemplaza
vamos s=''
arr2.forEach((e)=>{
s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})
ul1.innerHTML=s
}
</script>
Caso del grupo Qiangsheng:
<!DOCTYPEhtml>
<html lang="es">
<cabeza>
<título>Documento</título>
<estilo>
botón{
ancho: 100px;
altura: 40px;
margen izquierdo: 40px;
borde: ninguno;
contorno: ninguno;
borde-radio: 8px;
color blanco;
tamaño de fuente: grande;
cursor: puntero;
}
.fb>botón:nth-child(1){
color de fondo: violeta rebecca;
}
.fb>botón:nth-child(2){
color de fondo: rojo;
}
.fb>botón:nth-child(3){
color de fondo: verde;
}
.fb>botón:nth-child(4){
color de fondo: azul;
}
/* Cada tr en tbody cambia de color */
tbody>tr:nésimo hijo(impar){
color de fondo: celeste;
}
tbody>tr:nth-child(even){
color de fondo: rgb (227, 181, 62);
}
</estilo>
</cabeza>
<cuerpo>
<h1 style="text-align: center;">Tabla de salarios de los empleados del Grupo Qiangsheng</h1>
<h3 style="text-align: center;">Filosofía empresarial del Grupo Qiangsheng: cuanto mayor es la tormenta, más caro es el pescado</h3>
<div class="fb" style="text-align: center;">
<button onclick="generateTab()">Generar una tabla</button>
<button onclick="doubleSalary()">Doble Salario</button>
<button onclick="restEmp()">Jubilados</button>
<button onclick="sumSalary()">Salario total</button>
</div>
<table style="margin-top: 30px;" alinear = "centro" borde = "1" relleno de celdas = "18" espaciado de celdas = "0">
<cabeza>
<tr>
<th><a href="javascript:orderEmp('id')">Opciones</a></th>
<th>Nombre</th>
<th><a href="javascript:orderEmp('edad')">年龄</a></th>
<th><a href="javascript:orderEmp('salary')">薪资</a></th>
</tr>
</thead>
<tcuerpo id="tcuerpo">
<tr>
<td>1</td>
<td>Gao Qiqiang</td>
<td>36</td>
<td>200</td>
</tr>
</tbody>
<tfoot id="tfoot">
<tr style="texto-alinear: centro;">
<td colspan="4">Salario total:</td>
</tr>
</tfoot>
</tabla>
</cuerpo>
<script>
let emps=[
{id:1,nombre:'Gao Qiqiang',edad:36,salario:200},
{id:2,nombre:'Gao Qisheng',edad:30,salario:300},
{id:3,nombre:'Tang Xiaolong',edad:35,salario:100},
{id:4,nombre:'Tang Xiaohu',edad:35,salario:100},
{id:5,nombre:'Chen Tai',edad:66,salario:100},
]
//Obtener
let tbody=document.getElementById('tbody')
let tfoot=document.getElementById('tfoot')
función generar Tabulador(){
//Llamar funciones
createTab(emps)
}
//Código repetido, encapsulado en una función
función crearTab(arr){
vamos s=''
arr.forEach((e)=>{
s+=`<tr>
<td>${e.id}</td>
<td>${e.nombre}</td>
<td>${e.age}</td>
<td>${e.salary}</td>
</tr>`
})
tbody.innerHTML=s
}
dejar newEmps;
function dobleSalario(){
//Después de duplicar el salario, devuelve una nueva matriz
newEmps=emps.map((e)=>{
e.salario*=2
volver e
})
//Llamar funciones
createTab(nuevosemps)
}
// función de retiro
función restEmp(){
let newEmps=emps.filter((e)=>{
volver e.edad>65
})
//Llamar funciones
createTab(nuevosemps)
}
//suma del salario
función sumaSalario(){
dejar la suma de salario
si(nuevosEmps){
Suelsalario=nuevosEmps.reduce((suma,e)=>{
volver sum+=e.salary
},0)
}demás{
sueldoSum=emps.reduce((sum,e)=>{
volver sum+=e.salary
},0)
}
consola.log(sumasalario)
tfoot.innerHTML=
`<tr style="text-align: center;">
<td colspan="4">Salario total: ${salarySum}</td>
</tr>`
}
//clasificar
sea a=verdadero
función orderEmp(tipo){
a=!a //cada llamada, a se invierte
dejar newEmps2
cambiar (tipo) {
Identificación del caso':
console.log('Ordenar por ID')
newEmps2=emps.sort((e1,e2)=>{
devolver un? e2.id-e1.id : e1.id-e2.id
})
romper;
caso 'edad':
console.log('Ordenar por edad')
romper;
caso 'salario':
console.log('Ordenar por salario')
romper;
}
//Llama a la función que genera tbody
createTab(newEmps2)
}
</script>
</html>
