CSS 補足_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 補足_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:45

オリジナル

1071 人が閲覧しました

まず、DIV+CSS を一緒に使用してください

現在、特に一部の電子商取引やポータルでは、フロントエンドの効果がますます顕著になってきており、その多くはページレイアウトを制御するために元の HTML を使用していません。 div+CSSを使用します。
まず、div+css を使用してページレイアウトを制御する方法を紹介する例を示します。結局のところ、これらは私たちが行うものではありません。

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

ログイン後にコピー

2 番目に、スクリプトで CSS スタイルを変更する方法、わずか 2 ステップ

1. 設定する必要がある対象要素を取得しますcss スタイル
2. ターゲット要素の css スタイルを変更する一般的に使用される方法は 2 つあります:
インライン css 属性値を変更します (例: obj.style.Attribute name = 属性値)
html 要素の class 属性を変更します。例: obj.className= class selector

スクリプト内の css 属性名は、ページ内の静的 css 属性名とまったく同じではないことに注意してください。
スクリプト内の CSS 属性名は、元の静的 CSS 属性の (-) を削除し、最初の単語の最初の文字を小文字にし、後続の各単語の最初の文字を大文字にします。たとえば、静的 CSS プロパティの名前は「background-color」、スクリプト内の対応するプロパティの名前は「backgroundColor」です。元の静的 CSS 属性に (-) が含まれていない場合、スクリプト内の CSS 属性名は元の静的 CSS 属性名と同じになります。