美文网首页
认识HTML一一无序列表

认识HTML一一无序列表

作者: 周行知 | 来源:发表于2019-04-08 16:42 被阅读0次

无序列表练习

模仿下图搜狐新闻网,写出下面前端界面(注意事项:利用无序列表)


第一步 弄清问题

观察到展示部分

就一排文字,第一排文字得到加粗

联想这种效果所对应的HTML标签

ul li

第二步 拟定编码计划

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<ul>

<li><a data-param="_f=index_chan08news_0" href="http://www.sohu.com/a/306487924_114986" target="_blank" title="发改委:100万-300万人口的大城市全面取消落户限制">

            <strong>发改委:100万-300万人口的大城市全面取消落户限制</strong>

            </a></li>

<li><a data-param="_f=index_chan08news_1" href="http://www.sohu.com/a/306530028_260616" target="_blank" title="国务院关税税则委调整进口税 相关税率降为13%、20%">

            国务院关税税则委调整进口税 相关税率降为13%、20%

            </a></li>

<li><a data-param="_f=index_chan08news_2" href="http://www.sohu.com/a/306504405_114988" target="_blank" title="陕西:省内会议活动对领导称呼不加“尊敬的”">

            陕西:省内会议活动对领导称呼不加“尊敬的”

            </a></li>

<li><a data-param="_f=index_chan08news_3" href="http://www.sohu.com/a/306507462_561670" target="_blank" title="A股“醉了”!贵州茅台股价破突破900元 白酒股躁动">

            A股“醉了”!贵州茅台股价破突破900元 白酒股躁动

            </a></li>

<li><a data-param="_f=index_chan08news_4" href="http://www.sohu.com/a/306538058_255783" target="_blank" title="王旭东接任单霁翔为新任故宫博物院院长">

            王旭东接任单霁翔为新任故宫博物院院长

            </a></li>

</ul>

</body>

</html>

我们观察一下效果:

我们离我们效果是不是越来越近呢?

我们只需要做一下css样式即可,这里我就不做介绍了。

相关文章

  • 认识HTML一一无序列表

    无序列表练习 模仿下图搜狐新闻网,写出下面前端界面(注意事项:利用无序列表) 第一步 弄清问题 观察到展示部分 就...

  • 认识HTML一一无序列表(重点)

    无序列表 首先我们观察几个大型网站的一些案例: 网易新闻: 我们观察一下搜狐新闻: 我们再观察一下凤凰新闻 看一下...

  • HTML 列表

    HTML支持有序、无序和定义列表 实例 无序列表 本例演示无序列表。 有序列表 本例演示有序列表。 无序列表 无序...

  • html列表

    什么是html列表 html列表分为有序列,无序列表和自定义列表。 1.无序列表:无序列表是一个项目的列表,此列项...

  • HTML列表

    HTML支持有序、无序和定义列表无序列表: 有序列表: 嵌套列表: 自定义列表: HTML 列表标签 定义有序列表...

  • HTML:列表实现

    作业内容 使用HTML实现如下列表 知识点 : HTML列表使用 无序列表 无序列表是一个项目的列表,此列项目使用...

  • 2020-10-16学习笔记(HTML列表——字符实体)

    列表 列表用作展示HTML的一系列项目 列表分为无序列表、有序列表、定义列表 无序列表 无序列表需要两个标签参与,...

  • HTML的基础样式(一)

    一、HTML标签 1、无序列表 有序列表 ...

  • test

    #简书test > 这一一段引用 + 无序列表 + 无序列表 1. 有序列表 2. 有序列表

  • test

    #简书test > 这一一段引用 + 无序列表 + 无序列表 1. 有序列表 2. 有序列表

网友评论

      本文标题:认识HTML一一无序列表

      本文链接:https://www.haomeiwen.com/subject/xidpiqtx.html