css properties:
1. The border-radius attribute
Using the CSS3 border-radius property, you can make "rounded corners" to any element.
/* upper left corner, upper right corner, lower right corner, lower left corner*/ border-radius: 20px 0 30px 0;
2. float attribute
① left : The element floats to the left.
② right : The element floats to the right.
③ none: the default value.
④ inherit: Inherit the float attribute from the parent element.
3. Position attribute: specifies the positioning type of the element. That is, the elements are separated from the layout of the document flow and displayed anywhere on the page.
① absolute : Absolute positioning; out of the layout of the document flow, the remaining space is filled by the following elements. The starting position of positioning is the nearest parent element (postion is not static), otherwise it is the Body document itself.
② relative : Relative positioning; does not depart from the layout of the document flow, only changes its own position, and leaves a blank area at the original position of the document flow. The positioning starts at this element's original position in the document flow.
③ fixed : Fixed positioning; similar to absolute, but does not change position with the movement of the scroll bar.
④ static : default value; default layout.
Auxiliary attributes:
The position attribute just keeps the element out of the document flow. To display the element in the desired position, you need to use the following attributes (position: static does not support these):
①left: Indicates how many pixels are inserted to the left of the element, and how many pixels are moved to the right of the element.
②right: Indicates how many pixels are inserted to the right of the element, and how many pixels the element moves to the left.
③top: Indicates how many pixels are inserted above the element and how many pixels the element moves down.
④bottom: Indicates how many pixels are inserted below the element and how many pixels the element moves up.
The value of the above attribute can be negative, unit: px.
z-index is only valid on elements whose position attribute value is relative or absolute or fixed.
position positioning and float layout to achieve love effect
css：
div{
/* width: 300px;
height: 300px;
border: 1px solid rebeccapurple; */
/* float left and right */
/* float: left; */
}
/* Positioning: son and father*/
.fu{
width: 300px;
height: 300px;
position: relative;
/* border: 1px solid red; */
}
.z1, .z2, .z3{
position: absolute;
}
.z1{
width: 300px;
height: 300px;
left: 200px;
top: 100px;
/* border: 1px solid rebeccapurple; */
background-color: rgb(228, 70, 97);
border-radius: 50%;
}
.z2{
width: 300px;
height: 300px;
top:200px;
left: 300px;
/* border: 1px solid green; */
background-color:rgb(228, 70, 97);
transform:rotate(45deg);
}
.z3{
width: 300px;
height: 300px;
left: 400px;
top: 100px;
/* border: 1px solid red; */
background-color: rgb(228, 70, 97);
/* circle */
border-radius: 50%;
}
html:
<div class="fu">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
</div>
Tai Chi gossip map to achieve dynamic effects:
css：
body{
background-color: gainsboro;
}
.fu{
width: 500px;
height: 500px;
/* border: 1px solid black; */
position: relative;
/* background-color: gainsboro; */
animation: circles 2s linear infinite;
}
.fu>div{
position: absolute;
}
.z1{
width: 250px;
height: 500px;
background-color: white;
border-radius: 250px 0px 0px 250px;
}
.z2{
width: 250px;
height: 500px;
background-color: black;
border-radius: 0px 250px 250px 0px;
left: 250px;
}
.z3{
width: 250px;
height: 250px;
background-color:black;
border-radius: 50%;
left: 125px;
z-index: 1;
}
.z4{
width: 250px;
height: 250px;
background-color: white;
border-radius: 50%;
left: 125px;
top: 250px;
z-index: 1;
}
.z5{
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
left: 200px;
top: 85px;
z-index: 2;
}
.z6{
width: 80px;
height: 80px;
background-color: black;
border-radius: 50%;
left: 200px;
top: 335px;
z-index: 2;
}
@keyframes circles{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
html:
<div class="fu">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div class="z4"></div>
<div class="z5"></div>
<div class="z6"></div>
</div>
The renderings are as follows:
JS basics
js-dom
What is dom manipulation? interact with html
1. Get the html tag and return an element object
2. Set value/change value
button attribute:
The onclick attribute represents a click event attribute
The onclick attribute value is a function name ()
Indicates that once the button is clicked, this function is called
<body>
<p>
What is dom manipulation? Interact with html<br>
1. Get the html tag and return an element object<br>
2. Set value/change value<br>
</p>
<input id="inp1" type="text" value="aa">
<ul id="ul1">
<li>1-a-12</li>
<li>2-b-13</li>
<li>3-c-14</li>
</ul>
<button οnclick="changeTest()">replace button</button>
<ul>
<li>The onclick attribute represents a click event attribute</li>
<li>The onclick attribute value is a function name()</li>
<li>Indicates that once the button is clicked, this function is called</li>
</ul>
</body>
<script>
//One, a single setting
//1, get
let inp1=document.getElementById('inp1')
//2, set the value
inp1.value='Cao Cao'
// 2. Batch settings
let arr2=[
{id:1,name:'Cao Cao',age:36},
{id:2,name:'Liu Bei',age:34},
{id:3,name:'Sun Quan',age:30},
]
//1. Get ul
let ul1=document.getElementById('ul1')
function changeTest(){
//2, replace
let s=''
arr2.forEach((e)=>{
s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})
ul1.innerHTML=s
}
</script>
Qiangsheng Group Case:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
button{
width: 100px;
height: 40px;
margin-left: 40px;
border: none;
outline: none;
border-radius: 8px;
color: white;
font-size: large;
cursor: pointer;
}
.fb>button:nth-child(1){
background-color: rebeccapurple;
}
.fb>button:nth-child(2){
background-color:red;
}
.fb>button:nth-child(3){
background-color: green;
}
.fb>button:nth-child(4){
background-color: blue;
}
/* Each tr in tbody changes color */
tbody>tr:nth-child(odd){
background-color: skyblue;
}
tbody>tr:nth-child(even){
background-color: rgb(227, 181, 62);
}
</style>
</head>
<body>
<h1 style="text-align: center;">Qiangsheng Group employee salary table</h1>
<h3 style="text-align: center;">Qiangsheng Group's business philosophy: the greater the storm, the more expensive the fish</h3>
<div class="fb" style="text-align: center;">
<button οnclick="generateTab()">Generate a table</button>
<button οnclick="doubleSalary()">Double Salary</button>
<button οnclick="restEmp()">Retirees</button>
<button οnclick="sumSalary()">Total salary</button>
</div>
<table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
<thead>
<tr>
<th><a href="javascript:orderEmp('id')">序号</a></th>
<th>Name</th>
<th><a href="javascript:orderEmp('age')">年龄</a></th>
<th><a href="javascript:orderEmp('salary')">薪资</a></th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Gao Qiqiang</td>
<td>36</td>
<td>200</td>
</tr>
</tbody>
<tfoot id="tfoot">
<tr style="text-align: center;">
<td colspan="4">Total salary:</td>
</tr>
</tfoot>
</table>
</body>
<script>
let emps=[
{id:1,name:'Gao Qiqiang',age:36,salary:200},
{id:2,name:'Gao Qisheng',age:30,salary:300},
{id:3,name:'Tang Xiaolong',age:35,salary:100},
{id:4,name:'Tang Xiaohu',age:35,salary:100},
{id:5,name:'Chen Tai',age:66,salary:100},
]
//Obtain
let tbody=document.getElementById('tbody')
let tfoot=document.getElementById('tfoot')
function generateTab(){
//Call functions
createTab(emps)
}
//Repeated code, encapsulated into a function
function createTab(arr){
let s=''
arr.forEach((e)=>{
s+=`<tr>
<td>${e.id}</td>
<td>${e.name}</td>
<td>${e.age}</td>
<td>${e.salary}</td>
</tr>`
})
tbody.innerHTML=s
}
let newEmps;
function doubleSalary(){
//After the salary is doubled, return a new array
newEmps=emps.map((e)=>{
e.salary*=2
return e
})
//Call functions
createTab(newEmps)
}
//retire function
function restEmp(){
let newEmps=emps.filter((e)=>{
return e.age>65
})
//Call functions
createTab(newEmps)
}
//salary sum
function sumSalary(){
let salarySum
if(newEmps){
salarySum=newEmps.reduce((sum,e)=>{
return sum+=e.salary
},0)
}else{
salarySum=emps.reduce((sum,e)=>{
return sum+=e.salary
},0)
}
console.log(salarySum)
tfoot.innerHTML=
`<tr style="text-align: center;">
<td colspan="4">Total salary: ${salarySum}</td>
</tr>`
}
//sort
let a=true
function orderEmp(type){
a=!a //every call, a is reversed
let newEmps2
switch(type){
case 'id':
console.log('Sort by id')
newEmps2=emps.sort((e1,e2)=>{
return a? e2.id-e1.id : e1.id-e2.id
})
break;
case 'age':
console.log('Sort by age')
break;
case 'salary':
console.log('Sort by salary')
break;
}
//Call the function that generates tbody
createTab(newEmps2)
}
</script>
</html>
