1. Use DIV with CSS Now the front-end effect is getting more and more dazzling, especially some e-commerce or portals, many of which do not use original HTML is used to control the page layout, and div css is used.
First, let’s give an example to introduce how to use div css to control the page layout. Just have a brief understanding. After all, these are not what we do.
<html><head><title>css的综合使用: DIV+CSS</title><style type="text/css"> #head { height: 15%; background-color: blue; padding: 5px; } #body { height: 75%; background-color: gray; } #left { width: 15%; height: 100%; background-color: red; float: left; } #main { width: 85%; height: 100%; background-color: green; float: right; } #foot { height: 10%; background-color: orange; padding: 5px; } </style></head><body style="text-align: center;"> <div id="head">上面</div> <div id="body"> <div id="left">左边</div> <div id="main">右边</div> </div> <div id="foot">下面</div></body></html>Copy after login
Second, how to modify the css style in the script, just 2 steps 1. Get the target element that needs to set the css style
2. Modify the css style of the target element. There are two commonly used methods:
Modify the inline css attribute value, such as: obj.style.Attribute name = attribute value
Modify the class attribute of the html element, For example: obj.className=class selector
It is worth noting that the css attribute name in the script is not exactly the same as the static css attribute name in the page.
The css attribute name in the script is to remove the (-) in the original static css attribute, make the first letter of the first word lowercase, and the first letter of each subsequent word capitalize. For example, the static css property is named background-color, and the corresponding property in the script is named backgroundColor. If the original static css attribute does not contain (-), the css attribute name in the script is the same as the original static css attribute name.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
