CSS supplement_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:43:45
Original
1037 people have browsed it

  • 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.

    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template