006_HTML布局任务与答案第一期（四川师范大学JavaWeb）

试验目的

1) 了解页面常用布局结构;
2) 掌握 DIV+CSS 布局的基本方法; 3) 掌握用 CSS 改变页面样式的方法; 4) 了解常用的 CSS 属性。
2017~2018 学年第一学期

实验步骤

【任务一】:将实验一中的网页用 DIV+CSS 布局改写成两栏(和三栏)布局。要求:
1. 页面的基本布局如下:
2. header 部分必须包含网站的 logo 和 banner;
3. footer 部分包含网站的版权内容，例如作者，创作时间等等。
4. sidebar 是各种 JavaWeb 开发工具的链接。
5. menu 栏留一个空行，写上菜单名称。菜单先不添加功能和行为。
6. content 是网页显示的主要内容，主要用于显示用户收藏的信息。
a) content 中至少包含一个表格，表格为三列，第一列为工具名称，第二列介绍链接，第三列为网站链接。 b) 表格必须有外边框。表头使用边框横线分隔。表格内容之间既没有边框横线，也没有边框竖线。表格宽度
和 content 部分宽度一致。
c) 向表格中添加一些网站数据。
d) content 中在表格之后添加各种工具的介绍。
e) 当在 sidebar 中点或者上面表格中击各个工具的介绍链接之后，将做页内跳转到不同的部分。
7. (选做)如果有时间，可以将网页布局改为三栏布局(left_sidebar、content 和 right_sidebar)，然后在右边栏中加入广告。(注意保留以前两栏版本。)

注意

所有样式必须使用 CSS 定义，不允许在页面中直接定义显示格式，例如字体、颜色、大小、位置等。
CSS 必须使用连接方式引用，不允许直接写在页面中。

测试代码

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/style.css"/><!-- jQuery --><script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script><!-- 手风琴 --><link rel="stylesheet" type="text/css" href="css/accordion.css"/><link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /><script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script><script src="js/control.js" type="text/javascript" charset="utf-8"></script><!-- 提示框 --><link rel="stylesheet" type="text/css" href="css/jquery.growl.css"/><script src="js/jquery.growl.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {//使用提示框$.growl.notice({title: "位置", message: "你正在顶部，下滚查看更多！" });scrollMenu();//使用手风琴$( "#accordion" ).accordion(); //插入表格insertTable();//页内跳转动画        $('a').click(function(){  $('html, body').animate({  scrollTop: $( $.attr(this, 'href') ).offset().top  - 110}, 800);  $.growl.notice({title: "位置", message: "你正在浏览" + $(this).attr("desc") });return false;  });     //返回顶部$("#top").click(function() {$("html,body").animate({scrollTop: 0},800)return false;})})</script></head><body><div id="fixHeader"><!-- 头部 --><div class="header"><!-- logo --><div class="logo">![](img/logo.png)<span>JavaWeb架构师</span></div><!-- 导航条 --><div class="banner"><ul><li><a href="http://www.itcourse.top">首页</a></li><li><a href="http://www.itcourse.top">教学资源</a></li><li><a href="http://www.itcourse.top">论坛</a></li><li><a href="http://www.itcourse.top">工具下载</a></li><li><a href="http://www.itcourse.top">开源项目</a></li><li><a href="http://www.itcourse.top">MushSQL</a></li><li><a href="http://www.itcourse.top">JavaWeb架构师</a></li></ul></div></div></div><!-- 内容区域 --><div class="contenter"><div class="sidebar"><div id="accordion"><h3>数据库工具</h3><div class="accItems"><div class="accItem"><a href="#jdbc" desc="jdbc">jdbc</a></div><div class="accItem"><a href="#mysql" desc="mysql">mysql</a></div><div class="accItem"><a href="#oracle" desc="oracle">oracle</a></div><div class="accItem"><a href="#SQLServle" desc="SQLServle">SQLServle</a></div><div class="accItem"><a href="#c3p0" desc="c3p0">c3p0</a></div></div><h3>字符串工具</h3><div class="accItems"><div class="accItem"><a href="#jdbc" desc="jdbc">jdbc</a></div><div class="accItem"><a href="#mysql" desc="mysql">mysql</a></div><div class="accItem"><a href="#oracle" desc="oracle">oracle</a></div><div class="accItem"><a href="#SQLServle" desc="SQLServle">SQLServle</a></div><div class="accItem"><a href="#c3p0" desc="c3p0">c3p0</a></div></div><h3>SSH</h3><div class="accItems"><div class="accItem"><a href="#jdbc" desc="jdbc">jdbc</a></div><div class="accItem"><a href="#mysql" desc="mysql">mysql</a></div><div class="accItem"><a href="#oracle" desc="oracle">oracle</a></div><div class="accItem"><a href="#SQLServle" desc="SQLServle">SQLServle</a></div><div class="accItem"><a href="#c3p0" desc="c3p0">c3p0</a></div></div><h3>SSM</h3><div class="accItems"><div class="accItem"><a href="#jdbc" desc="jdbc">jdbc</a></div><div class="accItem"><a href="#mysql" desc="mysql">mysql</a></div><div class="accItem"><a href="#oracle" desc="oracle">oracle</a></div><div class="accItem"><a href="#SQLServle" desc="SQLServle">SQLServle</a></div><div class="accItem"><a href="#c3p0" desc="c3p0">c3p0</a></div></div><h3>其他工具</h3><div class="accItems"><div class="accItem"><a href="#jdbc" desc="jdbc">jdbc</a></div><div class="accItem"><a href="#mysql" desc="mysql">mysql</a></div><div class="accItem"><a href="#oracle" desc="oracle">oracle</a></div><div class="accItem"><a href="#SQLServle" desc="SQLServle">SQLServle</a></div><div class="accItem"><a href="#c3p0" desc="c3p0">c3p0</a></div></div>          </div></div><div class="middler"><div class="menu"><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></ul></div><div class="content" ><table id="tabID"><tr><th>工具名称</th><th>介绍连接</th><th>网站链接</th></tr></table><div id="desc"></div></div></div><div class="ad"><div class="adItem">![](img/logo.png)<p>JavaWeb架构师</p><p>最好的JavaWeb开发公众号</p>                  </div><div class="adItem">![](img/rpz.png)<p>计算机科学协会</p><p>最有计算机梦想的协会</p>                   </div></div><!-- /*div父元素根据子元素高度自适应高度:*/ --><div style="clear:both"></div></div><!-- 底部 --><div class="footer"><div class="infor">@JavaWeb架构师</div></div><!-- 返回顶部 --><div id="top"></div></body></html>

style.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td{margin:0;padding:0;
}a {text-decoration: none;color: #000;
}body {margin: 0;padding: 0;background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);font-family: helvetica;
}
/*1.头部*/#fixHeader {width: 100%;top: 0px;
}.header {height: 100px;/*background-color: cornsilk;*/position: relative;
}
/*1.1.logo*/.logo {position: relative;/*background-color: blueviolet;*/height: 100%;width: 30%;float: left;
}
/*1.1.1.img*/.logo img,
span {/** 垂直水平居中：* 1.子绝父相* 2.设置宽度高度* 3.margin-top/left：是自己宽度的一半* 4.left/top: 50%*/position: absolute;height: 80px;left: 50%;top: 50%;margin-left: -40px;margin-top: -50px;
}.logo span {margin-top: 26px;margin-left: -55px;
}
/*1.2.banner*/.banner {position: relative;/*background-color:brown;*/height: 100%;width: 70%;float: right;overflow: hidden;
}
/*1.2.1.ul*/.banner ul {/*去掉小点*/list-style-type: none;height: 100%;width: 80%;/*overflow: hidden;*/margin: 0 auto;/*background-color: crimson;*/
}
/*1.2.1.1.li正常*/
/** ul>li转横排导航：* 1.去小点（ul）：list-style-type: none;* 2.浮动起来（li或者li里边的元素）：float:left;* 3.文字居中：text-align*/.banner ul li a {text-decoration: none;color: black;/*所有的li标签浮动起来*/float: left;height: 100%;text-align: center;/*垂直居中*//*line-height: 100px;*/margin-top: 40px;/*移动上去成手*/margin-left: 37px;font-size: 20px;font-family: courier;
}
/*.banner ul li p {height: 25px;top: 60px;background-color: bisque;
}*/
/*1.2.1.2.li经过*/.banner ul li a:hover {cursor: pointer;/*background-color: aqua;*/color: rgba(0, 0, 0, 0.5);
}
/*2.内容区域*/.contenter {margin-top: 30px;/*background-color: aquamarine*//** div父元素根据子元素高度自适应高度:* 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题.* 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高* 度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！* * 解决这个问题的根源就是清除浮动：* 1 , 给父节点增加样式overflow:hidden或者overflow:auto * 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.*      你可以用div或者br*      <div style="clear:both"></div>*//*div父元素根据子元素高度自适应高度:*/overflow: hidden;
}/*2.1.左侧*/
.sidebar {width: 23%;margin-left: 2.2%;float: left;border: black solid 1px;border-color: rgba(0, 0, 0, 0.5);border-radius: 5px;padding: 10px;
}/*2.2.中部*/
.middler {width: 45%;margin-left: 1%;float: left;
}/*2.3.广告*/
.ad {width: 23%;height: 900px;margin-left: 1%;border: black solid 1px;border-color: rgba(0, 0, 0, 0.5);border-radius: 5px;padding: 10px;  text-align: center;float: left;
}/*广告里面的图片*/
.ad img {height: 200px;
}/*广告项目*/
.adItem {width: 100%;height: 300px;border-bottom: 1px solid #000;padding: 10px;box-sizing: border-box;
}/*菜单*/
.menu {position: relative;border: black solid 1px;border-color: rgba(0, 0, 0, 0.5);border-radius: 5px;padding: 10px;overflow: hidden;
}.menu ul {list-style: none;margin: 0 auto;height: 100%;
}.menu ul li a {text-decoration: none;color: #000000;float: left;margin-left: 10%;
}.menu ul li a:hover {color: rgba(100, 100, 100, 0.7);
}/*内容*/
.content {margin-top: 15px;border: black solid 1px;border-color: rgba(0, 0, 0, 0.5);border-radius: 5px;padding: 10px;
}/*内容里面的 table*/
.content table {background-color: rgba(255, 244, 245, 0.1);width: 100%;text-align: center;/*border-collapse : separate | collapse* separate  :　 默认值。边框独立（标准HTML）* collapse  :　 相邻边被合并*/border-collapse: collapse;border: 1px solid #000;border-color: rgba(0, 0, 0, 0.1);
}.content table th {height: 50px;border-bottom: 1px solid #000;border-color: rgba(0, 0, 0, 0.1);
}.content table td {height: 50px;
}/*内容里面的描述信息*/
#desc {width: 100%;margin-top: 20px;
}#desc h3 {text-align: center;
}/*描述部分*/
.item {border: 1px solid #000;border-color: rgba(0,0,0,0.2);border-radius: 5px;margin-top: 10px;color: rgba(0,0,0,0.5);font-size: 20px;text-indent: 4em;padding: 10px;
}/*3.底部*/.footer {position: relative;height: 50px;/*background-color: blue;*/margin-top: 20px;
}/*信息栏*/
.infor {height: 100%;width: 150px;/*background-color: brown;*/text-align: center;position: absolute;left: 50%;margin-left: -75px;line-height: 50px;
}/*4.返回顶部*/
#top {position: fixed;right: 10px;bottom: 10px;cursor: pointer;background: url(../img/top.png);background-repeat: no-repeat;height: 33px;width: 33px;
}

源码下载

点击下载

欢迎加入交流群：451826376

更多信息：www.itcourse.top