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个文章资讯页面
扫一扫
2624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
