综合练习：京东排行版（CSS元素透明度设置及图文居中对齐综合练习）

最新推荐文章于 2023-02-10 13:56:53 发布

Lucivita

最新推荐文章于 2023-02-10 13:56:53 发布

阅读量139

点赞数

分类专栏： Web前端 html+css 文章标签： css html

本文链接：https://blog.csdn.net/qq_41568313/article/details/112847736

版权

本文通过一个实战案例，介绍了如何使用HTML和CSS创建京东排行榜样式，包括元素透明度设置和图文居中对齐的方法。文章分为四个部分：目标分析、HTML结构、CSS样式和最终效果展示。

摘要由CSDN通过智能技术生成

一.目标分析图

总的用列表三个li分别编辑文字，左侧的序号可以用背景图片完成，只要完成第一个，后续复制粘贴文字稍作改动即可。

二.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东排行版</title>
    <link rel="stylesheet" href="jdphb.css">
</head>

<body>
    <div class="big">
        <ul>
            <li>
                <div class="main">
                    <h6>&nbsp;&nbsp;&nbsp;1</h6>

最低0.47元/天解锁文章

Lucivita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
综合练习：京东排行版（CSS元素透明度设置及图文居中对齐综合练习）

一.目标分析图总的用列表三个li分别编辑文字，左侧的序号可以用背景图片完成，只要完成第一个，后续复制粘贴文字稍作改动即可。二.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
复制链接

扫一扫

专栏目录