使用新闻资讯前端静态页面资源-CSDN文库

共87个文件

png：37个

jpg：22个

html：12个

需积分: 50 3 浏览量 2017-12-09 11:13:03 上传评论收藏 7.65MB RAR 举报

新闻资讯前端静态页面是互联网应用中常见的类型，主要用于展示新闻、文章等内容，为用户提供便捷的信息获取途径。在本项目中，我们拥有一个包含12个HTML页面的静态页面集合，涵盖了首页、新闻列表页和新闻内容页等核心功能。下面将详细讲解这些页面及其背后涉及的HTML知识。 1. **首页（Home Page）** 首页通常是用户访问网站时看到的第一个页面，它需要吸引用户的注意力并提供清晰的导航。在HTML中，首页设计通常包括头部（header）、主体（main）、侧边栏（sidebar）和底部（footer）等部分。头部常包含logo、导航菜单和搜索框，主体部分可能展示最新或热门的新闻条目，侧边栏则可以展示广告、推荐内容或者分类链接，底部则放置版权信息和联系方式。 2. **新闻列表页（News List Page）** 新闻列表页用于展示多条新闻的概览，通常包含每条新闻的标题、摘要、发布时间以及图片。HTML中，这些元素可以通过`<article>`标签组织，而`<h2>`或`<h3>`标签用于新闻标题，`<p>`标签用于摘要，`<time>`标签表示时间，`<img>`标签则插入图片。同时，列表布局可能使用`<ul>`或`<ol>`标签，每个新闻条目作为`<li>`元素。 3. **新闻内容页（News Detail Page）** 新闻内容页提供了单篇新闻的完整信息，包括标题、正文、作者、发布日期、评论区等。标题通常使用`<h1>`标签，正文可能包含段落（`<p>`）、引用（`<blockquote>`）、图片（`<img>`）、视频（`<video>`）、链接（`<a>`）等元素。评论区可使用`<form>`表单来收集用户反馈，`<textarea>`用于输入评论，`<button>`提交按钮，`<div>`或`<section>`组织不同部分。 4. **HTML基础知识** - **结构标签**：HTML5引入了语义化标签如`<header>`、`<nav>`、`<article>`、`<aside>`、`<footer>`，它们帮助提高网页的可读性和搜索引擎优化。 - **样式控制**：虽然这里提到的是纯HTML页面，但通常CSS会与HTML结合使用来控制页面样式，如颜色、字体、布局等。 - **响应式设计**：现代网页需要适应不同的设备屏幕，如手机、平板和桌面电脑。通过媒体查询（`@media`）和流式布局（flexbox或grid），可以使页面在不同尺寸下都能良好展示。 - **链接与交互**：`<a>`标签实现页面间的跳转，`<button>`配合JavaScript可以增加交互性，如加载更多、点赞、分享等功能。 - **表单处理**：`<form>`元素用于收集用户数据，配合`<input>`、`<select>`等标签可以创建各种表单控件，`<label>`提供更好的可用性。 5. **优化与性能** - **懒加载**：对于新闻列表页中的图片，可以使用懒加载技术，只在用户滚动到相应位置时才加载图片，减少首屏加载时间。 - **代码压缩**：为了提高页面加载速度，HTML、CSS和JavaScript代码应进行压缩，移除不必要的空格和注释。 - **缓存利用**：通过设置HTTP缓存头，可以让浏览器缓存静态资源，减少网络请求。以上就是关于新闻资讯前端静态页面的基本知识和设计要点，实际开发中，开发者还需要关注SEO优化、无障碍访问（accessibility）、浏览器兼容性等问题，确保页面在各种环境下都能正常工作。

资源推荐

资源详情

资源评论

收起资源包目录

使用新闻资讯前端静态页面.rar （87个子文件）

使用新闻资讯前端静态页面

css

animate.min.css 54KB

amazeui.min.css 250KB

wap.css 31KB

videocontent.html 27KB

dontai.html 14KB

activecontent.html 17KB

img

qq3.png 86KB

n1.png 261KB

w2.jpg 53KB

qqq1.jpg 125KB

a2.png 16KB

fl01.png 384KB

qq2.png 67KB

w4.jpg 67KB

c1.png 178KB

w5.jpg 73KB

a3.png 18KB

c.png 52KB

footdon.png 43KB

qq5.png 58KB

wikibg.png 24KB

q1.png 142KB

qq8.png 63KB

a2.jpg 301KB

qq7.png 72KB

qq1.jpg 60KB

c2.png 162KB

w6.jpg 40KB

qq3.jpg 56KB

q4.jpg 55KB

fl03.png 512KB

fl02.png 478KB

q3.jpg 68KB

qq9.png 18KB

c8.png 36KB

c7.png 147KB

c6.png 85KB

c5.png 172KB

qq4.png 67KB

gg1g.png 415KB

q2.jpg 36KB

w1.jpg 62KB

aa2.jpg 36KB

ggg.png 11KB

ggg - 副本.png 415KB

q4.png 137KB

qq1.png 55KB

w3.jpg 63KB

z1.jpg 195KB

a3.jpg 627KB

qq2.jpg 61KB

a1.png 19KB

s1.jpg 521KB

qq6.png 50KB

aa1.jpg 44KB

c3.png 64KB

c4.png 102KB

q5.jpg 50KB

goTop.png 903B

flshadow.png 3KB

q1.jpg 94KB

a6.png 16KB

aa3.jpg 86KB

a5.png 19KB

a4.png 20KB

brandlist.html 12KB

activelist.html 9KB

fonts

iconfont.eot 30KB

fontawesome-webfont.eot 59KB

fontawesome-webfont.woff 70KB

iconfont.ttf 30KB

FontAwesome.otf 92KB

iconfont.svg 48KB

iconfont.woff 20KB

fontawesome-webfont.svg 306KB

fontawesome-webfont.woff2 55KB

fontawesome-webfont.ttf 119KB

content.html 28KB

member.html 11KB

index.html 17KB

jquery.min.js 82KB

amazeui.lazyload.min.js 3KB

amazeui.min.js 206KB

columnconten.html 8KB

videolist.html 8KB

contentlist.html 16KB

sixincon.html 7KB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/amazeui.min.css"> <link rel="stylesheet" href="css/wap.css"> <title>内容页</title> </head> <body style="background:#ececec"> <div class="pet_mian"> <div class="pet_head"> <header data-am-widget="header" class="am-header am-header-default pet_head_block"> <div class="am-header-left am-header-nav "> <a href="#left-link" class="iconfont pet_head_jt_ico"></a> </div> <h1 class="am-header-title pet_article_user"> <div class="pet_article_user_info_tab"> <div class="pet_article_user_info_tab_font"> <div class="pet_article_user_info_tab_font_triangle"></div> <div class="pet_article_user_info_tab_font_center"><i>文章</i><span>16篇</span></div>  </div> </div> <span class="pet_article_user_ico"><img src="img/a1.png" alt="" class=""></span> <span class="pet_article_user_name">EGOIST</span> </h1> <div class="am-header-right am-header-nav"> <a href="javascript:;" class="iconfont pet_head_gd_ico"></a> </div> </header> </div> <div class="pet_more_list"> <div class="pet_more_list_block"> <div class="iconfont pet_more_close">×</div> <div class="pet_more_list_block"> <div class="pet_more_list_block_name"> <div class="pet_more_list_block_name_title">阅读 Read</div> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">新鲜事</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">涨知识</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">看涂鸦</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">萌专题</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_bk pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">百科</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_wd pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">问答</div> </a> <div class="pet_more_list_block_name_title pet_more_list_block_line_height">服务 Service</div> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">美容</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">医院</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_kantuya pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">店铺</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_sy pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">摄影</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_xx pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">学校</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_sz pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">水族</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_ms pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">猫舍</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_qs pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">犬舍</div> </a> <a class="pet_more_list_block_line"> <i class="iconfont pet_nav_qt pet_more_list_block_line_ico"></i> <div class="pet_more_list_block_line_font">其它</div> </a> </div> </div> </div> </div> <div class="pet_content"> <div class="pet_content_block"> <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: true }"> <h1 class="pet_article_title">你认识萌萌的小熊猫吗？</h1> <div class="pet_article_user_time">发表于：2015-09-25</div> <img src="img/a2.jpg"> <p class=paragraph-default-p>南极洲又称 <a href="###">第七大陆</a>，是地球上最后一个被发现、唯一没有土著人居住的大陆。</p> <p>南极大陆为通常所说的南大洋（太平洋、印度洋和大西洋的南部水域）所包围，它与南美洲最近的距离为965公里，距新西兰2000公里、距澳大利亚2500公里、距南非3800公里、距中国北京的距离约有12000公里。南极大陆的总面积为1390万平方公里，相当于中国和印巴次大陆面积的总和，居世界各洲第五位。</p> <p> <blockquote> <p>有一天我们也要去南极走走！！</p> </blockquote> </p><img src="img/a3.jpg" /> <p>整个南极大陆被一个巨大的冰盖所覆盖，平均海拔为2350米。南极洲是由冈瓦纳大陆分离解体而成，是世界上最高的大陆。南极横断山脉将南极大陆分成东西两部分。这两部分在地理和地质上差别很大。</p><img src="img/a2.jpg" /> <p>东南极洲是一块很古老的大陆，据科学家推算,已有几亿年的历史。它的中心位于难接近点，从任何海边到难接近点的距离都很远。东南极洲平均海拔高度2500米，最大高度4800 米。在东南极洲有南极大陆最大的活火山，即位于罗斯岛上的埃里伯斯火山，海拔高度3795米，有四个喷火口</p> </article> <ul class="like_share_block"> <li> <a class="link_share_button" href="###"><i class="iconfont share_ico_link"></i>1460</a> </li> <li> <a class="link_share_button" href="###"><i class="iconfont share_ico_wx"></i>微信</a> </li> <li> <a class="link_share_button" href="###"><i class="iconfont share_ico_pyq"></i>朋友圈</a> </li> </ul> </div> <div class="pet_comment_list"> <div class="pet_comment_list_wap"> <div class="pet_comment_list_title">精彩评论</div> <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab"> <ul class="am-tabs-nav am-cf pet_comment_list_title_tab"> <li class="am-active"> <a href="[data-tab-panel-0]">人气</a> </li> <li class=""> <a

评论收藏

内容反馈