CSS+DIV Web ページのスタイルとレイアウト、ページとブラウザの要素_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS+DIV Web ページのスタイルとレイアウト、ページとブラウザの要素_html/css_WEB-ITnose に精通している

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

ページやブラウザには、テキスト、画像、フォーム、フォームなどの他にも、さまざまな要素が存在します。前回のブログ記事では、エディターによるフォームの設定方法と、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 の学習、未完成です...

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。