更多静态模板，小米官网，原神官网，各种可视化大屏请前往https://lilisen.cn/了解
个人新闻网站，一个页面，五个部分
新闻网html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
</head>
<link rel="stylesheet" href="../css/css.css">
<link rel="stylesheet" href="../css/iconfont.css">
<script type="text/javascript" src="../js/tools.js"></script>
<script type="text/javascript" src="../js/lbt.js"></script>
<body>
<div class="bigtitle" class="navbar-brand" id="logo">新闻网</div>
<div class="daohanlan">
<ul class="nvlist">
<li>
<div>
<span class="menuSpan">新闻首页</span>
<div class="shouye">
<div id="outer">
<ul id="imglist">
<li ><img src="../img/sy1.jpg" alt="" id="zpimg"></li>
<li ><img src="../img/sy2.jpg" alt="" id="zpimg"></li>
<li ><img src="../img/sy3.jpg" alt="" id="zpimg"></li>
<li ><img src="../img/sy4.jpg" alt="" id="zpimg"></li>
<li ><img src="../img/sy1.jpg" alt="" id="zpimg"></li>
</ul>
<div id="navdiv">
<a href="javascript:;" id="zpqlj"></a>
<a href="javascript:;" id="zpqlj"></a>
<a href="javascript:;" id="zpqlj"></a>
<a href="javascript:;" id="zpqlj"></a>
</div>
</div>
<div class="sycon">
<div class="sycon1">
<p><h1><a href="https://www.chinanews.com.cn/gn/2022/12-20/9918038.shtml" class="zw" data-did="9918038" data-doctype="zw" target="_blank">青年学者：全球发展倡议为世界发展提供中国方案</a></h1></p>
<p><a href="https://www.chinanews.com.cn/gn/2022/12-19/9917698.shtml" class="zw" data-did="9917698" data-doctype="zw" target="_blank">构建数据基础制度体系 “数据二十条”来了</a></p>
<p><a href="https://www.chinanews.com.cn/gj/2022/12-19/9917726.shtml" class="zw" data-did="9917726" data-doctype="zw" target="_blank">“昆明-蒙特利尔全球生物多样性框架”通过</a></p>
<p><a href="https://www.chinanews.com.cn/sh/2022/12-20/9917786.shtml" class="zw" data-did="9917786" data-doctype="zw" target="_blank">严管身边人！这里给“一把手”家属上廉洁课</a></p>
</div>
<div class="sycon2">
<p><h1><a href="https://www.chinanews.com.cn/sh/2022/12-20/9918067.shtml" class="zw" data-did="9918067" data-doctype="zw" target="_blank">如何区分“复阳”和“二次感染”？</a></h1></p>
<p><a href="https://www.chinanews.com.cn/sh/2022/12-20/9917848.shtml" class="zw" data-did="9917848" data-doctype="zw" target="_blank">上千元的新冠印度仿制药卖断货？小心！别被骗了</a></p>
<p><a href="https://www.chinanews.com.cn/cj/2022/12-20/9917969.shtml" class="zw" data-did="9917969" data-doctype="zw" target="_blank">国家邮政局：将药品等防疫物资投递作为当前要事来抓</a></p>
<p><a href="https://www.chinanews.com.cn/cj/2022/12-20/9918019.shtml" class="zw" data-did="9918019" data-doctype="zw" target="_blank">金沙江白鹤滩水电站全部机组投产发电</a></p>
</div>
<div class="sycon3">
<p><h1><a href="https://www.chinanews.com.cn/gn/2022/12-20/9917944.shtml" class="zw" data-did="9917944" data-doctype="zw" target="_blank">中俄将举行“海上联合-2022”联合军事演习</a></h1></p>
<p><a href="https://www.chinanews.com.cn/gj/2022/12-20/9917980.shtml" class="zw" data-did="9917980" data-doctype="zw" target="_blank">五角大楼收到“数百份”UFO报告 能否证明存在外星生命</a></p>
<p><a href="https://www.chinanews.com.cn/shipin/spfts/20221219/4550.shtml" class="ptv" data-did="4550" data-doctype="splive" target="_blank">走进广西国际壮医医院 带您近距离了解壮医</a></p>
<p><a href="https://www.chinanews.com.cn/sh/2022/12-20/9917948.shtml" class="zw" data-did="9917948" data-doctype="zw" target="_blank">【寻味中华】广东煲仔饭：米粒上的美味诱惑</a></p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsed">
<span class="menuSpan">国际新闻</span>
<div class="gjxw">
<div class="tyimg"><img src="../img/gj1.jfif" alt="">
<div class="img_tit"><h3><a href="https://www.163.com/news/article/HMEJ29S100018AOR.html">德新版对华战略草案曝光，中国学者：最终版本将是德国内各方博弈结果</a></h3></div>
</div>
<div class="tytt">
<ul class="tytt_ul">
<li class="tytt_frist"><h2><a href="https://www.163.com/news/article/HOUBJKUE00018AOR.html">俄考虑限制“赚大钱”外国粮商，建议让外企只参与20%粮食出口</a></h2></li>
<li><h3><a href="https://www.163.com/news/article/HMDIIEKP00018AOQ.html">分析APEC多边舞台上的重磅双边外交：中日首脑时隔近三年首次面对面会谈</a></h3></li>
<li><h3><a href="https://www.163.com/news/article/HLOSDDM200018AOQ.html">深度 印度外长访问莫斯科，顶住西方压力称要继续“买俄油”</a></h3></li>
<li><h3><a href="https://www.163.com/news/article/HJDTCLTL00018AOQ.html">上任仅14个月，为何马来西亚总理宣布解散国会？</a></h3></li>
<li><h3><a href="https://www.163.com/news/article/HH3HS6TO00018AOQ.html">深度 联大明天开幕，疫情以来首次重返线下，将有哪些看点？</a></h3></li>
<li><h3><a href="https://www.163.com/news/article/HF5U928G00018AP1.html">美媒：美国务院劝国会，将俄罗斯列为支恐国家会导致“严重问题”</a></h3></li>
</ul>
</div>
<div class="wrap">
<div class="content">
<ul>
<li>
<div class="left"><img src="../img/gj2.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HOIVPRLM00018AP2.html">深度 科索沃新一轮抗议不消停，俄乌冲突后又一个“火药桶”会爆吗？</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>科索沃|俄乌冲突|火药桶|5天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj3.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HOG9KRS500018AOR.html">时隔2年，真有超级抗体么？科学家们一直在寻找答案</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>抗体|科学家们|病毒|6天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj4.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HOFU9SLH00018AP2.html">打破多年惯例，普京取消年度记者会，背后有啥原因</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>普京|记者会|佩斯科夫|6天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj5.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HOBB4CH700018AP2.html">深度 拜登操办第二届美非峰会，想补齐对非外交这块拼图</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>拜登|美非|3天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj6.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HO9MNDND00018AOQ.html">打破美元霸权，中东打响“石油人民币”第一枪，多国为何加速“去美元化”？</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>石油|去美元化|18天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj7.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HNJAE21T00018AP2.html">“美国只剩委内瑞拉这张牌了”</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>委内瑞拉|美国|马杜罗|18天前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/gj8.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/news/article/HN9R1N2E00018AOQ.html">中澳领导人会晤，他们“松了一口气”</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>领导人会晤|中澳|21天前</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsed">
<span class="menuSpan">娱乐新闻</span>
<div class="ylxw">
<div class="tyimg"><img src="../img/yl1.png" alt="" width="700px">
<div class="img_tit">
<h3>
<a href="https://ent.163.com/photoview/00AJ0003/685571.html#p=HP14CU4H00AJ0003NOS">Rose穿大衣戴针织帽游丹麦 染金发气质清冷
</a></h3>
</div>
</div>
<div class="tytt">
<ul class="tytt_ul">
<li class="tytt_frist"><h2><a href="https://www.163.com/dy/article/HOV6B7RJ0552LM9P.html">许凯曝恋情,网友称有迹可循!于正:一线男演员也是人</a></h2></li>
<li><h3><a href="https://www.163.com/dy/article/HOV330IR05521MK6.html">2022娱乐圈大瓜回顾:夫妻互撕,出轨家暴,个个毁三观</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HOUN899P0549B9YO.html">梅西妈妈找到儿子揽入怀中,安妞举动乔治娜学不来</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HOV5Q3D70512B07B.html">＂阿凡达2＂首周末战绩出炉,预期票房从30亿垮到10亿</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HOUBJF010541A1O8.html">马斯克亮相卡塔尔,和王子们看决赛,还有伊万卡丈夫</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HOVDBACJ0517AET9.html">黄磊老婆孙莉疑高龄怀四胎!肚大如球孕味十足</a></h3></li>
</ul>
</div>
<div class="wrap">
<div class="content">
<ul>
<li>
<div class="left"><img src="../img/yl2.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/ent/article/HP1A8UL900038FO9.html">陈妍希为儿子庆祝6岁生日 小星星正脸照软萌可爱</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl3.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/ent/article/HP1CROI600038FO9.html">谢娜卡点发文为张杰庆生 甜蜜表白"外南街1982杰"</a></h3> </div>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl4.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/ent/article/HP191OOE00038FO9.html">德普艾梅柏官司和解 德普方获赔100万美金将捐慈善</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl5.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/ent/article/HP18U71H00038FO9.html">电影版"想见你"定档12.24 柯佳嬿许光汉施柏宇回归</a></h3> </div>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl6.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HOV9HPRI0517U7JO.html">61岁刘德华素颜出镜头发花白,无实物表演哭戏逼真</a></h3> </div>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl7.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HOUID66F0517BIU3.html">何超莲回应与窦骁分手:有一起庆生的照片,持续甜蜜</a></h3> </div>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/yl8.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HOUQ1PS90517U7JO.html">贾乃亮确诊新冠,高烧3天症状严重,自称身上像火烧</a></h3> </div>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsed">
<span class="menuSpan">社会新闻</span>
<div class="shxw">
<div class="tyimg"><img src="../img/sh1.jfif" alt="" width="700px" height="400px">
<div class="img_tit">
<h3>
<a href="https://www.163.com/dy/article/HP0V8K6Q0514R9OM.html">广州疫情或明年1月上旬到高峰</a></h3>
</div>
</div>
<div class="tytt">
<ul class="tytt_ul">
<li class="tytt_frist"><h2><a href="https://gd.news.163.com/zhuhai/22/1219/12/HOUTHCUQ04179HV5.html" target="_blank">明天起执行！事关珠海退热药品供应、购买 </a></h2></li>
<li><h3><a href="https://gd.news.163.com/zhuhai/22/0609/09/H9DKJIAV04179HV5.html" target="_blank">【最新公告】珠海机场调整进港旅客最新疫情防控要求</a></h3></li>
<li><h3><a href="https://gd.news.163.com/zhuhai/22/0921/10/HHPJPLPK04179HV5.html" target="_blank">有补贴、有奖励、有资助……事关珠海残疾人就业创业</a></h3></li>
<li><h3><a href="https://gd.news.163.com/zhuhai/22/0711/11/HC08GGBE04179HV5.html" target="_blank">珠海金湾机场荣获2021年度民用机场服务质量评价“航</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HLJ4TM9G0514R9OJ.html" target="_blank">视频来了！直-20首次亮相珠海航展</a></h3></li>
<li><h3><a href="https://www.163.com/dy/article/HLIVL8ND05129QAF.html" target="_blank">珠海航展新鲜组图！“红鹰”飞行表演队进行检验性飞</a></h3></li>
</ul>
</div>
<div class="wrap">
<div class="content">
<ul>
<li>
<div class="left"><img src="../img/sh2.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://gd.news.163.com/foshan/22/1210/14/HO7UM1HJ04179HUN.html" target="_blank">新添“玩食（揾食）”好去处！第四届南海（桂城）国</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh3.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://gd.news.163.com/zhuhai/22/1208/17/HO36M6FJ04179HV5.html" target="_blank">要工作，更要健康！守护职业健康，香洲区卫生健康局</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh4.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://gd.news.163.com/zhuhai/22/1208/15/HO2VE42I04179HV5.html" target="_blank">大咖齐聚，原创首秀！珠海这场时尚盛宴明天开幕 </a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh5.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HNMS2FJK0553WLP6.html" target="_blank">直联明珠高铁站及拱北口岸，朗诗新城珠中同城社区巴</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh6.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HEJLQU9F0514CCTO.html" target="_blank">产业“进度条”再次刷新！珠海各区都在发力！</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh7.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://gd.news.163.com/zhuhai/22/0621/09/HACJV2JI04179HV5.html" target="_blank">新闻早茶｜珠海市多家医院就诊要求有变化！这些防疫</a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/sh8.png" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://gd.news.163.com/zhuhai/22/0610/10/H9GB2VD704179HV5.html" target="_blank">新闻早茶｜多码通扫！“粤核酸”升级 </a></h3> </div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>2小时前</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsed">
<span class="menuSpan">体育赛事</span>
<div class="tyss">
<div class="tyimg"><img src="../img/ty1.jpg" alt="" width="700px" height="450px">
<div class="img_tit">
<h3>
<a href="https://sports.163.com/photoview/SBUO0005/171351.html" target="_blank">终于圆梦！梅西率队捧起大力神杯</a></h3>
</div>
</div>
<div class="tytt">
<ul class="tytt_ul">
<li class="tytt_frist"><h2><a href="https://www.163.com/dy/article/HP0179U80529AQIE.html">回家了！梅西飞机上晒出与大力神杯合影</a></h2></li>
<li><h3><a href="https://sports.163.com/worldcup2022/data/live.html#/report/3718447">世界杯-阿根廷点球4-2总分7-5法国夺冠 梅西圆梦</a></h3></li>
<li><h3><a href="https://www.163.com/sports/article/HP13ASV900059D57.html">举国狂欢!阿根廷政府确认全国放假1天 庆祝夺冠</a></h3></li>
<li><h3><a href="https://www.163.com/sports/article/HOTSRENV00059D57.html">甜蜜一吻！梅西获本届世界杯金球奖 亲吻大力神杯</a></h3></li>
<li><h3><a href="https://www.163.com/sports/article/HOTR0HO100059D57.html">梦圆!35岁的梅西终捧大力神杯 球王之名正式加冕</a></h3></li>
<li><h3><a href="https://www.163.com/sports/article/HOULGRIF00059D57.html">震撼！梅西率阿根廷全队坐大巴巡游狂欢 欢呼声震耳欲聋</a></h3></li>
</ul>
</div>
<div class="wrap">
<div class="content">
<ul>
<li>
<div class="left"><img src="../img/ty2.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP17T1VU0529AQIE.html">2022/23赛季梅西的个人年终总结：世界杯+法超杯，29场24球18助</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|里奥梅西|世界杯|超级杯|1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty3.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP17T3720529AQIE.html">状态出色！富尔茨半场12中7&三分3中2砍16分4板6助 第二节10分</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|魔术|老鹰|总冠军|1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty4.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP17G5MF0529AQIE.html">詹眉威缺阵！湖人先发：沃克、布朗、布莱恩特、贝弗利、施罗德</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|湖人|詹眉威|1小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty5.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP178VF30529AQIE.html">图片报：马拉多纳曾不看好斯卡洛尼，称让其执教阿根廷是疯了</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|卢卡西托|斯卡尼洛|图片报|2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty6.jfif" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/v/video/VKO3DNVCV.html">定格动画看完梅西圆梦之旅：梅球王一击中敌 法国卫冕破碎</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty7.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP178UM40529AQIE.html">崔万军：主力队员有伤病 年轻球员得到较长出场时间且表现不错</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|崔万军|cba|总冠军|2小时前</span>
</div>
</div>
</div>
</li>
<li>
<div class="left"><img src="../img/ty8.jpg" alt=""></div>
<div class="right">
<div class="right_top">
<h3><a href="https://www.163.com/dy/article/HP178U700529AQIE.html">上来就炸！瓦兰丘纳斯开场8中6包揽球队前15分</a></h3>
</div>
<div class="right_bottom">
<div class="right_bottom_left">
<span>其他|雄鹿队|篮球队总冠军|2小时前</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
新闻网css
*{
margin: 0;
padding: 0;
}
body{
background-color:#D3D3D3;
}
a{
text-decoration: none;
color: #404040;
}
a:hover{
color: #F64747;
}
.bigtitle{
font-size: 60px;
letter-spacing: 100px;
position: relative;
left: 100px;
top: 20px;
}
.daohanlan{
list-style: none;
position: absolute;
background-color:transparent;
height: 36px;
width:1500px;
font-family:"楷体";
color: #404040;;
font-size:36px;
top: 120px;
}
.nvlist{
list-style: none;
position: relative;
text-align: center;
line-height: 36px;
}
.nvlist span{
display: block;
margin: 0 65px;
}
.nvlist span:hover{
text-shadow: 1px 1px 5px white;
color: #F64747;
}
.collapsed{
overflow: hidden;
height: 36px;
position: relative;
}
@keyframes xiala {
from{
height: 25px;
}
to{
height: 400px;
}
}
@keyframes xk
{
from {
background-color: rgba(255, 255, 255, 0.582);
box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
}
to {
background-color: transparent;
color:pink;
box-shadow: 2px 2px 15px 2px rgb(245, 128, 225);
}
}
/*首页
*/
.shouye{
width: 95%;
height: 500px;
padding: 40px;
font-size: 12px;
line-height: 25px;
position: absolute;
left: 0;
background-color: white;
}
.sytitle{
position: absolute;
left: 350px;
top: 30px;
font-size: 18px;
}
.sytitle h1{
background: white;
color: #404040;
}
.sycon{
position: absolute;
right: 50px;
top: 100px;
text-align: left;
font-size: 20px;
}
.sycon h1{
font-size: 25px;
}
.sycon1,.sycon2,.sycon3{
margin-top: 10px;
padding-top: 20px;
}
/* 相册列表 */
#outer{
width: 845px;
height: 400px;
overflow: hidden;
margin-top: 15px;
text-align: center;
background-color: green;
padding: 10px 0;
position: absolute;
top: 80px;
left: 65px;
z-index: 999;
animation:xiala 3s 1,xk 3s infinite;
}
#imglist{
list-style: none;
/* 把ul的宽度变大，ul的宽度就是父元素的宽度,装下图片 */
/* width: 900px; */
position: absolute;
left: 0px;
}
#imglist img{
width: 825px;
height: 400px;
}
li{
float: left;
margin: 0 10px;
list-style-type:none
}
#navdiv{
position: absolute;
bottom: 15px;
/*
可以用outer盒子宽度300px减去导航盒子的宽度25*3然后除2
*/
/* 最好left 不要写死，通过js去随时修改，left:112.5px */
/*居中方法
left: 50%;
transform: translateX(-50%);
*/
}
#navdiv a{
display: block;
width: 15px;
height: 15px;
float: left;
background-color: red;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity=50);/* 兼容 */
}
#navdiv a:hover{
text-decoration: none;
}
.gjxw{
width: 95%;
height: 800px;
padding: 40px;
font-size: 12px;
line-height: 25px;
position: absolute;
left: 0;
background-color: white;
}
.shxw{
width: 95%;
height: 800px;
padding: 40px;
font-size: 12px;
line-height: 25px;
position: absolute;
left: 0;
background-color: white;
}
.tyss{
width: 95%;
height: 800px;
padding: 40px;
font-size: 12px;
line-height: 25px;
position: absolute;
left: 0;
background-color: white;
}
.ylxw{
width: 95%;
height: 800px;
padding: 40px;
font-size: 12px;
line-height: 25px;
position: absolute;
left: 0;
background-color: white;
}
.tyimg{
position: absolute;
top: 53px;
left: 150px;
}
.wrap{
width: 500px;
position: absolute;
right: 100px;
}
.content ul li img:hover{
transform: scale(1.2);/*当鼠标移动到图片上时实现放大功能*/
transition: all 1s linear;
}
.tyimg img:hover{
transform: scale(1.1);/*当鼠标移动到图片上时实现放大功能*/
transition: all 1.5s linear;
box-shadow: 5px 5px 0px 0px #bbb9b9;
}
.content ul li img{
display: block;
margin-top: 6px;
margin-left: 6px;
}
.content ul li{
height: 100px;
overflow: hidden;
border-bottom: 1px solid lavender;
background: white;
list-style-type: none;
transition-duration: 0.5s;
margin: 10px 10px 5px 0;
}
.content ul li:hover{
background-color: lavender;
transition-duration: 0.5s;
}
.content .left{
overflow: hidden;/*隐藏溢出图片内容*/
transition-duration: 0.5s;
width: 140px;
height:100px;
/*background: green;*/
float: left;
margin-right:20px;
}
.content .right{
width:500px ;
/*background: pink;*/
}
.right_top{
height:60px;
text-align: left;
font-size: 18px;
}
.right_bottom{
position: relative;
top: -15px;
}
.right_bottom_left{
position:absolute;
top: 20px;
left: 100px;
}
.right_bottom_left span{
color: darkgray;
display: block;
font-size: 12px;
}
.tytt{
width: 800px;
height: 400px;
top: 400px;
left: 100px;
position: absolute;
text-align: left;
}
.tytt_ul{
position: absolute;
top: 150px;
left: 100px;
}
.tytt_ul li{
padding-top: 15px;
}
.tytt_frist{
font-size: 20px;
}
.tytt_ul h3{
font-size: 20px;
}
.shxw .left img{
width: 144px;
height: 88px;
}
/* 国际新闻 */
.gjxw .tytt{
left: 30px;
}
.gjxw h2{
line-height: 30px;
}
.gjxw .img_tit{
position: absolute;
z-index: 999;
font-size: 25px;
bottom: 100px;
}
.gjxw .img_tit a{
color: aliceblue;
opacity: 0.5;
}
/* 娱乐新闻 */
.ylxw .img_tit{
position: absolute;
z-index: 999;
font-size: 25px;
bottom: 40px;
left: 60px;
}
.ylxw .img_tit a{
color: rgb(223, 16, 16);
opacity: 0.8;
}
.ylxw .tytt_ul{
position: absolute;
top: 100px;
left: 60px;
}
/* 社会新闻 */
.shxw .img_tit{
position: absolute;
z-index: 999;
font-size: 30px;
bottom: 40px;
left: 70px;
}
.shxw .img_tit a{
color: rgb(0, 238, 255);
opacity: 0.8;
}
/* 体育赛事 */
.tyss .img_tit{
position: absolute;
z-index: 999;
font-size: 30px;
bottom: 40px;
left: 70px;
}
.tyss .img_tit a{
color: rgb(246, 255, 0);
opacity: 0.8;
}
#logo {
width: 500px;
font-weight: 600;
font-family: "黑体";
color: #8c888b;
background: -webkit-linear-gradient(45deg, #0c04f3, #f3df05, #f72004, #23f603, #3a6bb0);
color: transparent;
/*设置字体颜色透明*/
-webkit-background-clip: text;
/*背景裁剪为文本形式*/
animation: ran 10s linear infinite;
/*动态10s展示*/
}
@keyframes ran {
from {
backgroud-position: 0 0;
}
to {
background-position: 2000px 0;
}
}
新闻网轮播图的js
window.onload=function(){
/* 导航栏 -----------------------------------------*/
var menuSpan=document.querySelectorAll(".menuSpan");
var opendiv=menuSpan[0].parentNode
for(var i=0;i<menuSpan.length;i++){
menuSpan[i].onclick=function(){
var presentDiv=this.parentNode;
toggleClass(presentDiv,"collapsed")
if(opendiv!=presentDiv&&!hasClass(opendiv,"collapsed")){
toggleClass(opendiv,"collapsed")
}
opendiv=presentDiv;
}
}
/* 相册列表 ----------------------------------------*/
//imglist的宽度不能写死，根据图片数量来确定宽度
var imglist=document.getElementById("imglist")
//获取图片数量
var img=document.querySelectorAll("#zpimg")
imglist.style.width=845*img.length+"px"
var outer=document.getElementById("outer")
var navdiv=document.getElementById("navdiv")
//或者navdiv.style.left=(parseInt(getComputedStyle(outer,null).width)-parseInt(getComputedStyle(navdiv,null).width))/2+"px"
navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px"
//设置超链接默认样式
var alla=document.getElementsByTagName("a")
//默认图片索引
var index=0
var timer
//默认选择效果
alla[index].style.backgroundColor="black"
//自动切换
autochange();
/*
点击切换
*/
//为所有a绑定单击响应函数
for(var i=0;i<alla.length;i++){
//为每个超链接添加序号
alla[i].num=i
alla[i].onclick=function(){
//关闭自动切换定时器
clearInterval(timer)
index=this.num
//imglist.style.left=index*-300+"px"
seta();
move(imglist,"left",(-845*index),20,function(){
autochange();
})
}
}
//创建一个方法设置选择的a
function seta(){
if(index>=img.length-1){
index=0
imglist.style.left=0+"px"
}
for(var i=0;i<alla.length;i++){
//遍历全部a，变为红色
/*
这里把颜色设置为空串，是因为要是设置red就会变为内联
内联优先级大于hover，导致hover失效，设置空串就用到style里面的样式
优先级不会改变
*/
alla[i].style.backgroundColor=""
//再把选定的a设置为黑色
alla[index].style.backgroundColor="black";
}
}
//自动切换函数
function autochange(){
//开启定时器
timer=setInterval(function(){
index++
index%=img.length
move(imglist,"left",(-845*index),10,function(){
seta();})
},3000)
}
}新闻网其他js（主要是首页切换与隐藏页面）
function getstyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}else{
return obj.currentStyle[name]
}
}
function move(obj,attr,taget,speed,callback){
clearInterval(obj.timer)
var current=parseInt(getstyle(obj,attr))
if(current>taget){
speed=-speed
}
obj.timer=setInterval(function(){
var old=parseInt(getstyle(obj,attr))
var newv=old+speed
if(speed>0&&newv>taget||newv<taget&&speed<0){
newv=taget
}
obj.style[attr]=newv+"px"
/* //或者写为
box1.style.left= box1.offsetLeft+num+"px"
if((box1.offsetLeft+num)>800){
box1.style.left=800+"px"
}
*/
if(newv==taget){
clearInterval(obj.timer);
callback();
}
},10)
}
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className=obj.className+" "+cn
}
}
/* 判断obj中有没有cn，利用正则 */
function hasClass(obj,cn){
//var reg=/\bb2\b/;
/* \b单词边界 */
/* 需要动态生成正则就用用到构造函数
寻找到cn
*/
var reg=new RegExp("\\b"+cn+"\\b")
return reg.test(obj.className)
}
/* 删除元素指定样式 */
function removeClass(obj,cn){
/* 寻找到cn */
var reg=new RegExp("\\b"+cn+"\\b")
/* 替换成为空串 */
obj.className=obj.className.replace(reg,"")
}
/* toggleClass可以切换一个类
如果元素有就删除
没有就添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn)){
removeClass(obj,cn);
}else{
addClass(obj,cn);
}
//addClass(box,"b2")
//removeClass(box,"b1")
}文件这样放哦
所需图片资源已上传主页资源，不需要积分即可下载
好了，完结撒花
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
