实验4 学校网站首页制作 css+js+html

最新推荐文章于 2024-09-05 17:30:33 发布

你的负卿是我

最新推荐文章于 2024-09-05 17:30:33 发布

阅读量9.5k

点赞数 5

分类专栏： web前端文章标签： sqlite 列表定位 javascript jquery

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108131716

版权

本文档详细介绍了如何制作学校网站首页，包括CSS样式、HTML结构和JavaScript功能。页面布局采用上下左右结构，重点讲解了导航栏、内容区域的布局与定位，特别是利用相对和绝对定位实现内容的精准展示。同时提到了样式独立存储于css文件夹，以及所使用的JavaScript库。

摘要由CSDN通过智能技术生成

实验4 学校网站首页制作 css+js+html

效果分析及建议

1.样式以独立文件保存，存放在站点的css文件夹。
2.页面布局可分为上下结构，下面又可以分为左右结构。如下图所示。
在这里插入图片描述

main_left分为校园公告与学校园地两块
main_right分为上中下三块，上面包括：校园动态、教师园地，中间与图片新闻，下面为页尾信息。
3.top区域主要是8个圆圈代表的导航，与以往的区别是，它们并没有居中显示，而是有一定的边距或填充，使其靠右显示。
4.main_left比较好处理，只是要注意一下里面两块的位置。
5.main_right只要会处理其中一块，其它的也一样处理，下面以为校园动态为例说明。
在这里插入图片描述

 所有的内容可以包裹在一个div里，这个外层div包括h1标签（也可以是其它的，只是放一张校园动态的背景图而已）和div标签（包括列表的内容和更多内容）。
 处理校园动态及更多内容的位置。可以使用相对定位和绝对定位，使这两个内容位置设置好。如果不知道具体数值，可以调试，看看哪个值比较好看，按此值设置即可。
简单的写几句，希望对大家有帮助，祝成功~~~~~

css

 *{
   
    margin: 0px;
    
}
.container{
   
 background-image: url("../images/m_bg.jpg" );
 
    margin:0 auto;
    width: 1000px;
    height: 900px;
}
.nav{
   
    margin-left: 240px;
}
.nav a{
   
    background-image: url("../images/menu_bg.png");
    width: 38px;
    height: 38px;
    display: inline-block;
    padding: 21px;
    text-align: center;
    color: white;
    font-size: 14px;
    text-decoration: none;
    margin-top: 51px;
    margin-left: 5px;
}
.main_left{
   
    float: left;
    position:relative;
    widows: 160px;
    font-size: 12px;
    padding: 5px;
}
.main_left .notice{
   
    position: absolute;
    top: 88px;
    left: 30px;
    width: 160px;
}
.main_left .notice h2{
   
width: 160px;
text-align: center;
} 
.main_left .notice ul{
   
    padding-left: 10px;
    list-style-type: none;
} 
.main_left .notice li{
   
    background-image: url("../images/ico2.gif");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;

}
.main_left .notice li a{
   

    color: white;
    text-decoration: none;
    line-height: 24px;
}
.main_left .campas{
   
    position: absolute;
    top:297px;
    left: 30px;
    width: 160px;
}
.main_left .campas h2{
   
    width: 160px;
    text-align: center;
    } 
    .main_left .campas ul{
   
        padding-left: 10px;
        list-style-type: none;
    } 
    .main_left .campas li{
   
        background-image: url("../images/ico2.gif");
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: white;
    
    }
    .main_left .campas li a{
   
    
        color: white;
        text-decoration: none;
        line-height: 22px;
    }


.main_right{
   
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    width: 700px;
    height: 30px;
}
.top{
   
    position: relative;
    margin-left: 223px;
}
.dl{
   
    position: absolute;
}
.dr{
   
    position: absolute;
    top: 0px;
    left: 375px;
}
    
.dl h2,.dr h2{
   
    position: absolute;
    top: 9px;
    left: 8px;
    
}
.dl .more,.dr .more{
   
    position: absolute;
    top:58px ;
    left: 317px;
    display: block;
    width:20px ;
    height:114px ;
    background-image: url(../images/more.png);
}
.dl ul,.dr ul {
   
    background-image: url(../images/box1.jpg);
    width: 270px;
    height: 190px;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 52px;
    margin-top: 50px;
    list-style-type: none;
}
.dl ul li,.dr ul li{
   
    background-image: url(../images/ico.jpg);
    background-repeat: no-repeat;
    background-position:center left;
    padding-left: 10px;
    line-height: 28px;
    height: 28px;
    border-bottom: 1px dashed #e8e8e8;
}
.dl ul li a,.dr ul li a{
   
    color: #444;
    text-decoration: none;
}
.middle{
   
    position: relative;
    top: 323px;
    margin-left: 223px;
    width: 727px;
    height: 344px;
    background-image: url(../images/box2.jpg);
}
.middle h2{
   
    position: absolute;
    top:-40px;
    left: 8px;
}
.middle p {
   
    position: absolute;
    top: 31px;
    text-align: center;
    font-size: 12px;
}
.middle  #img1 {
   
    left:41.4px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.middle  #img2 {
   
    left:212.8px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.middle  #img3 {
   
    left:384.2px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.middle  #img4 {
   
    left:555.6px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.footer{
   
    position: relative;
    top: 323px;
    margin-left: 223px;
    
}
.footer p {
   
    position: absolute;
    top: -150px;
   text-align: center;
   font-size: 12px;
}
.footer  #img1 {
   
    left:57px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.footer  #img2 {
   
    left:221px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.footer  #img3 {
   
    left:385px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.footer  #img4{
   
    left:555px;
    border-width: 1px;
    padding: 5px;
    border-style: solid ;
}
.foot{
   
    font-size: 10px;
    position: relative;
    margin-left:306px;
    top: 392px;
}
.foot p{
   
    margin-left: 0px;
    text-align: center;
    color: slategrey;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>school</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="nav">
        <a href="#">网站首页</a>
        <a href="#">学校概况</a>
        <a href="#">新闻动态</a>
        <a href="#">师生风采</a>
        <a href="#">师生资料</a>
        <a href="#">网上留言</a>
        <a href="#">招聘信息</a>
        <a href="#">关于我们</a>
    </div>
    <div class="main">
        <div class="main_left">
            <div class="notice">
                <h2>
                    <img src="images/tit_ann.png">
                </h2>
                <ul>
                    <li><a href="#">关于2016年教研室课题课课课课</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">更多...</a></li>
                </ul> 
            </div>
            <div class="campas">
                <h2>
                    <img src="images/tit_yuan.png">
                </h2>
                <ul>
                    <li><a href="#">关于2016年教研室课题课课课课</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                    <li><a href="#">关于2016年教研室课题库</a></li>
                </ul> 
            </div>
        </div>
        <div class="main_right">
            <div class="top">
                <div class="dl">
                    <h2>
                        <img src="images/tit_school.png">
                    </h2>
                    <a href="#" class="more"></a>
                    <ul>
                        <li><a href="#">关于2016年教研室课题课课课课</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                    </ul> 

                </div>
                <div class="dr">
                    <h2>
                        <img src="images/tit_teach.png">
                    </h2>
                    <a href="#" class="more"></a>
                    <ul>
                        <li><a href="#">关于2016年教研室课题课课课课</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                        <li><a href="#">关于2016年教研室课题库</a></li>
                    </ul>
                </div>
        </div>
        <div class="middle">
            <h2>
                <img src="images/tit_pic.png">
            </h2>
           
                <p id="img1">
                    <img src="images/pic.jpg">
                    <br>校园图片
                </p>
                
  
            <p id="img2">
                <img src="images/pic1.jpg"><br>
                校园图片
            </p> 
        <p id="img3">
            <img src="images/pic.jpg"><br>
            校园图片
        </p>
            <p id="img4">
                <img src="images/pic1.jpg"><br>
                校园图片
            </p> 
       
                
        </div>
        <div class="footer">
            <p id="img1">
                <img src="images/pic2.jpg"><br>
                校园风光
            </p>
                <p id="img2">
                    <img src="images/pic3.jpg"><br>
                    校园风光
                </p> 
            <p id="img3">
                <img src="images/pic2.jpg"><br>
                校园风光
            </p>
                <p id="img4">
                    <img src="images/pic3.jpg"><br>
                    校园风光
                </p> 
        </div>
        <div class="foot">
            <p>版权所有© &nbsp;中山五桂山桂南学校&nbsp;&nbsp;学校地址&nbsp;&nbsp; 中山市五桂山镇桂南马溪西路3号</p>
        </div>
     </div>       
    </div>
</div>
</body>
</html>

JS部分

flickerplate.min js

!function(a){
   var b=function(){
   var b=this,c=0,d=!1,e=0,f=0,g=!1;b.settings={
   arrows:!0,arrows_constraint:!1,auto_flick:!0,auto_flick_delay:10,block_text:!0,dot_navigation:!0,dot_alignment:"center",flick_animation:"transition-slide",flick_position:1,inner_width:!1,theme:"light"},b.init=function(f,h){
   b.settings=a.extend(b.settings,h),d=f,d.addClass("flickerplate"),d.find("ul:first").addClass("flicks"),d.find("li:first").addClass("first-flick"),c=b.settings.flick_position-1,$data_flick_position=d.data("flick-position"),void 0!=$data_flick_position&&(c=$data_flick_position-1),d.attr("data-flick-position",c);var i=d.data("flick-animation");b.settings.flick_animation=b.settings.flick_animation||i,d.addClass("animate-"+b.settings.flick_animation);var j=d.data("theme"),k=d.find(".first-flick").data("theme");j&&j.length>0?(b.settings.theme=j,d.addClass(k&&k.length>0?"flicker-theme-"+k:"flicker-theme-"+j)):d.addClass("flicker-theme-"+b.settings.theme);var l=d.data("block-text");if(void 0!=l&&0==l&&(b.settings.block_text=!1),d.find("ul.flicks > li").each(function(){
   e++,a(this).wrapInner('<div class="flick-inner"><div class="flick-content"></div></div>'),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>'));var c=a(this).data("background");c&&c.length>0&&a(this).css("background-image","url("+c+")"),$flick_theme=a(this).data("theme"),$flick_theme&&$flick_theme.length>0&&a(this).addClass("flick-theme-"+$flick_theme)}),"scroller-slide"!=b.settings.flick_animation){
   $data_arrow_navigation=d.data("arrows"),void 0!=$data_arrow_navigation?0!=$data_arrow_navigation&&b.create_arrow_navigation():1==b.settings.arrows&&b.create_arrow_navigation(),$data_dot_navigation=d.data("dot-navigation"),$data_dot_alignment=d.data("dot-alignment");var m=b.settings.dot_alignment;void 0!=$data_dot_alignment&&("left"==$data_dot_alignment||"right"==$data_dot_alignment)&&(m=$data_dot_alignment),void 0!=$data_dot_navigation?0!=$data_dot_navigation&&b.create_dot_navigation(m):1==b.settings.dot_navigation&&b.create_dot_navigation(m),$flick_delay=1e3*b.settings.auto_flick_delay,$data_auto_flick=d.data("auto-flick"),$data_auto_flick_delay=d.data("auto-flick-delay"),$data_auto_flick_delay&&($flick_delay=1e3*$data_auto_flick_delay),void 0!=$data_auto_flick&&(b.settings.auto_flick=0!=$data_auto_flick),b.auto_flick_start(),b.flick_flicker(),"jquery-slide"!=b.settings.flick_animation&&d.find("ul.flicks").bind("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",function(){
   g=!1})}b.move_flicker(c)},b.flick_flicker=function(){
   Modernizr.touch&&d.on("drag",function(a){
   0==g&&"horizontal"==a.orientation&&(a.preventDefault(),1==a.direction?--c<0?c=0:(g=!0,b.move_flicker(c)):++c==e?c=e-1:(g=!0,b.move_flicker(c)))})},b.create_arrow_navigation=function(){
   $arrow_nav_html='<div class="arrow-navigation left"><div class="arrow"></div></div>',$arrow_nav_html+='<div class="arrow-navigation right"><div class="arrow"></div></div>',d.prepend($arrow_nav_html),a(".arrow-navigation").mouseover(function(){
   a(this).toggleClass("hover")}),a(".arrow-navigation").mouseout(function(){
   a(this).toggleClass("hover")}),$data_arrows_constraint=d.data("arrows-constraint"),void 0!=$data_arrows_constraint&&(b.settings.arrows_constraint=$data_arrows_constraint),d.find(".arrow-navigation").on("click",function(){
   a(this).hasClass("right")?++c==e&&(c=b.settings.arrows_constraint?e-1:0):--c<0&&(c=b.settings.arrows_constraint?0:e-1),b.move_flicker(c)})},b.create_dot_navigation=function(c){
   for($dot_nav_html='<div class="dot-navigation '+c+'"><ul>';e>f;)f++,$dot_nav_html+=1==f?'<li><div class="dot active"></div></li>':'<li><div class="dot"></div></li>';$dot_nav_html+="</ul></div>",d.prepend($dot_nav_html),d.find(".dot-navigation li").on("click",function(){
   b.move_flicker(a(this).index())})},b.auto_flick_start=function(){
   1==b.settings.auto_flick&&(b.flicker_auto=setInterval(b.auto_flick,$flick_delay))},b.auto_flick=function(){
   ++c==e&&(c=0),b.move_flicker(c)},b.auto_flick_stop=function(){
   b.flicker_auto=clearInterval(b.flicker_auto)},b.auto_flick_reset=function(){
   b.auto_flick_stop(),b.auto_flick_start()},b.move_flicker=function(a){
   c=a,"transform-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
   style:"-webkit-transform:translate3d(-"+c+"%, 0, 0);-o-transform:translate3d(-"+c+"%, 0, 0);-moz-transform:translate3d(-"+c+"%, 0, 0);transform:translate3d(-"+c+"%, 0, 0)"}):"transition-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
   style:"left:-"+c+"00%;"}):"jquery-slide"==b.settings.flick_animation&&d.find("ul.flicks").animate({
   left:"-"+c+"00%"},function(){
   g=!1}),$crt_flick=d.find("ul.flicks li:eq("+c+")"),d.removeClass("flicker-theme-light").removeClass("flicker-theme-dark"),d.addClass($crt_flick.hasClass("flick-theme-dark")?"flicker-theme-dark":$crt_flick.hasClass("flick-theme-light")?"flicker-theme-light":"flicker-theme-"+b.settings.theme),d.find(".dot-navigation .dot.active").removeClass("active"),d.find(".dot:eq("+c+")").addClass("active"),d.attr("data-flick-position",c),b.auto_flick_reset()}};a.fn.flicker=function(c){
   var d=this.length;return this.each(function(e){
   var f=a(this),g="flickerplate"+(d>1?"-"+ ++e:""),h=(new b).init(f,c);f.data(g,h).data("key",g)})}}(jQuery);

jquery-finger-v0.1.0.min js

!function(a){
   function b(a,b){
   return(m?b.originalEvent.touches[0]:b)["page"+a.toUpperCase()]}function c(b,c,d){
   var g=a.Event(c,t);a.event.trigger(g,{
   originalEvent:b},b.target),g.isDefaultPrevented()&&b.preventDefault(),d&&(a.event.remove(r,p+"."+q,e),a.event.remove(r,o+"."+q,f))}function d(d){
   var k=d.timeStamp||+new Date;i!=k&&(i=k,s.x=t.x=b("x",d),s.y=t.y=b("y",d),s.time=k,s.target=d.target,t.orientation=null,g=!1,h=!1,j=setTimeout(function(){
   h=!0,c(d,"press")},a.Finger.pressDuration),a.event.add(r,p+"."+q,e),a.event.add(r,o+"."+q,f),u.preventDefault&&d.preventDefault())}function e(d){
   return t.x=b("x",d),t.y=b("y",d),t.dx=t.x-s.x,t.dy=t.y-s.y,t.adx=Math.abs(t.dx),t.ady=Math.abs(t.dy),(g=t.adx>u.motionThreshold||t.ady>u.motionThreshold)?(clearTimeout(j),t.orientation||(t.adx>t.ady?(t.orientation="horizontal",t.direction=t.dx>0?1:-1):(t.orientation="vertical",t.direction=t.dy>0?1:-1)),d.target!==s.target?(d.target=s.target,void f.call(this,a.Event(o+"."+q,d))):void c(d,"drag")):void 0}function f(a){
   var b,d=a.timeStamp||+new Date,e=d-s.time;if(clearTimeout(j),a.target===s.target){
   if(g||h)e<u.flickDuration&&c(a,"flick"),t.end=!0,b="drag";else{
   var f=k===a.target&&d-l<u.doubleTapInterval;b=f?"doubletap":"tap",k=f?null:s.target,l=d}c(a,b,!0)}}var g,h,i,j,k,l,m="ontouchstart"in window,n=m?"touchstart":"mousedown",o=m?"touchend touchcancel":"mouseup mouseleave",p=m?"touchmove":"mousemove",q="finger",r=a("html")[0],s={
   },t={
   },u=a.Finger={
   pressDuration:300,doubleTapInterval:300,flickDuration:150,motionThreshold:5};a.event.add(r,n+"."+q,d)}(jQuery),function(a){
   var b=function(){
   var b=this,c=0,d=!1,e=0,f=0,g=!1;b.settings={
   block_text:!0,inner_width:!1,theme:"light",flick_animation:"transition-slide",auto_flick:!0,auto_flick_delay:10,dot_navigation:!0,dot_alignment:"center",arrows:!0},b.init=function(f,h){
   b.settings=a.extend(b.settings,h),d=f,d.addClass("flickerplate"),d.find("ul:first").addClass("flicks"),d.find("li:first").addClass("first-flick"),d.attr("data-flick-position",c);var i=d.data("flick-animation");i&&i.length>0?("transform-slide"==i?b.settings.flick_animation="transform-slide":"transition-slide"==i?b.settings.flick_animation="transition-slide":"jquery-slide"==i?b.settings.flick_animation="jquery-slide":"scroller-slide"==i&&(b.settings.flick_animation="scroller-slide"),d.addClass("animate-"+i)):d.addClass("animate-"+b.settings.flick_animation);var j=d.data("theme"),k=d.find(".first-flick").data("theme");j&&j.length>0?(b.settings.theme=j,d.addClass(k&&k.length>0?"flicker-theme-"+k:"flicker-theme-"+j)):d.addClass("flicker-theme-"+b.settings.theme);var l=d.data("block-text");if(void 0!=l&&0==l&&(b.settings.block_text=!1),d.find("li").each(function(){
   e++,a(this).wrapInner('<div class="flick-inner"><div class="flick-content"></div></div>'),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>'));var c=a(this).data("background");c&&c.length>0&&a(this).css("background-image","url("+c+")"),$flick_theme=a(this).data("theme"),$flick_theme&&$flick_theme.length>0&&a(this).addClass("flick-theme-"+$flick_theme)}),"scroller-slide"!=b.settings.flick_animation){
   $data_arrow_navigation=d.data("arrows"),void 0!=$data_arrow_navigation?0!=$data_arrow_navigation&&b.create_arrow_navigation():1==b.settings.arrows&&b.create_arrow_navigation(),$data_dot_navigation=d.data("dot-navigation"),$data_dot_alignment=d.data("dot-alignment");var m=b.settings.dot_alignment;void 0!=$data_dot_alignment&&("left"==$data_dot_alignment?m="left":"right"==$data_dot_alignment&&(m="right")),void 0!=$data_dot_navigation?0!=$data_dot_navigation&&b.create_dot_navigation(m):1==b.settings.dot_navigation&&b.create_dot_navigation(m),$flick_delay=1e3*b.settings.auto_flick_delay,$data_auto_flick=d.data("auto-flick"),$data_auto_flick_delay=d.data("auto-flick-delay"),$data_auto_flick_delay&&($flick_delay=1e3*$data_auto_flick_delay),void 0!=$data_auto_flick&&(b.settings.auto_flick=0!=$data_auto_flick?!0:!1),b.auto_flick_start(),b.flick_flicker(),"jquery-slide"!=b.settings.flick_animation&&d.find("ul.flicks").bind("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",function(){
   g=!1})}},b.flick_flicker=function(){
   Modernizr.touch&&d.on("drag",function(a){
   0==g&&"horizontal"==a.orientation&&(a.preventDefault(),1==a.direction?(c--,0>c?c=0:(g=!0,b.move_flicker(c))):(c++,c==e?c=e-1:(g=!0,b.move_flicker(c))))})},b.create_arrow_navigation=function(){
   $arrow_nav_html='<div class="arrow-navigation left"><div class="arrow"></div></div>',$arrow_nav_html+='<div class="arrow-navigation right"><div class="arrow"></div></div>',d.prepend($arrow_nav_html),a(".arrow-navigation").mouseover(function(){
   0==a(this).hasClass("hover")&&a(this).addClass("hover")}),a(".arrow-navigation").mouseout(function(){
   1==a(this).hasClass("hover")&&a(this).removeClass("hover")}),a(".arrow-navigation").on("click",function(){
   a(this).hasClass("right")?(c++,c==e&&(c=0)):(c--,0>c&&(c=e-1)),b.move_flicker(c)})},b.create_dot_navigation=function(c){
   for($dot_nav_html='<div class="dot-navigation '+c+'"><ul>';e>f;)f++,$dot_nav_html+=1==f?'<li><div class="dot active"></div></li>':'<li><div class="dot"></div></li>';$dot_nav_html+="</ul></div>",d.prepend($dot_nav_html),d.find(".dot-navigation li").on("click",function(){
   b.move_flicker(a(this).index())})},b.auto_flick_start=function(){
   1==b.settings.auto_flick&&(b.flicker_auto=setInterval(b.auto_flick,$flick_delay))},b.auto_flick=function(){
   c++,c==e&&(c=0),b.move_flicker(c)},b.auto_flick_stop=function(){
   b.flicker_auto=clearInterval(b.flicker_auto)},b.auto_flick_reset=function(){
   b.auto_flick_stop(),b.auto_flick_start()},b.move_flicker=function(a){
   c=a,"transform-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
   style:"-webkit-transform:translate3d(-"+c+"%, 0, 0);-o-transform:translate3d(-"+c+"%, 0, 0);-moz-transform:translate3d(-"+c+"%, 0, 0);transform:translate3d(-"+c+"%, 0, 0)"}):"transition-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
   style:"left:-"+c+"00%;"}):"jquery-slide"==b.settings.flick_animation&&d.find("ul.flicks").animate({
   left:"-"+c+"00%"},function(){
   g=!1}),$crt_flick=d.find("ul.flicks li:eq("+c+")"),d.removeClass("flicker-theme-light").removeClass("flicker-theme-dark"),d.addClass($crt_flick.hasClass("flick-theme-dark")?"flicker-theme-dark":$crt_flick.hasClass("flick-theme-light")?"flicker-theme-light":"flicker-theme-"+b.settings.theme),d.find(".dot-navigation .dot.active").removeClass("active"),d.find(".dot:eq("+c+")").addClass("active"),d.attr("data-flick-position",c),b.auto_flick_reset()}};a.fn.flicker=function(c){
   var d=this.length;return this.each(function(e){
   var f=a(this),g="flickerplate"+(d>1?"-"+ ++e:""),h=(new b).init(f,c);f.data(g,h).data("key",g)})}}(jQuery);

jquery-v1.10.2.min js

!function(a,b){
   function c(a){
   var b=a.length,c=kb.type(a);return kb.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||"function"!==c&&(0===b||"number"==typeof b&&b>0&&b-1 in a)}function d(a){
   var b=zb[a]={
   };return kb.each(a.match(mb)||[],function(a,c){
   b[c]=!0}),b}function e(a,c,d,e){
   if(kb.acceptData(a)){
   var f,g,h=kb.expando,i=a.nodeType,j=i?kb.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||d!==b||"string"!=typeof c)return k||(k=i?a[h]=bb.pop()||kb.guid++:h),j[k]||(j[k]=i?{
   }:{
   toJSON:kb.noop}),("object"==typeof c||"function"==typeof c)&&(e?j[k]=kb.extend(j[k],c):j[k].data=kb.extend(j[k].data,c)),g=j[k],e||(g.data||(g.data={
   }),g=g.data),d!==b&&(g[kb.camelCase(c)]=d),"string"==typeof c?(f=g[c],null==f&&(f=g[kb.camelCase(c)])):f=g,f}}function f(a,b,c){
   if(kb.acceptData(a)){
   var d,e,f=a.nodeType,g=f?kb.cache:a,i=f?a[kb.expando]:kb.expando;if(g[i]){
   if(b&&(d=c?g[i]:g[i].data)){
   kb.isArray(b)?b=b.concat(kb.map(b,kb.camelCase)):b in d?b=[b]:(b=kb.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;for(;e--;)delete d[b[e]];if(c?!h(d):!kb.isEmptyObject(d))return}(c||(delete g[i].data,h(g[i])))&&(f?kb.cleanData([a],!0):kb.support.deleteExpando||g!=g.window?delete g[i]:g[i]=null)}}}function g(a,c,d){
   if(d===b&&1===a.nodeType){
   var e="data-"+c.replace(Bb,"-$1").toLowerCase();if(d=a.getAttribute(e),"string"==typeof d){
   try{
   d="true"===d?!0:"false"===d?!1:"null"===d?null:+d+""===d?+d:Ab.test(d)?kb.parseJSON(d):d}catch(f){
   }kb.data(a,c,d)}else d=b}return d}function h(a){
   var b;for(b in a)if(("data"!==b||!kb.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function i(){
   return!0}function j(){
   return!1}function k(){
   try{
   return Y.activeElement}catch(a){
   }}function l(a,b){
   do a=a[b];while(a&&1!==a.nodeType);return a}function m(a,b,c){
   if(kb.isFunction(b))return kb.grep(a,function(a,d){
   return!!b.call(a,d,a)!==c});if(b.nodeType)return kb.grep(a,function(a){
   return a===b!==c});if("string"==typeof b){
   if(Qb.test(b))return kb.filter(b,a,c);b=kb.filter(b,a)}return kb.grep(a,function(a){
   return kb.inArray(a,b)>=0!==c})}function n(a){
   var b=Ub.split("|"),c=a.createDocumentFragment();if(c.createElement)for(;b.length;)c.createElement(b.pop());return c}function o(a,b){
   return kb.nodeName(a,"table")&&kb.nodeName(1===b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function p(a){
   return a.type=(null!==kb.find.attr(a,"type"))+"/"+a.type,a}function q(a){
   var b=ec.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function r(a,b){
   for(var c,d=0;null!=(c=a[d]);d++)kb._data(c,"globalEval",!b||kb._data(b[d],"globalEval"))}function s(a,b){
   if(1===b.nodeType&&kb.hasData(a)){
   var c,d,e,f=kb._data(a),g=kb._data(b,f),h=f.events;if(h){
   delete g.handle,g.events={
   };for(c in h)for(d=0,e=h[c].length;e>d;d++)kb.event.add(b,c,h[c][d])}g.data&&(g.data=kb.extend({
   },g.data))}}function t(a,b){
   var c,d,e;if(1===b.nodeType){
   if(c=b.nodeName.toLowerCase(),!kb.support.noCloneEvent&&b[kb.expando]){
   e=kb._data(b);for(d in e.events)kb.removeEvent(b,d,e.handle);b.removeAttribute(kb.expando)}"script"===c&&b.text!==a.text?(p(b).text=a.text,q(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),kb.support.html5Clone&&a.innerHTML&&!kb.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&bc.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}function u(a,c){
   var d,e,f=0,g=typeof a.getElementsByTagName!==W?a.getElementsByTagName(c||"*"):typeof a.querySelectorAll!==W?a.querySelectorAll(c||"*"):b;if(!g)for(g=[],d=a.childNodes||a;null!=(e=d[f]);f++)!c||kb.nodeName(e,c)?g.push(e):kb.merge(g,u(e,c));return c===b||c&&kb.nodeName(a,c)?kb.merge([a],g):g}function v(a){
   bc.test(a.type)&&(a.defaultChecked=a.checked)}function w(a,b){
   if(b in a)return b;for(var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=yc.length;e--;)if(b=yc[e]+c,b in a)return b;return d}function x(a,b){
   return a=b||a,"none"===kb.css(a,"display")||!kb.contains(a.ownerDocument,a)}function y(a,b){
   for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=kb._data(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&x(d)&&(f[g]=kb._data(d,"olddisplay",C(d.nodeName)))):f[g]||(e=x(d),(c&&"none"!==c||!e)&&kb._data(d,"olddisplay",e?c:kb.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}function z(a,b,c){
   var d=rc.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function A(a,b,c,d,e){
   for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=kb.css(a,c+xc[f],!0,e)),d?("content"===c&&(g-=kb.css(a,"padding"+xc[f],!0,e)),"margin"!==c&&(g-=kb.css(a,"border"+xc[f]+"Width",!0,e))):(g+=kb.css(a,"padding"+xc[f],!0,e),"padding"!==c&&(g+=kb.css(a,"border"+xc[f]+"Width",!0,e)));return g}function B(a,b,c){
   var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=kc(a),g=kb.support.boxSizing&&"border-box"===kb.css(a,"boxSizing",!1,f);if(0>=e||null==e){
   if(e=lc(a,b,f),(0>e||null==e)&&(e=a.style[b]),sc.test(e))return e;d=g&&(kb.support.boxSizingReliable||e===a.style[b]),e=parseFloat(e)||0}return e+A(a,b,c||(g?"border":"content"),d,f)+"px"}function C(a){
   var b=Y,c=uc[a];return c||(c=D(a,b),"none"!==c&&c||(jc=(jc||kb("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(b.documentElement),b=(jc[0].contentWindow||jc[0].contentDocument).document,b.write("<!doctype html><html><body>"),b.close(),c=D(a,b),jc.detach()),uc[a]=c),c}function D(a,b){
   var c=kb(b.createElement(a)).appendTo(b.body),d=kb.css(c[0],"display");return c.remove(),d}function E(a,b,c,d){
   var e;if(kb.isArray(b))kb.each(b,function(b,e){
   c||Ac.test(a)?d(a,e):E(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==kb.type(b))d(a,b);else for(e in b)E(a+"["+e+"]",b[e],c,d)}function F(a){
   return function(b,c){
   "string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(mb)||[];if(kb.isFunction(c))for(;d=f[e++];)"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function G(a,b,c,d){
   function e(h){
   var i;return f[h]=!0,kb.each(a[h]||[],function(a,h){
   var j=h(b,c,d);return"string"!=typeof j||g||f[j]?g?!(i=j):void 0:(b.dataTypes.unshift(j),e(j),!1)}),i}var f={
   },g=a===Rc;return e(b.dataTypes[0])||!f["*"]&&e("*")}function H(a,c){
   var d,e,f=kb.ajaxSettings.flatOptions||{
   };for(e in c)c[e]!==b&&((f[e]?a:d||(d={
   }))[e]=c[e]);return d&&kb.extend(!0,a,d),a}function I(a,c,d){
   for(var e,f,g,h,i=a.contents,j=a.dataTypes;"*"===j[0];)j.shift(),f===b&&(f=a.mimeType||c.getResponseHeader("Content-Type"));if(f)for(h in i)if(i[h]&&i[h].test(f)){
   j.unshift(h);break}if(j[0]in d)g=j[0];else{
   for(h in d){
   if(!j[0]||a.converters[h+" "+j[0]]){
   g=h;break}e||(e=h)}g=g||e}return g?(g!==j[0]&&j.unshift(g),d[g]):void 0}function J(a,b,c,d){
   var e,f,g,h,i,j={
   },k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];for(f=k.shift();f;)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){
   if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0

最低0.47元/天解锁文章

你的负卿是我

关注

5
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
实验4 学校网站首页制作 css+js+html

实验4 学校网站首页制作 css+js+html效果分析及建议1.样式以独立文件保存，存放在站点的css文件夹。2.页面布局可分为上下结构，下面又可以分为左右结构。如下图所示。main_left分为校园公告与学校园地两块main_right分为上中下三块，上面包括：校园动态、教师园地，中间与图片新闻，下面为页尾信息。3.top区域主要是8个圆圈代表的导航，与以往的区别是，它们并没有居中显示，而是有一定的边距或填充，使其靠右显示。4.main_left比较好处理，只是要注意一下里面两块的位
复制链接

扫一扫

专栏目录