练习12
1.选择题
（1）B （2）A （3）C （4）D （5）A
2.简答题
（1）略
(2) display: none让对象不显示，原来不存在。 display:block—作用是显示特定对象；visibility: visible—作用是让特定对象可视（说明原来就存在，只是不可视），对使用visibility: hidden : 可以让对象隐藏起来。
实验12
1、源代码：
HTML文件
<!-- exp_10_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web页面设计实例</title>
<link href="exp_10_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Container">
<div id="Header">
<img src="Header.jpg">
<h4>
<span>首页</span>
<span>|</span>
<span>博客</span>
<span>|</span>
<span>设计</span>
<span>|</span>
<span>论坛</span>
<span>|</span>
<span>关于</span>
</h4>
</div>
<div id="PageBody">
<div id="SideBar">
<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>
</ul>
</div>
<div id="MainBody">
<h3>欢度新春佳节</h3>
<img src="huanduchunji.jpg" width="694" height="308" border="0" alt="">
</div>
</div>
<div id="Footer">
<p>Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏</p>
</div>
</div>
</body>
</html>CSS文件
/* exp_10_1.css */
/* 应用对象：edu_10_1.html*/
body {
font-family:Verdana;
font-size:16px;
margin:0;
text-align:center;
}
h4{float:left;margin:45px auto;padding-left:50px;}
p{margin:2px;font-size:14px;
}
#Container {margin:0 auto;
width:900px;
}
#Header {
height:118px;
border-bottom:5px;
background-color:rgb(230,230,230);
border-bottom:5px solid #FFFFFF;
}
#PageBody {
height:380px;
border-bottom:5px solid #FFFFFF;
}
#SideBar {
float:left;
width:200px;
height:380px;
background:#Dff100;
text-align:center;
padding:50px auto;
border-right:5px solid #FFFFFF;
}
#MainBody {
float:right;
width:695px;
height:380px;
background:#cff000;
}
#Footer {
height:60px;
background-color:rgb(230,230,230);
text-align:center;
font-family:"Courier New";
font-size:12px;
padding-top:10px;
}
#Header img{
float:left;
}
span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px;
vertical-align:middle;text-align:center;
}
a{width:48px;height:24px;
font-size:20px;
font-family:"华文新魏"; text-align:center;
}
ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
li{ width:50px;height:30px;
font-size:20px;
font-family:"华文新魏";
padding:10px 35px;
}
h3{text-align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}2．Exp_10_2.html exp_10_2演示
<!-- exp_10_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style type="text/css">
*{font:24px/1.5em 黑体;margin:0 auto;padding:0px;}
#Container{
width:1006px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
}
#Header{
height:120px;
background:#093;
}
#logo{
height:80px;
background:#5f5;
border-bottom:2px solid white;
}
#nav{
height:40px;
background:#3f5;
border-bottom:2px solid white;
}
#Content{
width:100%;
height:400px;
background:#00EEFF;
}
/*设置浮动，实现多列效果，div+Css布局中很重要的*/
#Content-left{
height:400px;
width:250px;
float:left;
background:#66ff66;
border-right:2px solid white;
}
#Content-center-left{
height:400px;
width:250px;
float:left;
background:#77ff66;
border-right:2px solid white;
}
#Content-center-right{
height:400px;
width:250px;
float:left;
background:#88ffDD;
border-right:2px solid white;
}
#Content-right{
height:400px;
width:250px;
float:left;
background:#99ff66;
}
#Footer{
height:40px;
background:#6FC;
border-top:2px solid white;
}
.Clear{
clear:both;
margin:0 auto;
padding:0px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="Content">
<div id="Content-left">Content-left</div>
<div id="Content-center-left">Content-center-left</div>
<div id="Content-center-right">Content-center-right</div>
<div id="Content-right">Content-right</div>
</div>
<div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
公网备案31011502400367号