时间：2023-09-03 06:30:02 | 来源：网站运营
时间：2023-09-03 06:30:02 来源：网站运营
HTML期末学生大作业-新闻网页作业html+css：精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】 HTML+CSS+JS实例代码： 【 ️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中...】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!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.0"> <title>新闻</title> <link rel="stylesheet" href="css/style.css"></head><body> <div id="banner"> <img src="picture/banner.png" alt=""> </div> <div id="nav"> <h1>新闻资讯</h1> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">赛事</a> </li> <li> <a href="#">公益</a> </li> <li> <a href="#">军事</a> </li> <li> <a href="#">体育</a> </li> <li> <a href="#">登录</a> </li> </ul> </div> <div id="main"> <div id="main"> <div id="left"> <div id="ppt"> <h2>要闻 <span>更多→</span> </h2> <ul> <li> <a href="">他们为何“时时放心不下”？</a> </li> <li> <a href="">她们是妈妈，也不仅仅是“妈妈”</a> </li> <li> <a href="">高票当选！李家超誓言带领香港开新篇...</a> </li> <li> <a href="">坚持全国一盘棋，确保交通物流畅通..</a> </li> <li> <a href="">杭州全力做好企业复工复产复市金融支持</a> </li> <li> <a href="">守牢“外防输入”防线，确保供应链畅通</a> </li> <li> <a href="">被这些排队核酸的小设计暖到了</a> </li> </ul> </div> <div id="spry"> <h2>娱乐<span>更多→</span></h2> <ul> <li> <a href="">韩庚官宣妻子怀孕！卢靖姗孕肚首曝光</a> </li> <li> <a href="">《甄嬛传》记录了多少人的颜值巅峰？</a> </li> <li> <a href="">IP属地公开后，人人都是大侦探？</a> </li> <li> <a href="">《阿凡达2》，全球首部30亿美元＋电影？</a> </li> </ul> </div> </div> <div id="mid"> <div id="news"> <h2>今日话题<span>更多→</span></h2> <ul> <li> <a href="">中国发展有利于世界繁荣</a> <span>2022-02-01</span> </li> <li> <a href="">求是网| 揭开科技强国建设新篇章，还要这样干！</a><span>2022-02-01</span> </li> <li> <a href="">地方国企改革三年行动主体任务完成度超90％</a><span>2022-02-01</span> </li> <li> <a href="">全面落实新选制，实干开创新未来.</a><span>2022-02-01</span> </li> <li> <a href="">打通生育堵点，安居问题不可忽视</a><span>2022-02-01</span> </li> </ul> </div> <div id="laws"> <h2 style="margin-bottom: 30px;">图话<span>更多→</span></h2> <img src="picture/11.webp" alt=""> <ul> <li> <a href="">“零废弃”生活6年...</a> <span>2022-02-01</span> </li> <li> <a href=""> 我在杭州方舱住了14天...</a><span>2022-02-01</span> </li> <li> <a href=""> 普尔恶意伤人？莫...</a><span>2022-02-01</span> </li> <li> <a href=""> 周杰伦都捧不红...</a><span>2022-02-01</span> </li> </ul> </div> </div> <div id="article"> <h2 style="margin-bottom: 25px">为你推荐<span>更多→</span></h2> <ul> <li> <img src="picture/11.png" alt=""> <div> <p>石景山一对新人取消原定今日举办的婚宴，穿着婚服排队做核酸...</p> </div> </li> <li> <img src="picture/22.png" alt=""> <div> <p>原油供给“困境”：巨头们赚翻了也不增产，美国页岩油厂商...</p> </div> </li> <li> <img src="picture/33.png" alt=""> <div> <p>论兵·日本“军事触角”不断延伸 背后有何企图？...</p> </div> </li> <li> <img src="picture/44.png" alt=""> <div> <p>蓝翔校长前妻再举报，十年恩怨为何难解？...</p> </div> </li> <li> <img src="picture/55.png" alt=""> <div> <p>辉瑞败诉被迫公开新冠疫苗相关文件，不良反应长达9页？真相并...</p> </div> </li> <li> <img src="picture/66.png" alt=""> <div> <p>NBA十佳球：字母哥四球上榜塔图姆硬刚希腊怪兽...</p> </div> </li> </ul> </div> </div> </div> <footer> <p> 版权所有©*** </p> </footer></body></html>* { margin: 0px; padding: 0px; list-style: none;}#banner { width: 1000px; margin: 0 auto; font-size: 0px;}#banner img { width: 1000px;}#nav { position: relative; width: 1000px; height: 70px; line-height: 70px; margin: 0 auto; background-color: #1479D7; color: #fff;}#nav h1 { display: inline-block; margin-left: 20px;}#nav ul { position: absolute; right: 0px; top: 0px; display: flex;}#nav ul li { width: 130px; text-align: center;}#nav ul li a { text-decoration: none; color: #ffff;}#nav ul li a:hover { background-color: #CBE1ED; color: rgb(6, 0, 0);}#main { width: 1000px; font-size: 0px; background-color: #fff; margin: 0 auto; padding-top: 30px;}h2 { position: relative; font-size: 18px; box-sizing: border-box; padding-left: 10px; height: 30px; line-height: 30px; color: #1479D7; border-bottom: 1px solid #1479D7;}h2 span { position: absolute; right: 10px; font-size: 12px;}h2 span:hover { color: #062b4f;}#left { width: 245px; display: inline-block; box-sizing: border-box; padding-right: 5px; float: left;}#left ul li { font-size: 12px; line-height: 25px;}#left ul { margin-top: 20px; margin-bottom: 20px;}#left ul li a { color: rgb(9, 9, 9); text-decoration: none; margin-left: 10px;}#left ul li a:hover { color: #1479D7;}#mid { width: 490px; display: inline-block; padding-left: 5px; padding-right: 5px; height: 500px;}#article { width: 250px; display: inline-block;}#mid { position: relative; font-size: 12px; line-height: 25px; border-left: 1px dotted #ccc; border-right: 1px dotted #ccc; margin-bottom: 30px;}#mid ul { margin-top: 20px; margin-bottom: 20px;}#mid ul li a { color: rgb(9, 9, 9); text-decoration: none; margin-left: 10px;}#mid ul li a:hover { color: #1479D7;}#news ul li { position: relative; left: 0px;}#news ul li span { position: absolute; right: 0px; color: #b3b3b3;}#laws { position: relative;}#laws {}#laws ul { margin-top: 20px; margin-bottom: 20px; margin-left: 210px;}#laws ul li a { color: rgb(9, 9, 9); text-decoration: none; margin-left: 10px;}#laws ul li a:hover { color: #1479D7;}#laws ul li { position: relative; left: 0px;}#laws ul li span { position: absolute; right: 0px; color: #b3b3b3;}#laws img { width: 210px; position: absolute;}#jieshao { position: relative; width: 490px;}#jieshao p { text-indent: 24px; width: 300px;}#jieshao img { position: absolute; width: 150px; top: 10px; right: 15px;}#article { float: right; font-size: 12px;}#article ul li { display: flex; padding-top: 5px; padding-bottom: 5px;}#article ul li img { width: 180px !important; height: 60px; margin-left: 5px; margin-right: 20px;}#article ul li div p { font-size: 12px; line-height: 20px; color: rgb(129, 129, 129);}footer { width: 1000px; margin: 0 auto; text-align: center; height: 60px; line-height: 60px; color: rgb(78, 50, 50); font-size: 12px; border-top: 1px solid #ccc;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：作业,新闻,学生
