Home >Web Front-end >CSS Tutorial >CSS web page layout introductory tutorial 10: Tabbed horizontal navigation with current logo_Basic tutorial
CSS web page layout introductory tutorial 10: Tabbed horizontal navigation with current logo_Basic tutorial
- PHP中文网Original
- 2016-05-16 12:07:091591browse
the current logo means that the user clicks on the channel or column. the label of the column displays a different color from other labels to remind the user of the location.
this design is a very simple and classic way to improve the usability of the website in website design. when a website is used by users, it should take into account the user's thinking process when browsing. a bad web design only takes into account the page itself without considering the user's experience. an excellent design should be user-centered. such a simple current channel identification is often something that many designers ignore. users need to know where they are and where else they can go. by identifying the current location, it helps users understand their position in the website and guides them. visit other channels.
continue writing from the code in the previous article. in order for a certain channel to become a current channel, this channel must have a background color or text that is different from other channels, but currently we are targeting all a the background of the unified setting of tags, so the first task is to design an exception, that is, the current channel. for such a special channel, we make some modifications to the tags in html:
<ul id="nav"> <li id="current"><a href="/index.asp">主页</a></li> <li><a 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>
we add the following to the first a tag: a new id has been added, named current. continue to write the css part. first, make a color design for the id current:
#nav li a#current { background-color:#2788da; color:#fff;}preview the effect. the background color of the homepage has turned blue.
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>div+css教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>css2.0实用手册</li>
</ul>continue to improve our navigation and add a horizontal line under the page menu
#nav { height:26px; border-bottom:2px solid #2788da;}we set the height of the ul tag and added a 2px solid to the bottom of it. line, preview the effect again, it is almost the same as the tabbed navigation we originally imagined. returning to the definition of the nav element, border-bottom is a newly added attribute we added, which refers to the setting of the lower border of the element. its parameters it refers to the width of 2px, the single solid line style, and the color value of #2788da. with this setting, our ul tag will have a 2px colored lower border.
<!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>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>simple tabbed navigation is completed through a set of css design. whenever you change a channel page, you only need to change the id="current "move to the a element where the current channel is located to complete the color switching. there is no need to write color attributes, and if you need to modify them, you can easily modify them in css.
about the problem of using css property inheritance between elements in xhtml in this example.
what is inheritance? inheritance means that each element can have multiple styles. under normal circumstances, it abides by the outermost style design. if it encounters its own style design, it will inherit the outer style and give priority to itself. style.
if the inner layer's style conflicts with the outer layer's style, the inner layer's style effect will be displayed.
this example also comes into contact with a new attribute: list-style:none; in the style code for preview.
by default, the li list form in ul has a dot in front of it, as you can see from the previous chapter. this sentence means to remove the default dot in front.
the above is the content of css web page layout introductory tutorial 10: labeled horizontal navigation with current logo_basic tutorial. for more related content, please pay attention to the php chinese website (www.php.cn)!