新闻列表 新闻模块无序列表

最新推荐文章于 2022-08-01 17:08:16 发布
VIP文章 最新推荐文章于 2022-08-01 17:08:16 发布
阅读量574 收藏 2
点赞数
分类专栏： 笔记 文章标签： html 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wantedop/article/details/109574376
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <link rel="stylesheet" href="public.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--全部内容-->
<div class="news_l">
    <!--标题-->
    <div class="news_tit">
        <img src="image/2.png" height="26" width="125"/></div>
    <!--标题end-->
    <!--列表内容-->
    <ul class="news_list">
            <li>
                <a href="#" target="_blank">
                    学府悦园公租房项目A、B、C区部分商业用房整体招标结果公告</a>
                    <span>2020-10-29</span>
                <hr width="622px" style
最低0.47元/天 解锁文章
十八-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js无序列表
02-15
使用js实现无序列表，适合每一位初学者的小例子。
web前端开发技术实验与实践（第三版）储久良编著 项目8 设计制度宣传展板
weixin_61726211的博客
03-28 1677
实训二项目8 设计制度宣传展板 一、页面文字素材： 大型仪器必须有专人保管，须配有稳压电源，使用前须先检查仪器间各电路连接情况，再开稳压电源，然后再启动仪器开关。 必须严格执行仪器设备运行记录制度，记录仪器运行状况、开关机时间。凡不及时记录者，一经发现，停止使用资格一周。 使用仪器必须熟悉本仪器的性能和操作方法，本科生作毕业论文使用时应有教师在场，熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。 仪器使用完毕，必须将各使用器件擦洗干净归还原处，盖上防尘罩，关闭电源，打扫完室内清洁，方.
【HTML/CSS/JavaScript】网页设计实验二（ 格式化文本、段落与列表）
qq_52384627的博客
11-09 7644
网页设计实验二一 文本与段落标记的应用二 设计新闻访问列表三 设计制度宣传展板四 制作饭店菜单价目表五 设计简易 Web 页面六 设计食品安全管理制度页面 一 文本与段落标记的应用 项目 1：文本与段落标记的应用 使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 2-1 所示。文件名为 prj_2_1.html。图 2-1 其它排版标记应用效果图 第一部分：“1.标题字应用”： （1）标题：格式化文本信息。 （2）在 body 标记中插入注释语句，内容为“1.标题字应用”，然后
css超链接之新闻列表
高星雨的博客
11-04 2300
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。 废话不多说，上干货 今天给大家带来的是新闻列表 新闻栏目呢大多使用列表结构构建，然后通过css3进行美化，下面阿雨给大家介绍的是一种较简单的列表版式 设计过程如下： 第一步，新建...
初学者使用html制作的一个新闻页面
热门推荐
qq_51191109的博客
02-21 1万+
目录 一些会运用到的知识： ​新闻图示 代码如下： Css：中文翻译是层叠样式表（html的化妆师） 1.Css的语法 2.内部样式表： 3.选择器 4.Css的属性 新闻图示 代码如图所示 这是一个自己学习看视频后运用的学习笔记 一些会运用到的知识： 1.图片插入标签： <img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”> 注意点：src必须要有，路径必须...
【Web开发及人机交互导论】格式化文件
Alex_SCY的博客
05-17 387
一、实验目的 掌握标题字、段落、物理和逻辑样式等标记的语法。 了解列表基本类型，掌握无序列表、有序列表、定义列表的语法并学会使用。 掌握文字段落排版的基本规则。 能够完成文本型Web网面的设计。 二、实验环境 HBuilderX 三、实验步骤 项目1文字与段落格式化 建立HTML文档框架。 在HTML文档head标记中插入title标记。 在body标记中插入标题字标记,并应用属性实现居左、居中、居右对齐。 在body标记中插入水平分隔线标记，并应用颜色属性改变水平线颜色。 在body标记中插入物理样
前端学习html
weixin_60131151的博客
08-01 388
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead/tbody/tfoot）让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰，方便后期css美化。专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述。绝对路径指目录下的绝对位置，直接到达目的位置，通常从盘符开始的路径。button标签是双标签，更便于包裹其他内容文字、图片等。th标签书写在table标签内部（用于替换td标签）...
HTML教程:无序列表
12-12
段落已经讲完了，那么一些基本的应用方式也讲了一些，那么是否已经应用了呢？当然应用可以更为丰富，那么这些就需要自己在实际工作中不断的摸索与思考，然后创新并总结得出新的应用形式。当然了段落不能当作万用膏药...
任意Json转成无序列表的方法示例
10-20
主要给大家介绍了任意Json如何转成无序列表，文中给出了详细的示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们下面跟着小编来一起学习学习吧。
HTML 无序列表项目符号使用图片的CSS写法
09-28
有这样的一个需求，内容为一个无序列表，想让列表的项目符号必须采用缩略图，本文使用CSS方法进行布局实现，大家可以参考下
jQuery无序列表的下拉菜单
04-07
jQuery无序列表的下拉菜单是一款jquery mnmenu插件。
HTML无序列表、有序列表、自定义列表标签的基本知识
星辰迷上大海的博客
04-19 1万+
今天的文章主要讲述HTML无序列表、有序列表、自定义列表标签的基本知识，和在网页中的效果
如何新建一个activity和.xml链接在一起_编写第一个列表网页 - 有序和无序
weixin_39553272的博客
12-01 214
编写第一个列表网页我们了解了一些网页标签后，接下来看一下网页中的列表，例如我们常见的一些新闻网页中等等，这些都是常见的新闻列表，下面我们来一起写一这种列表内容：我们首先打开我们的Hbuilder软件，可以新建一个文件，也可以根据上节我们建的HTMLCSS文件里继续创建。右击我们的HTMLCSS文件夹，新建一个目录（相当于文件夹），命名为002网页列表。右击002网页列表文件夹，新建一个.html的...
新闻无序列表练习-css04课后作业
xyy_html的博客
05-02 357
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>搜索趣图</title> <style> * { margin: 0; padding: 0; } li { list-style: ...
有序列表与无序列表应用示例
weixin_30443075的博客
09-13 577
<!--程序 ch02_3.html --> <html> 　　<head> <title>有序列表与无序列表</title></head> 　　<body> 　　　　<b>班级新闻</b> 　　　　<ul type="disc"> 　　　　　　<li>最...
新闻列表案例
The_last_knight的博客
01-20 711
新闻列表案例   下面看一个新闻列表的案例，来总结一下目前所学的知识，最终效果如下：   首先第一步就是把盒子给绘制出来，经过测量知道盒子的宽度为410px,高度为283px * { margin: 0; padding: 0; /*设置内外边距为零*/ } .article { width: 410px; height: 283px; border:...
【零基础网页开发】第十二课 制作新闻列表
weixin_45582129的博客
10-21 1105
一、H1 html标题标签有h1、h2、h3······h6，特点是默认加粗，有上下留白。默认有换行。 二、css 1. padding 内边距，不写参数代表四周。 2. border-bottom 下边框。 3. float 往往和html中父级节点的 overflow:auto; 联用，确保父级节点的高度。 三、ul < ul > 标签定义无序列表。 将 < ul > 标签与 < li > 标签一起使用，创建无序列表。 四、工程代码 1. index.html &l
网站开发笔记（一）——新闻列表页面
墨韵染风华，拓印琉璃年
05-09 848
1.页面类型：常见的两列布局的新闻列表页面 2.如图： 3.页面的布局使用了div的嵌套： 1列 2列 左侧列表高度固定，右侧列表要采用自增长的高度，在css中对list_type添加样式：min-height:300px;并由于在IE6中并不支持这个属性，所有还要同时添加_height:300px; 4.list_type的实现是利用了无序列表来实现，其中时间放在span标签
04-无序列表--有序列表--自定义列表
return_min的博客
01-03 152
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--1. ul申明一个无序列表--> <!--square ...
写一个新闻列表页
最新发布
05-26
以下是一个简单的新闻列表页的示例代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>新闻列表页</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>今日头条</h1> <nav> <ul> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">体育</a></li> <li><a href="#">科技</a></li> </ul> </nav> </header> <main> <section> <h2>最新新闻</h2> <ul> <li> <a href="#"> <h3>标题一</h3> <p>新闻简介一</p> <span>2021-07-01</span> </a> </li> <li> <a href="#"> <h3>标题二</h3> <p>新闻简介二</p> <span>2021-07-02</span> </a> </li> <li> <a href="#"> <h3>标题三</h3> <p>新闻简介三</p> <span>2021-07-03</span> </a> </li> <!-- 添加更多新闻条目 --> </ul> </section> </main> <footer> <p>版权所有 © 2021 今日头条</p> </footer> </body> </html> ``` CSS代码： ```css /* 重置默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置页面背景色和字体 */ body { background-color: #f5f5f5; font-family: Arial, sans-serif; } /* 设置页眉样式 */ header { background-color: #333; color: #fff; padding: 20px; } /* 设置页眉标题样式 */ header h1 { font-size: 32px; font-weight: bold; margin: 0; } /* 设置页眉导航样式 */ nav ul { list-style: none; display: flex; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; font-size: 18px; } /* 设置主要内容样式 */ main { padding: 20px; } /* 设置新闻列表样式 */ section { margin-bottom: 20px; } section h2 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } section ul { list-style: none; } section li { margin-bottom: 20px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } section li a { color: #333; text-decoration: none; } section li a:hover { text-decoration: underline; } section li h3 { font-size: 20px; font-weight: bold; margin-bottom: 5px; } section li p { font-size: 16px; margin-bottom: 10px; } section li span { display: block; font-size: 14px; color: #999; } ``` 该示例代码包括一个页眉和一个主要内容区域，主要内容区域包含一个新闻列表部分。新闻列表部分包括一个标题和一个无序列表，每个列表项包括一个标题、一段简介和日期。在实际应用中，可以从数据库或API中获取新闻数据并动态生成页面内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值