ホームページ > 記事 > ウェブフロントエンド > ul liとcssを使って韓国風メニューコードを作成_体験交流
ul liとcssを使って韓国風メニューコードを作成_体験交流
- PHP中文网オリジナル
- 2016-05-16 12:06:501908ブラウズ
ウルリと css で韓国風のメニュー コードを作成_エクスペリエンス交換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net</title>
<style type="text/css">
<!--
* {font-size:13px;font-family:Arial;}
#nav li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;}
#nav li a {text-decoration:none; color:#666;}
#nav li a:hover {color:#000;}
.aa {border-top:4px solid #7BC110; background:#be6;}
.bb {border-top:4px solid #ff9900; background:#fc3;}
.cc {border-top:4px solid #ff66ff; background:#fcf;}
-->
</style>
</head>
<body>
<ul id="nav">
<li class="aa"><a href="/">CSS Templates Free Download </a></li>
<li class="bb"><a href="/">CSS WebSites Showcase </a></li>
<li class="cc"><a href="/">CSS Web Design Article </a></li>
</ul>
</body>
</html>
韓国のウェブサイトのデザイン スタイルは独特でカラフルですが、今ではさらに多くのウェブサイトが登場しています。このスタイルを真似する人が増えています。
韓国風ウェブサイトのデザインアイデアが万人に愛される理由は、その豊かな色の変化にあります。韓国風ウェブサイトの最も明らかな特徴の 1 つは、横線または縦線が追加されることが多いことです。リボンのテーブルまたはタイトル バー。このようなエフェクトを作成するには通常画像ソフトを使用しますが、画像サイズが大きく、ダウンロードも遅いです。 css を使用すると画像を適用せずにスタイルを定義するだけなので、このようなスタイルを完全に css で作成でき、ダウンロード速度が大幅に高速化されます。
まず、リスト項目、幅、マージン、パディングを定義します。次に、リンクテキストのスタイルを設定します。クラス aa、bb、および cc を使用して、さまざまなリスト項目の色を定義します。これら 3 つのクラスの定義では、上枠を 4px に定義します。つまり、韓国スタイルで最も一般的なリボンです。
上記は韓国式メニューコードの内容です_ul liとcssを使ったやりとりを体験してください。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) をご覧ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。