首页 > 其他分享 >前端必学-40个精选案例实战-案例1-仿百度图文列表实战

前端必学-40个精选案例实战-案例1-仿百度图文列表实战

时间：2024-01-30 11:45:29浏览次数：24  
标签：实战 寒腿 网页 标签 必学 列表 案例 变凉 div

最终呈现效果

image.png

理解img标签的作用与效果

img标签：

  • 前端网页的图片展示标签，单标签，英文非缩写为image
  • 常用属性为地址、宽度与高度
  • 常见的后缀格式为jpg、jpeg、png、gif等
<!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>Document</title>
</head>

<body>
    <img src="./123.jpg" width="100px" height="100px">
</body>

</html>

理解a标签的作用与含义

a标签：

  • 前端网页的超文本标签，用于一个页面链接到另一个页面
  • 闭合标签，英文非缩写为anchor(锚点)
  • 常用的属性为href（Hypertext Reference超文本引用）、target(目标)
<!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>Document</title>
</head>

<body>
    <a target="_blank" href="https://www.imooc.com/">
        <img src="https://www.imooc.com/static/img/index/logo2020.png">
    </a>

    <a target="_blank" href="../anli1/1.html">
        跳转页面测试
    </a>
</body>

</html>

理解div标签的作用和含义

image.png

  • 前端网页的结构标签，用于网页的搭建与布局
  • 闭合标签，英文非缩写为division（分开、分隔）
  • 默认状态是一整行
<!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>div</title>
</head>

<body>
    现在我们这种方式都是写在同一行中，
    如果我们想让其每一张都另起一行，则需要使用div标签
    <img src="./123.jpg" width="100px">
    <img src="./123.jpg" width="100px">
    <img src="./123.jpg" width="100px">


</body>

</html>

image.png

使用div情况下

<!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>div</title>
</head>

<body>
    <div>
        <img src="./123.jpg" width="100px">
    </div>
    <div>
        <img src="./123.jpg" width="100px">
    </div>
    <div>
        <img src="./123.jpg" width="100px">
    </div>


</body>

</html>

image.png

<!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>div</title>
</head>

<body>
    <div>
        <img src="./123.jpg" width="100px">
        <a href="https://www.baidu.com">百度</a>
    </div>
    <div>
        <img src="./123.jpg" width="100px">
    </div>


</body>

</html>

可以看出来效果 - image.png
图片与a标签摆放在同一行中，可以理解div就是一个占位符。

理解ul标签的作用和含义

image.png

  • 前端网页的无序列表（英文Unordered List）
  • 列表里的项目用
  • (英文list item)标签记述
  • 默认状态宽度是一整行

image.png

<!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>ul标签的作用</title>
</head>

<body>
    <ul>
        <li>列表一</li>
        <li>列表二</li>
        <li>
            <a href="https://www.baidu.com">百度</a>
        </li>
        <li>
            <a href="http://jd.com">
                京东
            </a>
        </li>
        <li>
            <ul>
                <li>二层测试</li>
                <li>二层测试</li>
                <li>二层测试</li>
                <li>
                    <ul>
                        <li>
                            第三层测试
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>

</html>

理解ol标签的作用和含义

image.png

  • 前端网页的有序列表（英文ordered List）
  • 列表里的项目用
  • （英文list item）标签记述
  • 默认状态宽度是一整行
<!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>Document</title>
</head>

<body>
    <ol>
        <li><a href="http://www.baidu.com">百度</a></li>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>789</li>
        <li>
            <ol>
                <li>
                    第二层测试
                </li>
                <ol>
                    <li>
                        第三层
                    </li>
                </ol>
            </ol>
        </li>

    </ol>
</body>

</html>

image.png

网页搭建思路与规范-百度新闻图文混排骨架搭建

<!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>
</head>

<body>
    <div>
        <div>
            <div>
                哈尔滨一男子睡个午觉假牙没了两个
            </div>
            <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>

            </ul>
        </div>
        <div>
            <div>
                老人跺脚，医生多看了一眼救了一命，秋冬症这10个征兆
            </div>
            <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>

            </ul>
        </div>
    </div>

    <div>
        <div>
            <div>健康图片</div>
            <div><img src="./123.jpg"></div>
            <div>健康会让骨骼老的更快？</div>
        </div>

        <div>
            <div>
                <div><img src="./123.jpg"></div>
            </div>
            <div>上班第一天，这样恢复运动让你元气</div>


            <div>
                <div><img src="./123.jpg"></div>
            </div>
            <div>寒露，保暖补水避凉燥</div>
        </div>
    </div>

</body>

</html>

标签：实战,寒腿,网页,标签,必学,列表,案例,变凉,div
From： https://www.cnblogs.com/xiaochenNN/p/17996774

相关文章

  • SQL变量数据加工在Java规则引擎中的应用案例分析
    SQL变量加工SQL加工背景，在决策配置过程中，一些复杂的逻辑或模型可通过自定义SQL脚本编写创建数据变量，通过SQL脚本可以便捷的从数据库中取数，并且自定义SQL支持传参，可满足更复杂多变的数据加工处理。注意，SQL变量加工和算子编排加工的方式不同，SQL变量加工依赖于对应数据源的服务器的性......
  • 构建知识图谱：从技术到实战的完整指南
    本文深入探讨了知识图谱的构建全流程，涵盖了基础理论、数据获取与预处理、知识表示方法、知识图谱构建技术等关键环节。关注TechLead，分享AI全维度知识。作者拥有10+年互联网服务架构、AI产品研发经验、团队管理经验，同济本复旦硕，复旦机器人智能实验室成员，阿里云认证的资深架构师......
  • ControlNet学习实战1--字体海报
    最近玩AI绘画的过程中，突然发现了一个可以生成特点字体海报的技巧，特此记录学习一下。本片文章介绍大家制作一张2024龙年海报。ControlNet介绍ControlNet是一个应用于Stable_diffusion一个插件，该插件可以让AI更加精准的生成准确的想要的图片，关于这些内容后期会专门更加细致的说明......
  • 《实战Java高并发程序设计（第2版）》PDF
    内容简介在单核CPU时代，单任务在一个时间点只能执行单一程序，随着多核CPU的发展，并行程序开发变得尤为重要。《实战Java高并发程序设计（第2版）》主要介绍基于Java的并行程序设计基础、思路、方法和实战。第一，立足于并发程序基础，详细介绍Java进行并行程序设计的基本方法。第二，进一步详细......
  • java——ip黑名单设计方案（大全+实战）
    java——ip黑名单设计方案（大全+实战）大家好，今天来设计一个ip黑名单功能。即封禁一些类似ddos的非法ip环境：springboot+jdk11本文源码地址：https://gitee.com/xue-shangren/blog-src/tree/master/java-blacklist-design自定义拦截器思路：将黑名单ip存入一个txt文件中（置于resource......
  • 【实战项目】想自己通过C语言编写贪吃蛇吗？先来学习一下什么是WIN32API
    WIN32API前言大家好，很高兴又和大家见面了！！！在开始今天的内容前，咱们先闲聊一下。博主是从2023.8.19号晚上23:28左右正式开始接触C语言，在此之前，我也只是一个对编程一窍不通的小白，我的本科专业是给排水科学与工程，一个就业前景还不错但是不太适合我本人的专业。在经历了一些事情之后，我......
  • 【面试突击】计算机网络面试实战（下）
    欢迎关注公众号【11来了】，及时收到AI前沿项目工具及新技术的推送！在我后台回复「资料」可领取编程高频电子书！在我后台回复「面试」可领取硬核面试笔记！Https的工作原理Http的内容是明文传输的，铭文数据经过中间代理服务器、路由器、wifi热点等多个物理节点，如果被劫持会导致传输......
  • 【TiDB 实战】使用 HyBench 测试 TiDB
    本文将介绍如何使用HyBench对TiDB进行测试，并简述HyBench适配TiDB的注意事项。Hybench是一款由中国软件评测中心、清华大学联合牵头，多家公司共同研发的HTAP数据库基准测试工具。TiDB是一款兼容MySQL的数据库，Hybench已在Gitee开源，支持MySQL数据库，通过修改HyBe......
  • 软件测试学习笔记丨Charles_Mock实战
    Charles_Mock实战1.电脑端抓包抓取雪球Web端搜索接口数据查看接口响应状态码与使用的协议版本查看请求参数与json格式的响应内容快速过滤雪球域名的接口进行弱网测试，选择弱网模式为256kbpsProxy→ThrottleSetting，然后选择EnableThrottling弱网前弱网后2.App抓包抓取......
  • docker-compose部署简单案例
    Dockerfile#设置基础镜像FROMpython:3.7#设置环境变量ENVPYTHONUNBUFFERED=1ENVPATH/usr/local/bin:$PATH#设置工作目录WORKDIR/home/lab#复制项目文件到容器中COPY./home/lab/#COPYrequirements.txt/home/lab#安装依赖包(先更新pip，换源，再安装包)......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99