zoukankan      html  css  js  c++  java
  • web前端 -- h5 -- 简易新闻列表

    我们通过之前的基础知识,仿照百度新闻列表写一个自己的简易新闻列表。先看看百度新闻大概样式:

    1.1. 在title标签里写上新闻列表,可以在浏览器上头显示

    <title>简易新闻列表</title>
    
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006200426806-1571978036.png)

    1.2. 在body里的h1标签写入内容:热点要闻。我们再去网上下载一张箭头图片(图片命名为icon_jiantou.PNG,放在与index同路径下的img文件夹里。),一并写在h1里面。

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006200621558-945010985.png)
    ```html

    热点要闻 


    ```

    2.1. 添加带符号的列表,我们用到一个新标签: ul。在列表中可能会有若干个列表项,每个列表项我们用 li 表示。

    <ul>
    	<li>主席会见德国总统</li>
    	<li>强业兴农</li>
    	<li>5G基站</li>
    </ul>
    

    2.2. 我们回到页面上观察。

    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006200500770-666500317.png)

    2.3. 点击鼠标发现,上图显示的内容文字是不可以点击的。跟百度新闻的文字内容不一样,百度新闻可以打开新的页面。我们可以用到一个新的标签属性来解决,叫做超链接(把新闻的url地址复制过来,粘贴在href后面)。

    <ul>
    	<li><a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席会见德国总统</a></li>
    	<li><a href="http://news.cctv.com/2019/09/06/ARTIu7zidAWHhEI3NQXtCEHL190906.shtml">强业兴农</a></li>
    	<li><a href="http://baijiahao.baidu.com/s?id=1643943135034764037">5G基站</a></li>
        <!--a标签是双标签-->
    </ul>
    

    3.1. 通过前面的步骤我们已经会做一个简易新闻列表了。但是我不想用符号来显示列表,想把列表改为数字,可以这样做:

    <ol>
    	<li><a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席会见德国总统</a></li>
    	<li><a href="http://news.cctv.com/2019/09/06/ARTIu7zidAWHhEI3NQXtCEHL190906.shtml">强业兴农</a></li>
    	<li><a href="http://baijiahao.baidu.com/s?id=1643943135034764037">5G基站</a></li>
    </ol>
    
    这个时候就变成数字排序了:
    ![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191006200521919-1981862311.png)

    4.1. 简单总结一下这个案例中的知识点:

    1)超链接:属性名字是href,要填写打开网页的地址

    <a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席会见德国总统</a>
    

    2)图片标签:属性src中填写的是图片路径

    <img src="img/icon_jiantou.PNG">
    

    3)ul / ol和 li 的列表组合:

    <ul>
    	<li>列表项目1</li>
    	<li>列表项目2</li>
    	<li>列表项目3</li>
    	<li>列表项目···</li>
    </ul>
    <!--ul是无序列表,ul换成ol是有序列表-->
    

    注:由于会检测到敏感词汇,某些地方出现的文字会与图片内容不符。

  • 相关阅读:
    Simple ASP.NET CORE 2.2 App +Vue JS
    Upload Image to .NET Core 2.1 API
    Nginx支持WebSocket服务
    DD打卡
    Asp.net Core 源码-PagedList<T>
    Asp.net Core 源码-UrlExtensions
    Asp.net Core 源码-SessionExtensions
    树莓派资源集合
    frp内网穿透
    Nuget包含cssjs等资源文件
  • 原文地址:https://www.cnblogs.com/hefeifei/p/11628283.html
Copyright © 2011-2022 走看看