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

作者: 53b3f4658edc | 来源:发表于2017-10-16 16:05 被阅读3次

006_布局任务与答案第一期（四川师范大学JavaWeb）
2018-05-20《四川名人的文化价值与中国优秀传统文化的传承
成都梁平商会被四川师范大学城市商会联盟授予“联合创始人单位”
李华平：四川师范大学教授
JavaWeb之上传下载与JavaMail
多种布局实践
从双非本科到985、211高校的逆袭保研之路
006_类的定义和声明。
006_变量的声明和赋值。
“音梦来袭”迎新晚会

JavaWeb架构师

试验目的

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

实验步骤

【任务一】:将实验一中的网页用 DIV+CSS 布局改写成两栏(和三栏)布局。要求:

页面的基本布局如下:
header 部分必须包含网站的 logo 和 banner;
footer 部分包含网站的版权内容，例如作者，创作时间等等。
sidebar 是各种 JavaWeb 开发工具的链接。
menu 栏留一个空行，写上菜单名称。菜单先不添加功能和行为。
content 是网页显示的主要内容，主要用于显示用户收藏的信息。
a) content 中至少包含一个表格，表格为三列，第一列为工具名称，第二列介绍链接，第三列为网站链接。 b) 表格必须有外边框。表头使用边框横线分隔。表格内容之间既没有边框横线，也没有边框竖线。表格宽度
和 content 部分宽度一致。
c) 向表格中添加一些网站数据。
d) content 中在表格之后添加各种工具的介绍。
e) 当在 sidebar 中点或者上面表格中击各个工具的介绍链接之后，将做页内跳转到不同的部分。
(选做)如果有时间，可以将网页布局改为三栏布局(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

完整教程PDF版本下载

006_布局任务与答案第一期（四川师范大学JavaWeb）
试验目的了解页面常用布局结构; 掌握 DIV+CSS 布局的基本方法; 3) 掌握用 CSS 改变页面样式的方法...
2018-05-20《四川名人的文化价值与中国优秀传统文化的传承
《四川名人的文化价值与中国优秀传统文化的传承与弘扬》成都博物馆讲师：王川四川师范大学演讲也是：电视录...
成都梁平商会被四川师范大学城市商会联盟授予“联合创始人单位”
8月15日，四川师范大学（经管学院）城市商会联盟会在四川师范大学狮子山校区召开。成都梁平商会盛仁学会长接受四川师...
李华平：四川师范大学教授
人物 | 李华平：四川师范大学教授中小学写作教学 03-27 18:05 +关注 — — 李华平四川师范大学教...
JavaWeb之上传下载与JavaMail
title: JavaWeb之上传下载与JavaMailtag: JavaWeb upload JavaMailc...
多种布局实践
布局任务一：单栏布局任务二：双栏布局任务三：三栏布局-左右固定，中间自适应任务四：图片墙任务五：知乎读书
从双非本科到985、211高校的逆袭保研之路
肖雨桐四川师范大学2014级学生，获四川省优秀毕业生，保研华中师范大学，曾获北京师范大学、西南大学的研究生off...
006_类的定义和声明。
namespace _006_类的定义和声明 { class Program { static voi...
006_变量的声明和赋值。
namespace _006_变量的声明和赋值 { class Program { static vo...
“音梦来袭”迎新晚会
今晚七点，在四川师范大学龙湖剧场，举办了2018年度四川师范大学音乐学院迎新晚会“音梦来袭”。晚...