ホームページ > 記事 > ウェブフロントエンド > CSS+DIV Web ページのスタイルとレイアウト、ページとブラウザの要素_html/css_WEB-ITnose に精通している
CSS+DIV Web ページのスタイルとレイアウト、ページとブラウザの要素_html/css_WEB-ITnose に精通している
- WBOYオリジナル
- 2016-06-24 11:51:061117ブラウズ
ページやブラウザには、テキスト、画像、フォーム、フォームなどの他にも、さまざまな要素が存在します。 前回のブログ記事では、エディターによるフォームの設定方法と、CSSでのフォームとフォームの設定方法を中心に紹介しました。 , 今日は豊富なハイパーリンク効果、マウス効果、ページスクロールバーについて簡単に紹介します。まずはマインドマップを見てみましょう:
次に、編集者は上記のマインドマップの足跡をたどって、お金持ちの中をゆっくりと探索していきます。ハイパーリンクの特殊効果については、まず動的ハイパーリンクを紹介します。例のコードと実行中の効果:
動的ハイパーリンク<span style="font-size:18px;"><span style="font-size:18px;"><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></span></span> 実行中の効果は次のとおりです:
上のコードを分析すると、最初に table タグがページを区切っていることが簡単にわかります。ページ内にバナーを配置し、テーブルマークを使用して横方向のメニューを配置すると、美しいブラウジング効果が得られます。ここで説明する価値があるのは、動的ハイパーリンクの効果をそれぞれ設定する a:link、a:visited、および a:hover です。次に、ボタンのハイパーリンクを見てみましょう。
ボタンのハイパーリンク
<span style="font-size:18px;"><html><head><title>按钮超链接</title><style><!--a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px;}a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171;}a:hover{ /* 鼠标经过时的超链接 */ color:#821818; /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#e2c4c9; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE;}--></style> </head><body> <a href="#">首页</a> <a href="#">心情日记</a> <a href="#">学习心得</a> <a href="#">工作笔记</a> <a href="#">生活琐碎</a> <a href="#">其他</a></body></html></span> 実行中のエフェクトは次のとおりです。マウスを上に移動するとそれぞれ変更が加えられましたが、CSSではどのように実装されているのでしょうか？コードを分析しましょう。まず、ボタン全体を均一に設定する a マークがあります。a:link と a:visited は同じ設定を使用し、ここでは同じ border-top と border-left が使用されます。底部と右側の境界線は同じ色を使用しており、これによりシャドウ効果が実現され、これら 2 つの色はホバー時に巧みに置き換えられ、ボタンのような感覚を与えます。引き続きエンボス ハイパーリンクを見てみましょう。サンプル コードを見てみましょう。ランニング効果: 同じように、マウスを置くと、先ほどのボタンよりも彼女の変更がより豪華になります。コードを分析すると、テキスト部分はまだ非常に単純で、テーブル、バナー、そしてその後です。無数のタグが並んでいて、ハイパーリンクを示しています。キーポイントです。はい、この横長のテーブルマークが背景画像として設定されており、table.banner は小さな画像を繰り返しています。 CSS コントロールのマウス矢印を見て、コード例と操作効果を見てみましょう:
CSS はマウスの矢印を制御します<span style="font-size:18px;"><html><head><title>浮雕超链接</title><style><!--body{ padding:0px; margin:0px; background-color:#f5eee1;}table.banner{ background:url(banner1_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button1_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button1.jpg) no-repeat; /* 超链接背景图片 */}a:link{color:#654300;}a:visited{color:#654300;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button2.jpg) no-repeat; /* 变换背景图片 */}--></style> </head><body><table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner1_left.jpg" border="0"></td></tr></table><table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">在线用户</a><a href="#">查询网友</a><a href="#">在线好友</a><a href="#">好友名单</a><a href="#">查看讯息</a><a href="#">发送讯息</a></td></tr></table></body></html></span> の操作効果は以下に示すとおりです: マウスをポイントしてヘルプすると、マウスはマウス A の中にあります。右上隅に疑問符が表示されます。ヘルプ ボタンには別のクラス、cursor: help を設定しました。もちろん、これにはヘルプだけでなく多くの値があります。友達は自分で試してみることができます。最後に、サンプルコードとページローリングバーの動作効果を見てみましょう:
ローリングバー
<span style="font-size:18px;"><html><head><title>鼠标变幻超链接</title><style><!--body{ padding:0px; margin:0px; background-color:#efe5e2;}table.banner{ background:url(banner2_bg.jpg) repeat-x; width:100%;}table.links{ background:url(button3_bg.jpg) repeat-x; font-size:12px; width:100%}a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button3.jpg) no-repeat; /* 超链接背景图片 */}a:link, a visited{color:#2d2d26;}a:hover{ color:#FFFFFF; text-decoration:none; background:url(button4.jpg) no-repeat; /* 变换背景图片 */}a.help:hover{ /* “帮助”按钮的样式 */ cursor:help; /* 变幻鼠标形状 */}--></style> </head><body><table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner2_left.jpg" border="0"></td></tr></table><table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr></table></body></html></span>E の動作効果は次のとおりです:
上の図の動作に示されているように、これはローリング バーは、IE のデフォルトではなく、非常にゴージャスな青色です。ページをズームアウトすると、右側のスクロール バーも非常に単純になっています。自分で試すことができます。
編集者のメッセージ: このブログ投稿の編集者は、主にページとブラウザーの設定方法に関する CSS の関連知識ポイントを簡単に紹介します。ハイパーリンクの特殊効果、マウス矢印の CSS 制御、ハイパーリンクの特殊効果を詳しく紹介する記事。動的ハイパーリンクでは、まずテーブル マークを使用してページ内のバナーを区切ります。テーブルマークを水平メニューに組み込んで、美しいブラウジング効果を実現します。ここで説明する価値があるのは、a:link、a:visited、および a:hover がそれぞれ動的ハイパーリンクの効果を設定することです。ボタン接続には最初に a マークがあり、これによりボタン全体が均一に設定されます。 :visited は同じ設定を使用し、border-bottom と border-right は同じ色を使用します。これにより、ホバーではこれら 2 つの色が使用されます。ボタンのような感覚を与えるように巧みに置き換えられ、最後に表とバナーがレリーフ的に接続され、その上にハイパーリンクを示すマークが無数に並べられています。ポイントは、この横長の表マークを背景に設定することです。画像、table.banner は小さな画像を繰り返します。CSS の内容は難しくありません。時間、BS の学習、未完成です...