HTML期末学生大作业-资讯网站html+css+javascript

html网页制作期末大作业-资讯网站html+css+javascript+Jquery 8个页面适用学生作业 课程设计在线新闻资讯网站、期末作业资讯网、毕业设计资讯网站

部分页面截源代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>今日资讯网</title>
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.easyfader.css">
    <link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="js/vendor/owl.carousel.2.1.0/assets/owl.theme.default.min.css">
</head>
<body>
<span class="top" id="top"><img src="img/top.png"></span>
<header>
    <nav class="top clearfix">
        <a href="index.html">首页</a>


        <a href="guide.html">导购</a>
        <a href="appcessory.html">配件</a>
        <a href="test.html">评测</a>
        <a href="news.html">资讯</a>
        <a href="picture.html">图片</a>
        <span> <a href="login.html">登录</a><a href="#">注册</a></span>
    </nav>
    <nav class="main">
        <a href="#" id="brand"><img src="img/logo.png" alt="回到首页"></a>
        <ul>
       
            <li><a href="index.html">首页</a></li>
            <li class="navli"><a href="guide.html">购机导购</a>
               
            </li>
            <li class="navli"><a href="test.html">评测中心</a>
              
            </li>
            <li class="navli"><a href="appcessory.html">智能·配件</a>

            </li>
            <li class="navli"><a href="news.html">新闻资讯</a>
                 
            </li>
            <li class="navli"><a href="picture.html">有机可图</a>
                
            </li>

        </ul>
    </nav>

</header>

<div class="container"><!-- bigbox  container-->
    <div class="banner"><!-- 轮播图片 -->
        <div class="owl-carousel owl-theme" id="owl-demo">
            <div class="item">
                <!-- <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)"> -->
                <img src="img/img3.jpg">

            </div>
            <div class="item">
                <!-- <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)"> -->
                <img src="img/img2.jpg">

            </div>
            <div class="item">
                <!-- <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)"> -->
                <img src="img/img1.jpg">

            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="btn">
        <ul>
            <li><a href="#"><img src="img/zixun.png">
                <p>资讯</p></a></li>
            <li><a href="#"><img src="img/gonglue.png">
                <p>攻略</p></a></li>
            <li><a href="#"><img src="img/shouji.png">
                <p>手机</p></a></li>
            <li><a href="#"><img src="img/zhineng.png">
                <p>智能</p></a></li>
        </ul>
    </div>
</div>


<!-- 热推 -->
<div class="container">
    <section class="recommend clearfix">
        <p>今日热推<img src="img/hot.png"></p>
        <div class="phone_item item_pf">
            <ul id="phone_header" class="clearfix">
                <li class="active">手机</li>
                <li>智能配件</li>
            </ul>
            <div class="phone_content_big clearfix" id="phone_content_big">
                <div class="phone_content">
                    <div class="box"><img src="img/xiaomi.jpg" title="点击图片查看更多详情">
                        <p>小米MIX 2</p>
                        <p><span>¥4699</span></p>
                        <div class="text"><p>

                            图说馆 小米MIX 2全面屏蕴含超多黑科技</p></div>
                    </div>

                    <div class="box"><img src="img/iphonex.jpg" title="点击图片查看更多详情">
                        <p>iPhone X</p>
                        <p><span>¥8388</span></p>
                        <div class="text"><p>

                            iphone 8与iPhone X哪个更加值得入手</p></div>
                    </div>

                    <div class="box"><img src="img/yijia.jpg" title="点击图片查看更多详情">
                        <p>一加手机5</p>
                        <p><span>¥3499</span></p>
                        <div class="text"><p>

                            一加5首发评测:一台性能怪兽</p></div>
                    </div>

                    <div class="box"><img src="img/x9s.jpg" title="点击图片查看更多详情">
                        <p>Vivo X9s</p>
                        <p><span>¥2698</span></p>
                        <div class="text"><p>

                            Vivo X9s柔光自拍实测:用它自拍真爽!</p></div>
                    </div>

                    <div class="box"><img src="img/note6.jpg" title="点击图片查看更多详情">
                        <p>魅蓝 Note6</p>
                        <p><span>¥1099</span></p>
                        <div class="text"><p>

                            魅蓝评测:这真的是一台千元机?</p></div>
                    </div>

                    <div class="box"><img src="img/z17.jpg" title="点击图片查看更多详情">
                        <p>努比亚 Z17畅享版</p>
                        <p><span>¥2499</span></p>
                        <div class="text"><p>

                            无边框美学 努比亚,向您呈现不一样的美</p></div>
                    </div>


                </div>

                <div class="phone_content">
                    <div class="box"><img src="img/mms.jpg" title="点击图片查看更多详情">
                        <p>摩米士 WAVE耳机</p>
                        <p><span>¥469</span></p>
                        <div class="text"><p>

                            摩米士 WAVE耳机 运动音乐两不误</p></div>
                    </div>

                    <div class="box"><img src="img/mj.jpg" title="点击图片查看更多详情">
                        <p>米家电水壶</p>
                        <p><span>¥259</span></p>
                        <div class="text"><p>

                            米家电水壶 上得了厅堂,下得了厨房</p></div>
                    </div>

                    <div class="box"><img src="img/watch.jpg" title="点击图片查看更多详情">
                        <p>HUAWEI WATCH2第二代智能运动手表</p>
                        <p><span>¥899</span></p>
                        <div class="text"><p>

                            HUAWEI WATCH2 让你时刻掌控你的运动信息</p></div>
                    </div>

                    <div class="box"><img src="img/ep.jpg" title="点击图片查看更多详情">
                        <p>魅蓝 EP52</p>
                        <p><span>¥259</span></p>
                        <div class="text"><p>

                            魅蓝 EP52评测 让你体验酣畅淋漓的快感</p></div>
                    </div>

                    <div class="box"><img src="img/tichome.jpg" title="点击图片查看更多详情">
                        <p>Tichome</p>
                        <p><span>¥1200</span></p>
                        <div class="text"><p>

                            Tichome体验 出门问Tichome,颜值即正义</p></div>
                    </div>

                    <div class="box"><img src="img/ba1.jpg" title="点击图片查看更多详情">
                        <p>BeoPlay A1蓝牙便携音箱</p>
                        <p><span>¥399</span></p>
                        <div class="text"><p>

                            BeoPlay A1蓝牙便携音箱 设计做工都是苹果标准</p></div>
                    </div>


                </div>
            </div>


        </div>

    </section>
</div>
<!-- 热推end -->


<div class="container">

    <div class="c clearfix">
        <div class="hot">
            <h2>今日热点<span id="ajaxbtn" style="font-size:1.3rem;float:right;cursor:pointer;color:red">换一批</span></h2>


        </div>
        <div class="test">
            <h2>手机评测</h2>
            <div id="owl-demo2" class="owl-carousel owl-theme">
                <div class="item2"><a href="#"><img src="img/iphonex.jpg"></a></div>
                <div class="item2"><a href="#"><img src="img/magic.jpg"></a></div>
                <div class="item2"><a href="#"><img src="img/nova.jpg"></a></div>
                <div class="item2"><a href="#"><img src="img/p9.jpg"></a></div>
                <div class="item2"><a href="#"><img src="img/note6.jpg"></a></div>
                <div class="item2"><a href="#"><img src="img/phone1.jpg"></a></div>

            </div>
            <ul>
                <li><a href="#">魅蓝6评测:百元也能实现高颜值自拍美</a></li>
                <li><a href="#">Moto Z2 Play评测:坚持模块化/性能提升明显</a></li>
                <li><a href="#">和iphone X一样能刷脸 国美GOME S1评测</a></li>
                <li><a href="#">SOAP R11评测:千元全面屏普及者降临</a></li>

            </ul>
        </div>


        <div class="zhematic">
            <h2>手机专题<span><a href="#">更多</a></span></h2>
            <a href="#"><img src="img/zhuan1.jpeg">
                <div class="text">iPhone7/7 Plus发布:抢购欲望稍减</div>
            </a>
            <ul>
                <li><a href="#">近半数网友很期待iPhone7配3GB运存</a></li>
                <li><a href="#">格力做世界最好手机?网友:扯</a></li>
                <li><a href="#">那些年我们追过的APP</a></li>
                <li><a href="#">易拆易修:教你换屏幕</a></li>

            </ul>
        </div>


        <div class="answer">
            <h2>一问易答<span><a href="#">更多</a></span></h2>
            <div class="content">
                <ul>
                    <li><a href="#" class="clearfix">
                        <div class="content_img"><img src="img/a_1.jpeg"></div>
                        <div class="content_text">一问易答:为什么乔布斯说安卓是偷来的产品<br/>
                            <span class="span_one">1254</span><span class="span_two">2017-10-2</span>
                        </div>

                    </a>

                    </li>

                    <li><a href="#" class="clearfix">
                        <div class="content_img"><img src="img/a_2.jpeg"></div>
                        <div class="content_text">一问易答:一大波伪基站背包客来骗钱了 如何防<br/>
                            <span class="span_one">1254</span><span class="span_two">2017-10-2</span>
                        </div>
                    </a></li>

                    <li><a href="#" class="clearfix">
                        <div class="content_img"><img src="img/a_4.png"></div>
                        <div class="content_text">一问易答:没有智能机的时代 人们是如何生活的<br/>
                            <span class="span_one">1254</span><span class="span_two">2017-10-2</span>
                        </div>
                    </a></li>

                    <li><a href="#" class="clearfix">
                        <div class="content_img"><img src="img/a_3.png"></div>
                        <div class="content_text">一问易答:充电时如何避免充电器过热<br/>
                            <span class="span_one">1254</span><span class="span_two">2017-10-2</span>
                        </div>
                    </a></li>

                </ul>

            </div>
        </div>



    </div>

    <!-- 大box -->
</div>

<div class="container">
    <div class="phone_img_item">
        <div class="item_content clearfix">
            <div class="bigimg">
                <a href="#"><img src="img/meitu_1.jpg"> </a>
            </div>
            <div class="smallimg">
                <div class="img1">
                    <a href="#"><img src="img/meitu_2.jpg"> </a>
                </div>
                <div class="img2"> <a href="#"><img src="img/meitu_3.jpg"> </a></div>
                <div class="img3"> <a href="#"><img src="img/meitu_4.jpg"> </a></div>
                <div class="img4"> <a href="#"><img src="img/meitu_5.jpg"> </a></div>
            </div>
        </div>
    </div>
</div>
<!-- 大box -->
<!-- 美图 -->
<!--  <section class="phone_pic">

  <div class="content">
  <p>手机美图</p>
   <ul>
       <li><a href="#"><img src="img/phone_pic1.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic7.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic7.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic2.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic1.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic2.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic1.jpg"></a></li>
       <li><a href="#"><img src="img/phone_pic7.jpg"></a></li>
   </ul>

      </div>
 </section> -->

<div class="link clearfix">
    <div class="content clearfix">
        <p>友情链接</p>
        <ul class="clearfix">
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
        </ul>
        <ul>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
        </ul>
        <ul>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
            <li><a href="#">今日资讯网</a></li>
        </ul>
    </div>
</div>

<footer>
    <div class="content">关于值得买|联系我们|广告服务|站点地图|人才招聘|手机中国记事|友情链接|家长监护工程|举报不良信息</div>

    <p>京ICP证-000000号 京ICP备00000000号 2022</p>
</footer>

<script type="text/javascript" src='js/template-native.js'></script>

<script type="text/template" id='template'>
    <h2>今日热点<span id="ajaxbtn" style="font-size:1.3rem;float:right;cursor:pointer;color:red">换一批</span></h2>
    <%for(var i=0;i
    <items.length;i++){%>
    <div class="item clearfix">
        <i class="img-area"><img src="img/<%=items[i].img%>"></i>
        <dl class="txt-area">
            <dt><a href="<%=items[i].href%>"><%=items[i].dt%></a></dt>
            <dd><p class="des"><%=items[i].dd%></p>
                <p class="info"><i class="time"><%=items[i].time%></i></p>
            </dd>

        </dl>
    </div>
    <%}%>

</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/owl.carousel.2.1.0/owl.carousel.min.js"></script>
<script src="js/vendor/picturefill.min.js"></script>
<script src="js/main.js"></script>
<script src="js/style.js"></script>
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript">
    var btn = document.getElementById("ajaxbtn");

    btn.onclick = function () {
        ajax({
            url: "getphp.php",
            data: undefined,
            method: "get",
            success: function (data) {
                var jsArr = JSON.parse(data);
                var obj = {
                    items: jsArr
                };
                var resultStr = template('template', obj);
                console.log(resultStr);
                document.querySelector(".hot").innerHTML = resultStr;
            }
        })
    };


    function ajax(option) {
        // 异步对象
        var ajax = new XMLHttpRequest();

        // get 跟post  需要分别写不同的代码
        if (option.method == 'get') {
            // get请求
            if (option.data) {
                // 如果有值
                option.url += '?';
                option.url += option.data;
            } else {

            }
            // 设置 方法 以及 option.url
            ajax.open(option.method, option.url);

            // send即可
            ajax.send();
        } else {
            // post请求
            // post请求 option.url 是不需要改变
            ajax.open(option.method, option.url);

            // 需要设置请求报文
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // 判断option.data send发送数据
            if (option.data) {
                // 如果有值 从send发送
                ajax.send(option.data);
            } else {
                // 木有值 直接发送即可
                ajax.send();
            }
        }

        // 注册事件
        ajax.onreadystatechange = function () {
            // 在事件中 获取数据 并修改界面显示
            if (ajax.readyState == 4 && ajax.status == 200) {
                // console.log(ajax.responseText);

                // 将 数据 让 外面可以使用
                // return ajax.responseText;

                // 当 onreadystatechange 调用时 说明 数据回来了
                // ajax.responseText;

                // 如果说 外面可以传入一个 function 作为参数 success
                option.success(ajax.responseText);
            }
        }

    }
</script>
</body>
</html>

 全部网页截图8个文章资讯页面

 

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT--精英联盟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值