ul liとcssを使って韓国風メニューコードを作成_体験交流-CSSチュートリアル-php.cn

ul liとcssを使って韓国風メニューコードを作成_体験交流

PHP中文网

リリース： 2016-05-16 12:06:50

オリジナル

1915 人が閲覧しました

ウルリと 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) をご覧ください。