Home > Article > Web Front-end > CSS Web Page Layout Introductory Tutorial 11: Beautified Version of Labeled Horizontal Navigation Image with Current Logo_Basic Tutorial
CSS Web Page Layout Introductory Tutorial 11: Beautified Version of Labeled Horizontal Navigation Image with Current Logo_Basic Tutorial
- PHP中文网Original
- 2016-05-16 12:07:081527browse
although tabbed navigation has been completed, the square-shaped navigation does not seem to conform to the current design trend. in fact, navigation can not only be defined using css colors, but also carefully designed pictures or other elements can be used to build navigation. here we will start to improve the design of the navigation and make it a better label effect.
we will consider removing the single square background element and using colored rounded labels to complete our design. however, from this improvement, we can realize another advantage of css design, that is, you don’t need to modify the structure code, you only need to modify the style to complete the improvement, so you can directly look at the design of the css code here:
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style>as can be seen from the above code, we removed the background color setting and added a black background to the body tag of the page. we placed the a object into a remade gif image, including normal, mouse-over, and current page three interactive states. but you will find that the pictures of these three states are in one picture. why? a design method in the software is used here. on the one hand, image management is used, and on the other hand, only one image is downloaded when downloading the web page. when setting this image as a background image, you only need to use css to control the position of the image. it seems that the css function is really powerful.
just by modifying the css code, the appearance of the navigation is changed. imagine that in the application of a large website, if we are not satisfied with a certain common module, we don’t have to modify all the pages, we can only change it. the style is implemented. css really makes your design easy!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主页</a></li>
<li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>
</body>
</html>