鏈接與導航-練習題答案
一．選擇題? ?
1.在HTML中，下面定義已被訪問過的鏈接呈紅色文字樣式的代碼是（ ???）。
A.??a:link{color:red;}??????????????B.??a:hover{color:red;}
C.??a:visited{color:red;}????????????D.??a:active{color:red;}
2.在HTML中，實現(xiàn)鼠標懸停在超鏈接上時，為無下劃線的效果（ ???）。
A. a{text-decoration:underline} ?????B. a{text-decoration:none}
C. a:hover{text-decoration:none} ????D. a:link{text-decoration:underline}
3.在CSS中，要實現(xiàn)鏈接字體顏色為紅色，無下劃線，當鼠標移過時顯示下劃線的效果，以下選項正確的是（ ???）。
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. (多選題)實現(xiàn)無序列表橫向顯示的樣式代碼是（ ???）。
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. 設(shè)置當鼠標懸停在無序列表項的超鏈接圖片上時，圖片加上邊框的正確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.?設(shè)計如圖8-16所示的網(wǎng)頁導航菜單，當鼠標懸停時，鏈接樣式如圖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="#">工作動態(tài)</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. 綜合使用鏈接和導航菜單技術(shù)制作如圖8-18所示的頁面。?
圖8-18??練習題2效果圖
HTML5網(wǎng)頁代碼：
<!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>聯(lián)系</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>其皮厚、筋多、膠質(zhì)重、瘦肉多，常帶皮烹制，肥而不膩。</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. 綜合使用鏈接和導航菜單技術(shù)制作如圖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 { ? ? ????/*設(shè)置菜單列表的樣式*/
list-style-type:none; ?/*不顯示項目符號*/
????width: 1100px;
margin: 0 auto;
}
nav ul li { ? ? /*設(shè)置菜單列表項的樣式*/
display:inline; ?/*定義行內(nèi)元素*/
line-height:50px; ?/*行高36px*/
}
nav ul li ?a{
display:inline-block; ????????????/*內(nèi)聯(lián)元素*/
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; ????????????/*內(nèi)聯(lián)元素*/
width:150px;
height:40px; ? ?????
/* float: left; ?*/ ????????????/*向左浮動*/
padding:0px 10px; /*上、右、下、左的內(nèi)邊距依次為0px,8px, 0px,8px*/
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
????<ul>
? ?<li><a href="#">首 ?頁</a></li>
? ?<li><a href="#">產(chǎn)品中心</a></li>
? ?<li><a href="#">工程案例</a></li>
? ?<li><a href="#">新聞動態(tài)</a></li>
? ?<li><a href="#">招商加盟</a></li>
? ?<li><a href="#">關(guān)于我們</a></li>
? ?<li><a href="#">聯(lián)系方式</a></li>
<li><a href="#">企業(yè)優(yōu)勢</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">網(wǎng)站首頁</a> <a href="products.html">產(chǎn)品中心</a> <a href="advantage.html">企業(yè)優(yōu)勢</a> <a href="contact.html">聯(lián)系方式</a> <a href="news.html"> 新聞動態(tài)</a>
</p>
<p>地址：山東省日照市學苑路 愛德照明科技有限公司</p>? ? ? ?? ??
</div>
</footer>
</body>
</html>
?
