静态网页布局与动态数据的加载-前端--易笔记-weiyer.com

　　核心提示：jsp'>JSP 分析：代码注释里已经概括 %@ page language=java import=java.util.* pageEncoding=UTF-8%title发现/title meta...

jsp">JSP

分析：代码注释里已经概括

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
 
 
   
 
 
    <title>发现</title>
 
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
    <link href="./search.css" rel="stylesheet" type="text/css" media="all">
 
   
    <!-- 顶部的静态页面布局和动态数据加载  --> 
    <p class="top">
        <p class="c_lan">大家在看
        <p class="space">
        <p class="c_article">
             
                【战争】这里的黎明静悄悄
             
            <p class="right">
                <p class="font">【神话】封神演义
             
         
        <p class="space">
        <p class="c_article">
             
                【战争】这里的黎明静悄悄
             
            <p class="right">
                <p class="font">【神话】封神演义
             
         
        <p class="space">
        <p class="c_article">
             
                【战争】这里的黎明静悄悄
             
            <p class="right">
                <p class="font">【神话】封神演义
             
         
        <p class="space">
        <p class="reverse" id="reverse">换一批
     
    <p class="kong">
    <!-- 世界文学作品栏 -->
    <p class="c_lan">世界文学
 
    <p class="new_surrond">
 
        <p class="new">
            <img src="" class="new_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            <p class="new_content">文学作品
         
        <p class="new">
            <img src="" class="new_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            <p class="new_content">文学作品
         
        <p class="new">
            <img src="" class="new_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            <p class="new_content">文学作品
         
        <p class="new">
            <img src="" class="new_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            <p class="new_content">文学作品
         
        <p class="new">
            <img src="" class="new_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            <p class="new_content">文学作品
         
 
     
    <p class="kong">  
    <!-- 类别广场栏 -->
    <p class="c_lan">类别广场
    <p class="guang_surround">
         
                <img src="" class="guang_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                古典文学
                1000人关注
         
         
                <img src="" class="guang_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                古典文学
                1000人关注
         
         
                <img src="" class="guang_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                古典文学
                1000人关注
         
         
                <img src="" class="guang_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                古典文学
                1000人关注
         
     
    <p class="kong">
    <p class="extend">
        书籍是人类进步的阶梯
        <img src="" class="extend_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
        想读书的时候来剑圣阅读
     
     
         
            每个人的世界都有精彩
            <img src="" class="extend_img" style="display: none;"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            希望读书能让你找到精彩
         
         
         
            剑圣阅读会为您推送礼物
            <img src="" class="extend_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
            点击查看更多
         
         
        <!-- 责任编辑栏 -->
        <p class="c_lan">责任编辑
        <p class="new_surrond">
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
            <p class="new">
                <img src="" class="new_img"><img alt="加载中..." title="图片加载中..." src=/uploadfile/2016/0831/20160831015911429.gif">
                啦啦啦
             
         
   
 
 
 
  <script type="text/javascript" src = "js/jquery.js"></script>
  <script type="text/javascript">
    // 页面初始化时
    window.onload = function(){
        var num = $(".font");
        for (var i = 0;i < num.length; i++){
            num.eq(i).css("color", getRandomColor());
        }
        var $newWidth = $(".new_img").width();
        $(".new_img").css("height", $newWidth*1.5);
    };
    // 字体颜色的随机值
    function getRandomColor(){
        var c = '#';
        var cArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A',
                    'B', 'C', 'D', 'E', 'F'];
        for (var i = 0; i < 6; i++){
            var cIndex = Math.round(Math.random() * 15);
            c += cArray[cIndex];
        }
        return c;
    }
    // "换一批",通过id = reverse相应点击事件,
    $("#reverse").click(function(){
        // 通过json获取数据，改变left，right的文本
        $.ajax({
            url:"sixRandom.shtml",
            type:"GET",
            dataType:"json",
            success:function(data){
                var left = $(".left");         
                for (var i = 0; i < left.length; i++){
                    left.eq(i).html("<p class="font">["+data[i*2].tag+"]" + data[i*2].name);
                }
                var right = $(".right");
                for(i=0;i<right.length;i++){ right.eq(i).html("<p="" class="font">["+data[i*2+1].tag+"]"+data[i*2+1].name);
                }
                var num = $(".font");
                for(i=0;i<num.length;i++){ num.eq(i).css("color",getrandomcolor());="" }="" });="" <="" script>="" <="" html="">
</num.length;i++){></right.length;i++){></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>

CSS

.top{
    width: 100%;
}

.c_lan{
    font-size: 1.1em;
    font-weight: 900;
    line-height: 1.1em;
    display: block;
    padding-top: 5px;
    margin-bottom: 15px;
}

.space {
    width: 100%;
    height: 1px;
    background-color: #EEE9BF;
    display: block;
}

.c_article {
    font-size: 1.0em;
    font-weight: 100;
    line-height: 1.0em;
    width: 100%;
    height: 50px;
}

.left {
    width: 45%;
    float: left;
    text-align: left;
    font-size: 0.9em;
    height: 50px;
    line-height: 50px;
}


.right  {
    width: 45%;
    float: right;
    text-align: right;
    font-size: 0.9em;
    height: 50px;
    line-height: 50px;
}

.font{
    display:inline;
}
.reverse{
    width: 100%;
    height: 30px;
    text-align: center;
    color: #EEE9BF;
    font-size: 1.1em;
    line-height: 30px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.kong{
    width: 100%;
    height: 10px;
    background-color: #EEE9BF;
    display: block;
}
.new{
    width: 30%;
    margin-left: 3%;
    float: left;
    margin-bottom: 10px;
}
.new_img{
    width: 100%;
}

.new_content{
    width: 100%;
    height: 50px;
    line-height: 1.5em;
    text-align: left;
    font-size: 0.75em;
    overflow: hidden;
}

.new_surrond{
    width: 100%;
    overflow: auto;
}
.guang{
    width: 45.5%;
    margin-left: 2.5%;
    float: left;
    margin-bottom: 10px;
}

.guang_img{
    width: 100%;
}

.guang_content{
    width: 100%;
    height: 20px;
    line-height: 1.5em;
    text-align: center;
    font-size: 0.75em;
    overflow: hidden;
}

.guang_desc{
    width: 100%;
    height: 15px;
    line-height: 1.2em;
    text-align: center;
    font-size: 0.6em;
    overflow: hidden;
}

.guang_surround{
    width: 100%;
    overflow: auto;
}
.extend{
    width: 100%;
    height:100px;
}

.extend_img{
    width: 50px;
    height: 50px;
    margin-top: 25px;
    float: right;
    margin-right: 30px; 
}

.extend_title{
    line-height: 1.2em;
    font-size: 0.9em;
    margin-left: 20px;
    margin-top: 20px;
    display: inline-block;
}

.extend_subtitle{
    line-height: 1.2em;
    font-size: 0.7em;
    margin-left: 40px;
    margin-top: 20px;
    display: inline-block;
}

执行效果图

提示：由于网页太长，有滚动条，导致截图有点不好看，自行脑补吧~

静态网页布局与动态数据的加载

静态网页布局与动态数据的加载

时间：2016/8/31 9:13:11 点击：

jsp">JSP

CSS

执行效果图

本类热门

本类推荐

本类固顶

静态网页布局与动态数据的加载

时间：2016/8/31 9:13:11 点击：

jsp">JSP

CSS

执行效果图

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶