web前端开发技术储久良第三版第10章练习与实验答案

web前端开发技术储久良第三版答案整理(10-17章)

练习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、源代码:

exp_10_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前端开发工作室&copy; 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>
版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读