ホームページ > 記事 > ウェブフロントエンド > CSS+DIVを使いこなす基本のまとめ(2)_html/css_WEB-ITnose
CSS+DIVを使いこなす基本のまとめ(2)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:27:351176ブラウズ
前の記事では、CSS+DIV 関連の知識をいくつかまとめました。今回は、この記事を要約し、次の側面から学びます。色と絵で設定します。 2、次に、テーブルとフォームの作成を見てみましょう。テーブルの制作は主に のタグを使用しております。
| 、 | を作成するのは比較的簡単ですが、CSS、JavaScript、XML、Ajax を使用すると、当然ながら非常に複雑になります。簡単な例を次に示します:
<html><head><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> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr> <td class="leftbanner"> <br><br>首页<br><br>分类讨论 <br><br>谈天说地<br><br>精华区 <br><br>我的信箱<br><br>休闲娱乐 <br><br>立即注册<br><br>离开本站 </td> <td class="mainpart">正文内容...</td> </tr></table></body></html> 2. このフォームは個人情報を送信するためのものであり、Web ページによく表示されるフォームでもあります:
効果は図に示すとおりです:
3. ブラウザ内のいくつかの特別な要素を見てみましょう: 1. ハイパーリンクの特殊効果: 一部のハイパーリンクでは、マウスをその上に置くと、色が変わり、マウスの形状が変わります。 CSS の設定方法は、次の例を参照してください: <html><head><title>背景水平重复</title><style><!--body{ padding:0px; margin:0px;}.topbanner{ background-image:url(bg2.jpg); /* 背景图片 */ background-repeat:repeat-x; /* 水平方向重复 */}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td class="topbanner"><img src="banner2.jpg" border="0"></td> <!-- 配上banner图片 --> </tr></table></body><html> レンダリング:
2.ヘルプ ボタンが表示されます。マウスの形状を固有のものに変更します。特殊効果については、次の例を参照してください。 <html><head><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> </head><body> <table class="datalist"> <caption>年度收入 2004 - 2007</caption><!--添加表头--> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html> <html><head><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> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女</p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看书 <input type="checkbox" name="hobby" id="net" value="net" class="check">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p></form></body></html>
レンダリング:
四,在制作使用菜单,我以百度的首页用例子,通过这个例子学习一下: <html><head><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> </head><body><table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0"></td></tr></table><table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr></table></body></html>
五、CSSに関するフィルター効果を設定して、要件をよりよく満たすことが主な機能です。機能を見てみましょう最初: 以下は簡単な説明です: 1. フィルター: Alpha 説明: 不透明度: 0 ～ 100 の範囲の開始値、0 は透明、100 は元の画像です。
構文: 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を組み合わせて学習すると良いでしょう。
声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。 |
|---|