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 挑选器返回下一篇：没有了

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

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