CSS技能 应用标识来建立导航栏菜单(拖动门实例教

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

实际效果图:


HTML和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" lang="en-US">  
<head>  
<title>Lists as navigation</title>  
<meta http-equiv="content-type"  
   content="text/html; charset=utf⑻" />  
<link rel="stylesheet" type="text/css" href="tabs.css" />  
</head>  
<body id="recipes">  
<div id="header">  
<ul>  
 <li class="recipes"><a href="#">Recipes</a></li>  
 <li class="contact"><a href="#">Contact Us</a></li>  
 <li class="articles"><a href="#">Articles</a></li>  
 <li class="buy"><a href="#">Buy Online</a></li>  
</ul>  
</div>  
<div id="content">  
<h1>Recipes</h1>  
<p>Lorem ipsum dolor sit amet, … </p>  
</div>  
</body>  
</html>

body {  
 font: .8em/1.8em verdana, arial, sans-serif;  
 background-color: #FFFFFF;  
 color: #000000;  
 margin: 0 10% 0 10%;  
}  
 
#header {  
 float: left;  
 width: 100%;  
 border-bottom: 1px solid #8DA5FF;  
 margin-bottom: 2em;  
}  
 
#header ul {  
 margin: 0;  
 padding: 2em 0 0 0;  
 list-style: none;  
}  
 
#header li {  
 float: left;  
 background-image: url("images/tab_left.gif");  
 background-repeat: no-repeat;  
 margin: 0 1px 0 0;  
 padding: 0 0 0 8px;  
}  
 
#header a {  
 float: left;  
 display: block;  
 background-image: url("images/tab_right.gif");  
 background-repeat: no-repeat;  
 background-position: right top;  
 padding: 0.2em 10px 0.2em 0;  
 text-decoration: none;  
 font-weight: bold;  
 color: #333366;  
}  
 
#recipes #header li.recipes,  
#contact #header li.contact,  
#articles #header li.articles,  
#buy #header li.buy {  
 background-image: url("images/tab_active_left.gif");  
}  
 
#recipes #header li.recipes a,  
#contact #header li.contact a,  
#articles #header li.articles a,  
#buy #header li.buy a {  
 background-image: url("images/tab_active_right.gif");  
 background-color: transparent;  
 color:#FFFFFF;  
}  



===========================


处理计划方案:

在这里应用的是"拖动门技术性",它是标识建立导航栏的1种技术性.最先撰写导航栏菜单的HTML构造.(在前面几节早已说过怎样去建立HTML,如有不懂的

能够去看.)随后给每一个标识分派1个类来叙述连接.最终提前准备情况图象.

在PS中建立4个像这样的照片,两个来主要表现连接的情况,别外两个来主要表现电脑鼠标拖动过的情况.正如你所看到的,图象的尺寸比文字要大的多,这是现

实伴随着文字转变而转变(即文字增大,那末情况图象還是能够看清晰的.)

这是导航栏的HTML编码:
=========================
<div id="header">  
<ul>  
 <li class="recipes"><a href="#">Recipes</a></li>  
 <li class="contact"><a href="#">Contact Us</a></li>  
 <li class="articles"><a href="#">Articles</a></li>  
 <li class="buy"><a href="#">Buy Online</a></li>  
</ul>  
</div>



=========================

第1步:大家先来设定器皿的款式.给导航栏界定1个下边框.
=========================
#header {  
 float: left;  
 width: 100%;  
 border-bottom: 1px solid #8DA5FF;  
 margin-bottom: 2em;  
}


=========================

再给<ul>界定款式.消除默认设置的小圆点,并设定填充.

=========================
#header ul {  
 margin: 0;  
 padding: 2em 0 0 0;  
 list-style: none;  
}



=========================
实际效果以下:



大伙儿有木有发现,我上面已给器皿界定了波动,那末为何显示信息并不是横向的.(PS:怎样横指导航)

如今来给<li>界定款式了.在这里运用波动使导航栏横向,并使<li>为块级元素.随后添加"拖动门"的左侧图象.

==========================
#header li {  
 float: left;  
 background-image: url("images/tab_left.gif");  
 background-repeat: no-repeat;  
 margin: 0 1px 0 0;  
 padding: 0 0 0 8px;  
}


==========================

把右侧的图象放到<a>标识里,设定以下:

=======================
#header a {  
 float: left;  
 display: block;  
 background-image: url("images/tab_right.gif");  
 background-repeat: no-repeat;  
 background-position: right top;  
 padding: 0.2em 10px 0.2em 0;  
 text-decoration: none;  
 font-weight: bold;  
 color: #333366;  
}


=========================

实际效果如图所示


保证这里只是进行了半一部分,仔细的童学们1定会留意到大家在上面加上的那样"类"都还没应用.那末接下看来下假如应用所加上的"类"来使图

像转换.


最先大家来给<body>加上1个ID.

====================
<body id="recipes">


====================

CSS编码以下:
=====================
#recipes #header li.recipes,  
#contact #header li.contact,  
#articles #header li.articles,  
#buy #header li.buy {  
 background-image: url("images/tab_active_left.gif");  
}  
 
#recipes #header li.recipes a,  
#contact #header li.contact a,  
#articles #header li.articles a,  
#buy #header li.buy a {  
 background-image: url("images/tab_active_right.gif");  
 background-color: transparent;  
 color: #FFFFFF;  
}


======================

这时候候将会有人会问在<body>中加上1个ID有甚么功效.呵呵....这位同学很仔细哟.在<body>目标中加上1个ID是是非非常有效的,例如说,你给网

站区划几个色调,来告知客户她们正在访问的是哪1一部分.

上一篇:CSS学习培训之2 挑选器 返回下一篇:没有了