链接与导航-练习题答案
一．选择题
1.在HTML中，下面定义已被访问过的链接呈红色文字样式的代码是（ ）。
A. a:link{color:red;} B. a:hover{color:red;}
C. a:visited{color:red;} D. a:active{color:red;}
2.在HTML中，实现鼠标悬停在超链接上时，为无下划线的效果（ ）。
A. a{text-decoration:underline} B. a{text-decoration:none}
C. a:hover{text-decoration:none} D. a:link{text-decoration:underline}
3.在CSS中，要实现链接字体颜色为红色，无下划线，当鼠标移过时显示下划线的效果，以下选项正确的是（ ）。
A. a:link{color:#ff0000;} a:hover{text-decoration:underline;}
B. a{color:#ff0000;text-decoration:none;} a:hover{text-decoration:overline;}
C. a{text-decoration:underline;} a:hover{color:#ff0000;text-decoration:none;}
D. a:link{color:#ff0000;text-decoration:none;} a:hover{text-decoration:underline;}
4. (多选题)实现无序列表横向显示的样式代码是（ ）。
A. li{display:inline-block;} B. li{display:block;} C. li{float:left;} D. ul{display:block;}
5. (多选题)定义超链接a按块级元素显示的代码是（ ）。
A. display:block; B. display:none; C.display:inline-block; D.display:hidden;
6. 设置当鼠标悬停在无序列表项的超链接图片上时，图片加上边框的正确CSS代码是（ ）。
A. a:hover img{ border2px solid #0091D8;}
B. img:hover{border:2px solid #0091D8;}
C. li:hover{ border:2px solid #0091D8;}
D. li a:hover img{ border.2px solid #0091D8;}
7. 为超链接添加描述性文字的属性是（ ）。
A.href B.target C.title D.alt
选择题答案：
1.C 2.C 3.D 4.A C 5.A C 6.D 7.C
二．综合训练题
1. 设计如图8-16所示的网页导航菜单，当鼠标悬停时，链接样式如图8-17所示，链接加背景，文本为红色。
图8-16 练习题1效果图1
图8-17 练习题1效果图2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{padding: 0;margin: 0}
nav{width: 800px;
height: auto;
background-color: #eee;
margin: 20px auto;}
ul{list-style: none;font-size: 15px;}
li{display: inline;}
a{display: inline-block;
width: 109px;height: 35px;
text-align: center;
line-height: 35px;
text-decoration: none;
color: #222;
margin-right: -2px;
margin-left: -2px;
/* border-right: 1px solid #AAA; */}
a:hover{background-color:orange;
color:red;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">走进新时代</a>|</li><li><a href="#">图说历史</a>|</li><li><a href="#">国是春秋</a>|</li><li><a href="#">红墙纪事</a>|</li><li><a href="#">世纪回眸</a>|</li><li><a href="#">军史纵横</a>|</li><li><a href="#">外交风云</a>|</li><li><a href="#">将帅风采</a>|</li><li><a href="#">党史人物</a>|</li><li><a href="#">工作动态</a>|</li><li><a href="#">历史珍闻</a>|</li><li><a href="#">史海钩沉</a>|</li><li><a href="#">岁月如歌</a>|</li><li><a href="#">一代风流</a>|</li>
</ul>
</nav>
</body>
</html>
2. 综合使用链接和导航菜单技术制作如图8-18所示的页面。
图8-18 练习题2效果图
HTML5网页代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>习题1</title>
<link href="xt8-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="templatemo_container">
<div id="templatemo_header">
<div id="site_title"></div>
</div>
<div id="templatemo_menu">
<ul>
<li><a href="#"><b>首页</b></a></li>
<li><a href="#"><b>茶叶</b></a></li>
<li><a href="#"><b>餐具</b></a></li>
<li><a href="#"><b>美食</b></a></li>
<li><a href="#"><b>公司</b></a></li>
<li ><a href="#"><b>联系</b></a></li>
</ul>
</div>
<div id="templatemo_top_dishes">
<h1>推荐套餐</h1>
<div> <img src="images/templatemo_image_01.jpg" alt="image" />
<h2>西湖牛肉</h2>
<p>它香淳润滑、鲜美可口，常会提前上席作为润喉开胃的羹汤。西湖牛肉羹也是深受普通老百姓喜爱的食品。</p>
<p><a href="#" target="_parent">Read more...</a></p>
</div>
<div> <img src="images/templatemo_image_02.jpg" alt="image" />
<h2>紫菜包饭</h2>
<p>紫菜包饭是一道十分常见的韩式料理，与日本料理中的寿司十分相似。</p>
<p><a href="#">Read more...</a></p>
</div>
<div> <img src="images/templatemo_image_03.jpg" alt="image" />
<h2>绿晶汤菜</h2>
<p>汤菜，就是指带有较多汤汁的菜肴。汤菜，一般而言，菜是多于汤的，或汤菜各半，或汤略多于菜。</p>
<p></p><a href="#" target="_parent">Read more...</a></p>
</div>
<div> <img src="images/templatemo_image_04.jpg" alt="image" />
<h2>肘花</h2>
<p>其皮厚、筋多、胶质重、瘦肉多，常带皮烹制，肥而不腻。</p>
<p><a href="#">Read more...</a></p>
</div>
<div> </div>
</div>
<div id="templatemo_footer"> Copyright © 2011 <a href="#"><strong>wuyuze</strong></a> | Designed by <a href="#" target="_parent">wf</a></div>
</div>
</body>
</html>
CSS样式代码：
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Arial, san-serif;
font-size: 12px;
color: #333333;
background: #fff;
}
a:link, a:visited { color: #b7bd19; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #d8df44; text-decoration: underline; }
img {
padding: 0px;
margin: 0px;
}
p {
margin: 0px;
padding: 0px;
text-align: justify;
}
h1 { margin: 0 0 15px 0;}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_with_divider {
clear: both;
width: 100%;
height: 15px;
border-bottom: 1px solid #333;
margin-bottom: 25px;
font-size: 1px;
}
#templatemo_container {
width: 960px;
margin: 0 auto;
padding: 0 5px;
background: url(images/templatemo_main_bg.jpg) repeat-y;
}
/* header */
#templatemo_header {
width: 920px;
height: 155px;
padding: 0 20px 0 20px;
background: url(images/templatemo_header.jpg) no-repeat;
}
#templatemo_header #site_title {
float: left;
font-size: 30px;
font-weight: bold;
color: #fff;
padding: 60px 0 10px 0;
width: 325px;
height: 55px;
background: url(images/templatemo_logo.jpg) no-repeat bottom;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 960px;
margin: 0;
height: 45px;
background: url(images/templatemo_menu_bg.jpg) right no-repeat;
}
#templatemo_menu ul {
padding: 0 0 0 10px;
margin: 0 auto;
height: 45px;
list-style: none;
}
#templatemo_menu ul li {
float:left;
padding-right: 5px;
}
#templatemo_menu li a {
float: left;
display: block;
color: #fff;
font-size: 13px;
height: 45px;
line-height: 40px;
text-align: center;
padding: 0px 0 0 0px;
}
#templatemo_menu li a b {
float: left;
display: block;
padding: 0px 24px 0 24px;
}
#templatemo_menu li.current a, #templatemo_menu li a:hover {
color: #b4c927;
text-decoration: none;
background: url(images/templatemo_menu_hover_right.jpg) right top no-repeat;
}
#templatemo_menu li.current a b, #templatemo_menu li a:hover b {
color: #b4c927;
text-decoration: none;
background: url(images/templatemo_menu_hover_left.jpg) left top no-repeat;
}
/* end of menu */
/* top dishes */
#templatemo_top_dishes {
clear: both;
width: 960px;
padding: 50px 0px;
background: url(images/templatemo_content_top.jpg) top no-repeat;
}
#templatemo_top_dishes h1 {
color: #1b2308;
font-size: 24px;
margin: 0 20px 15px 20px;
padding: 0 0 15px 0;
border-bottom: 1px dotted #1b2308;
}
#templatemo_top_dishes h2 {
font-size: 15px;
color: #1f1f1f;
margin: 0;
padding: 0 0 5px 0;
}
#templatemo_top_dishes p {
margin: 0px;
padding: 0px 3px 0px 2px;
}
#templatemo_top_dishes .top_dishes_box {
float: left;
width: 215px;
margin-left: 20px;
}
#templatemo_top_dishes .top_dishes_box img {
margin-bottom: 15px;
border: 5px solid #e1e0e0;
}
/* end of banner */
/* content */
#templatemo_content {
position: relative;
color: #fff;
width: 920px;
padding: 0;
margin-left: 20px;
background: url(images/templatemo_content_bg_middle.jpg) repeat-y;
}
#templatemo_innter_content {
background: url(images/templatemo_content_bg_bottom.jpg) bottom center no-repeat;
}
#templatemo_content .top {
position: absolute;
display: block;
top: 0;
left: 0;
width: 920px;
height: 15px;
background:url(images/templatemo_content_bg_top.jpg) bottom center no-repeat;
}
#templatemo_content .bottom {
position: absolute;
float: left;
bottom: 0;
left: 0;
width: 920px;
height: 175px;
background: url(images/templatemo_content_bg_bottom.jpg) bottom center no-repeat;
}
#templatemo_content #templatemo_content_left {
float: left;
padding: 40px 0 0 35px;
width: 545px;
}
#templatemo_content #templatemo_content_right {
float: right;
padding: 40px 35px 0 0;
width: 245px;
}
#templatemo_content_left h1 {
font-size: 24px;
padding: 3px 0 15px 0;
margin: 0 0 15px 0;
}
#templatemo_content_left p {
padding-bottom: 10px;
margin: 0px;
}
#templatemo_content_left img {
float: left;
margin: 3px 15px 0 0;
border: 5px solid #4b5e1e;
}
#templatemo_content_right h1 {
color: #374712;
font-size: 20px;
height: 30px;
margin: 0px;
padding: 15px 0 0 20px;
background: url(images/templatemo_header_bg.jpg) no-repeat;
}
#templatemo_content_right h2 {
color: #b7bd19;
font-size: 16px;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
#templatemo_content_right img {
border: 5px solid #4b5e1e;
margin: 0 0 5px 0;
}
#templatemo_content_right p {
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
#templatemo_content_right .right_column_section {
clear: both;
margin: 20px;
}
/* left column */
/* footer */
#templatemo_footer {
clear: both;
color: #333;
width: 960px;
margin-top: 30px;
padding: 20px 0px 20px 0;
text-align: center;
background: #ced1c8;
}
#templatemo_footer a {
color: #333;
font-weight: normal;
}
/* end of footer */
3. 综合使用链接和导航菜单技术制作如图8-19所示的页面。
图8-19 练习题3效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习3</title>
<style>
nav{background-color:#489df2;height: 50px;}
nav ul { /*设置菜单列表的样式*/
list-style-type:none; /*不显示项目符号*/
width: 1100px;
margin: 0 auto;
}
nav ul li { /*设置菜单列表项的样式*/
display:inline; /*定义行内元素*/
line-height:50px; /*行高36px*/
}
nav ul li a{
display:inline-block; /*内联元素*/
width:90px;
height:36px;
/* float: left; */ /*向左浮动*/
padding:0px 15px 0px 3px;
margin:0 10px 0 5px;
text-decoration:none; /*链接无修饰*/
text-align:center; /*文字居中对齐*/
font-family:"微软雅黑";
font-size:19px;
/* font-weight:bold; */ /*字体加粗*/
color:#fff;
}
header{height: 250px;
background-color: aliceblue;
text-align: center;}
.wrap{
width: 1100px;
height: 250px;
margin: 10px auto;
}
.wrap img{width: 362px;height: 250px;}
footer{
height: 180px;
background-color:#e3effe;/* #D9EAFE */;
}
.yj{
width: 1100px;
margin: 0px auto;
line-height: 40px;
padding-top:20px;
text-align: center;
}
footer a{
display:inline-block; /*内联元素*/
width:150px;
height:40px;
/* float: left; */ /*向左浮动*/
padding:0px 10px; /*上、右、下、左的内边距依次为0px,8px, 0px,8px*/
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">工程案例</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">招商加盟</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">企业优势</a></li>
</ul>
</nav>
<header>
<img src="banner.jpg">
</header>
<div>
<a href="#"><img src="advt1.png"></a>
<a href="#"><img src="advt2.png"></a>
<a href="#"><img src="advt3.png"></a>
</div>
<div>
<a href="#"><img src="advt4.png"></a>
<a href="#"><img src="advt5.png"></a>
<a href="#"><img src="advt6.png"></a>
</div>
<footer>
<div>
<p>
<a href="index.html">网站首页</a> <a href="products.html">产品中心</a> <a href="advantage.html">企业优势</a> <a href="contact.html">联系方式</a> <a href="news.html"> 新闻动态</a>
</p>
<p>地址：山东省日照市学苑路 爱德照明科技有限公司</p>
</div>
</footer>
</body>
</html>
