CSS+DIVを使いこなす基本のまとめ(2)_html/css_WEB-ITnose

前の記事では、CSS+DIV 関連の知識をいくつかまとめました。今回は、この記事を要約し、次の側面から学びます。色と絵で設定します。 2、次に、テーブルとフォームの作成を見てみましょう。テーブルの制作は主に のタグを使用しております。

、、

、

を作成するのは比較的簡単ですが、CSS、JavaScript、XML、Ajax を使用すると、当然ながら非常に複雑になります。簡単な例を次に示します:

<title>利用背景颜色分块</title><style><!--body{	padding:0px;	margin:0px;	background-color:#ffebe5;	/* 页面背景色 */}.topbanner{	background-color:#fbc9ba;	/* 顶端banner的背景色 */}.leftbanner{	width:22%; height:330px;	vertical-align:top;	background-color:#6d1700;	/* 左侧导航条的背景色 */	color:#FFFFFF;	text-align:left;	padding-left:40px;	font-size:14px;}.mainpart{	text-align:center;}--></style>   

首页 分类讨论 谈天说地 精华区 我的信箱 休闲娱乐 立即注册 离开本站	正文内容...

2. このフォームは個人情報を送信するためのものであり、Web ページによく表示されるフォームでもあります:

効果は図に示すとおりです:

3. ブラウザ内のいくつかの特別な要素を見てみましょう:

1. ハイパーリンクの特殊効果: 一部のハイパーリンクでは、マウスをその上に置くと、色が変わり、マウスの形状が変わります。 CSS の設定方法は、次の例を参照してください:

<title>背景水平重复</title><style><!--body{	padding:0px;	margin:0px;}.topbanner{	background-image:url(bg2.jpg);		/* 背景图片 */	background-repeat:repeat-x;			/* 水平方向重复 */}--></style>   

レンダリング:

2.ヘルプ ボタンが表示されます。マウスの形状を固有のものに変更します。特殊効果については、次の例を参照してください。

<title>年度收入</title><style><!--.datalist{	border:1px solid #429fff;	/* 表格边框 */	font-family:Arial;	border-collapse:collapse;	/* 边框重叠 */}.datalist caption{	padding-top:3px;	padding-bottom:2px;	font:bold 1.1em;	background-color:#f0f7ff;	border:1px solid #429fff;	/* 表格标题边框 */}.datalist th{	border:1px solid #429fff;	/* 行、列名称边框 */	background-color:#d2e8ff;	font-weight:bold;	padding-top:4px; padding-bottom:4px;	padding-left:10px; padding-right:10px;	text-align:center;}.datalist td{	border:1px solid #429fff;	/* 单元格边框 */	text-align:right;	padding:4px;}--></style>    

年度收入 2004 - 2007

	2004	2005	2006	2007
拨款	11,980	12,650	9,700	10,600
捐款	4,780	4,989	6,700	6,590
投资	8,000	8,100	8,760	8,490
募捐	3,200	3,120	3,700	4,210
销售	28,400	27,100	27,950	29,050
杂费	2,100	1,900	1,300	1,760
总计	58,460	57,859	58,110	60,700

3. テキストが多すぎるため、スクロールを設定する必要があります。この例の設定を見てください:

<title>表单</title><style><!--form{	border: 1px dotted #AAAAAA;	padding: 1px 6px 1px 6px;	margin:0px;	font:14px Arial;}input{							/* 所有input标记 */	color: #00008B;	}input.txt{						/* 文本框单独设置 */	border: 1px inset #00008B;	background-color: #ADD8E6;}input.btn{						/* 按钮单独设置 */	color: #00008B;	background-color: #ADD8E6;	border: 1px outset #00008B;	padding: 1px 2px 1px 2px;}select{	width: 80px;	color: #00008B;	background-color: #ADD8E6;	border: 1px solid #00008B;}textarea{	width: 200px;	height: 40px;	color: #00008B;	background-color: #ADD8E6;	border: 1px inset #00008B;}--></style>   

请输入您的姓名:

请选择你最喜欢的颜色:
红 绿 蓝 黄 青 紫

请问你的性别:
男
女

你喜欢做些什么:
看书 上网 睡觉

我要留言:

レンダリング:

四,在制作使用菜单,我以百度的首页用例子,通过这个例子学习一下:

<title>动态超链接</title><style><!--body{	background:url(bg9.gif);	/* 页面背景图片 */	margin:0px; padding:0px;	cursor:pointer;}.chara1{	font-size:12px;	background-color:#90bcff;	/* 导航条的背景颜色 */}.chara1 td{	text-align:center;}a:link{							/* 超链接正常状态下的样式 */	color:#005799;				/* 深蓝 */	text-decoration:none;		/* 无下划线 */}a:visited{						/* 访问过的超链接 */	color:#000000;				/* 黑色 */	text-decoration:none;		/* 无下划线 */}a:hover{						/* 鼠标经过时的超链接 */	color:#FFFF00;				/* 黄色 */	text-decoration:underline;	/* 下划线 */}--></style>   

首页

心情日记

Free

一起走到

从明天起

纸飞机

下一站

效果图:

五、CSSに関するフィルター効果を設定して、要件をよりよく満たすことが主な機能です。機能を見てみましょう最初:

以下は簡単な説明です:

1. フィルター: Alpha

構文: STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity) 、スタイル=スタイル、StartX=startX、StartY=startY、FinishX=finishX、FinishY=finishY)"

説明:

不透明度: 0 ～ 100 の範囲の開始値、0 は透明、100 は元の画像です。

FinishOpacity: 目標値。 ... yle ="2")

2. フィルター: ブラー

構文: STYLE="filter:Blur(Add = 追加、Direction = 方向、Strength = 強さ)"

説明 :

追加: 通常は 1、または 0。

方向：角度、0〜315度、ステップサイズは45度です。

Strength: 効果の成長の値。通常は 5 で十分です。

例: filter:Blur(Add="1",Direction="45",Strength="5")

3. フィルター: Chroma

構文: STYLE= "フィルター:Chroma(Color = color)"

説明: color: #rrggbb 形式、任意。 4. フィルター: DropShadow カラー、OffX= offX、OffY=offY、Positive=positive)"

説明: カラー: #rrggbb 形式、任意。

Offx: X 軸の偏差値。

Offy: Y 軸オフセット値。

正: 1 または 0。

例: filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. フィルター: FlipH

構文: STYLE="filter:FlipH"

例: filter:FlipH

6. フィルター: FlipV

グラムタックス: STYLE="filter:FlipV"

例：フィルター:FlipV

7. フィルター: グロー

構文: STYLE="filter:Glow(Color=color, Strength=strength)"

説明:

色:明るい色。

strength（0-100）

example：filter：glow（color = "＃6699cc"、strength = "5"）

8

構文: STYLE="filter:Gray"

例: filter:Gray

9. フィルター: invert

構文: STYLE ="filter:Invert"

10.フィルター: マスク ter:Mask (カラー ==

カラー: #rrggbb 形式。

方向: 角度、0 ～ 315 度、ステップ サイズは 45 度です。

の例 ： ： ： ： ： ：

: Shadow (color = "#6699cc"、diaming = "135")

12、Filter: Wave

grammar: Filter: Wave (ADD = ADDDDDDDDDDD DDDDDDDDDDDD DDDDDDDDDD DDDDDDDDDDDDD = ADD 、Freq=freq、LightStrength=strength、Phase=phase、Strength=strength)

説明:

Add: 通常は 1 または 0。

Freq: 変形値。

LightStrength: 変形率。

フェーズ: 角度変形の割合。

強度: 変形強度。

例: filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、フィルター: Xray

構文: STYLE="フィルター: IE ブラウザーに統合されたコレクション。 IEブラウザのみで使用可能！したがって、必要に応じて、PS の使用方法も学ぶ必要があります。

上記は CSS+DIV の 2 番目の概要であり、開発でよく使用するものでもあります。ここでは前回学んだことをまとめて、HTMLベースのブログリンクWebページ作成の基礎、HTML+CSSを組み合わせて学習すると良いでしょう。