search

Home >Web Front-end >HTML Tutorial >CSS supplement_html/css_WEB-ITnose

CSS supplement_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:451064browse

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




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

    Statement：
    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
    Previous article：Build chrome, sass debugging environment_html/css_WEB-ITnoseNext article：Build chrome, sass debugging environment_html/css_WEB-ITnose

    Related articles

    See more