Home >Web Front-end >CSS Tutorial >Use ul li and css to create Korean style menu code_Experience exchange
Use ul li and css to create Korean style menu code_Experience exchange
- PHP中文网Original
- 2016-05-16 12:06:501949browse
ul li and css to create korean style menu code_experience exchange
<!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>
the design style of korean websites is distinctive and colorful, and now there are more and more of people are imitating this style.
the reason why korean-style website design ideas are loved by everyone is because of its rich color changes. one of the most obvious features of korean-style websites is that horizontal or vertical lines are often added to tables or title bars. of a ribbon. we usually use image software to create such effects, but the image size is large and the download is slow. we can completely use css to create such a style, because using css only defines the style without applying images, and the download speed will be greatly accelerated.
first we define the list items, width, margins and padding. then set the style of the link text. we use classes aa, bb, and cc to define the colors of different list items. in the definitions of these three classes, we define the top border to be 4px. that is, the most common ribbon in korean style.
the above is the content of the korean style menu code_experience exchange using ul li and css. for more related content, please pay attention to the php chinese website (www.php.cn)!