当前位置：首页 > news >正文

CSS——学成在线案例

news 2025/7/6 4:00:22

🍓个人主页：bit..

🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题数据结构与算法 HTML和CSS3

1.案例准备工作

2.CSS属性书写顺序（重点）

3.页面布局整体思路

4.头部的制作编辑

6.精品推荐小模块

7.精品推荐大模块

8.底部模块

9.最终代码

1.案例准备工作

我们本次采取结构与样式相分离思想：

创建study目录文件夹（用于存放我们整个页面的相关内容）
用VScode打开这个目录文件夹
study目录内新建images文件夹，用于保存图片。
新建首页文件index.html（以后我们的网站首页统一规定为index.html）
新建style.css样式文件，我们本次采用外链样式表
将样式引入到我们的HTML页面文件中。（link）
样式表写入清除内外边距的样式，来检测样式表是否引入成功。

2.CSS属性书写顺序（重点）

建议遵循一下顺序：

布局定位属性：display/position/float/clear/visibility/overflow (建议diaplay第一个写，毕竟关系到模式)
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow.....

3.页面布局整体思路

为了提高网页制作的效率，布局时通常有一下的整体思路：

必须确定页面的版型（可视区），我们测量可得知
分析页面中的行模块，以及每个行模块中的列模块，其实页面布局第一准则
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
制作HTML结构，我们常遵循，现有结构，后有样式的原则，结构永远最重要
所以，先理清楚布局结构，在写代码尤为重要，这里需要我梦多写多整理

4.头部的制作

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接（li+a的做法）。

li+a语义更清晰，一看这就是条理清晰的列表型内容。
如果直接用a，搜索引擎更容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站的排名。

注意：

让导航栏一行显示，给li添加浮动，因为li时块级元素，需要一行显示。
这个nav导航栏可以不给宽度，将来可以继续添加其余文字。
因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定高度。

search搜索框：

一个search大盒子里面包含2个表单

input文本框 button按钮

1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色的背景
2号盒子是版心，需要水平居中
3号盒子版心内，左对齐subnav
4号盒子版心内，右对齐course课程

6.精品推荐小模块

大盒子水平居中goods 精品，注意盒子此处有阴影
1号盒子是标题h3右浮动
2号盒子里面放链接左浮动，goods-item距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
3号盒子右浮动mod修改

7.精品推荐大模块

1号盒子为最大的盒子，box版心水平居中对齐
2号盒子为上下面部分，box-hd --里面左侧表头H3浮动，右侧链接a右浮动
3号盒子为底部盒子，box-bd-- 里面是无需列表，有10个小li组成
小li外边距的问题，这里有小技巧：给box-hd宽度为1215就可以一行装开5个li

8.底部模块

1号盒子是通栏大盒子，底部footer给高度，底部是白色
2号盒子版心水平居中
3号盒子版权copyright 左对齐
4号盒子链接组 links 右对齐

9.最终代码：

index.html

<!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><link rel="stylesheet" href="style.css">
</head><body><!-- 1.头部区域开始--><div class="header w"><!-- logo部分 --><div class="logo"><img src="images/logo_03.png" alt=""></div><!-- 导航栏部分 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索模式 --><div class="search"><input type="text" value="输入关键词"><button></button></div><!-- 用户模块 --><div class="user"><img src="images/user.png" alt=""> qq-lilei</div></div><!-- 头部区域结束 --><!-- 2.banner部分start --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运营&从测试<span>></span></a></li><li><a href="#">ul设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul></div><!-- course 课程表模块 --><div class="course"><h2>我的课程表</h2><div class="bd"><ul><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语言设计</h4><p>正在学习-使用对象</p></li></ul><a href="#" class="more">全部课程</a></div></div></div></div><!-- banner部分结束 --><!-- 3.精品推荐模块开始 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">jQuery</a></li><li><a href="#">Spark</a></li><li><a href="#">MySQL</a></li><li><a href="#">Java web</a></li><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 精品推荐模式结束 --><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> · 1125人在学习</div></li></ul></div></div><!-- box核心内容区域结束 --><!-- 5.footer 模块制作 --><div class="footer"><div class="w"><div class="copyright"><img src="images/logo_03.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">                管理团队</a></dd><dd><a href="#">                工作机会</a></dd><dd><a href="#">                客户服务</a></dd><dd><a href="#">                帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">                管理团队</a></dd><dd><a href="#">                工作机会</a></dd><dd><a href="#">                客户服务</a></dd><dd><a href="#">                帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">                管理团队</a></dd><dd><a href="#">                工作机会</a></dd><dd><a href="#">                客户服务</a></dd><dd><a href="#">                帮助</a></dd></dl></div></div></div>
</body></html>

style.css

* {margin: 0;padding: 0;
}/* 宽度为1200px 居中对齐 */.w {width: 1200px;margin: 0 auto;
}body {background-color: #f3f5f7;/* height: 3000px; */
}li {list-style: none;
}a {text-decoration: none;
}.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.header {height: 42px;/* background-color: pink; */margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;/* background-color: purple; */
}.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;color: #050505;/* text-decoration: none; */
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}/* search 搜索模式 */.search {float: left;width: 412px;height: 42px;background-color: skyblue;margin-left: 70px;
}.search input {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;background: url(images/btn.png);border: 0;
}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}/* banner区域 */.banner {height: 421px;background-color: #1c036c;
}.banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background: rgb(0, 0, 0, 0.3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: #fff;
}.subnav ul li a span {float: right;
}.subnav ul li a:hover {color: #00a4ff;
}.course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮动的盒子不会有外边距合并的问题 */margin-top: 50px;
}.course h2 {height: 48px;background-color: #9bceee;text-align: center;line-height: 48px;font-size: 18px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a4a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}/* 精品推荐模式 */.goods {height: 60px;background-color: #fff;box-shadow: 0 2px 3px 3px rgb(0, 0, 0, 0.1);margin-top: 10px;/* 行高会继承给线面的盒子 */line-height: 60px;
}.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}.goods ul {float: left;margin-left: 30px;
}.goods ul li {float: left;
}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}.mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}.box {margin-top: 30px;
}.box-hd {height: 45px;
}.box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}/* 把li的父亲ul 修改的足够宽一行能撞开5个盒子不久实现换行了吗 */.box-bd ul {width: 1225px;
}.box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;
}.box-bd ul li img {width: 100%;
}.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}.box-bd .info span {color: #ff7c2d;
}.footer {height: 415px;background-color: #fff;
}.footer .w {padding-top: 35px;
}.copyright {float: left;
}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}.copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}.links {float: right;
}.links dl {float: left;margin-left: 100px;
}.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}.links dl dd a {color: #333;font-size: 12px;
}

CSS——学成在线案例

🍓个人主页：bit.. 🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题数据结构与算法 HTML和CSS3 目录 1.案例准备工作 2.CSS属性书写顺序（重点） 3.页面布局整体思路 4.头部的制作编辑 5.banner制作…...

编程日记 2023/5/30 19:15:50

元数据的类型

元数据通常分为三种类型：业务元数据、技术元数据和操作元数据。这些类别使人们能够理解属于元数据总体框架下的信息范围，以及元数据的产生过程。也就是说，这些类别也可能导致混淆，特别是当人们对一组元数据属于哪个类别或应该由谁…...

编程日记 2023/5/30 17:17:52

LEAP模型的能源环境发展、碳排放建模预测及不确定性分析

LEAP（Long Range Energy Alternatives Planning System/ Low emission analysis platform，长期能源可替代规划模型）是一种自下而上的能源-环境核算工具，由斯德哥尔摩环境研究所和美国波士顿大学联合研发。该模型与情景分析法紧密结…...

编程日记 2023/5/31 13:52:53

C# Task详解

1、Task产生背景 Task出现之前，微软的多线程处理方式有：Thread→ThreadPool→委托的异步调用，虽然也可以基本业务需要的多线程场景，但它们在多个线程的等待处理方面、资源占用方面、线程延续和阻塞方面、线程的取消方面等都显得比…...

编程日记 2023/5/31 13:52:49

Blob分析+特征

Blob分析特征0 前言1 概念2 方法2.1 图像采集2.2 图像分割2.3 特征提取3 主要应用场景：0 前言在缺陷检测领域，halcon通常有6种处理方法，包括Blob分析特征、Blob分析特征差分、频域空间域、光度立体法、特征训练、测量拟合，本篇博…...

编程日记 2023/5/31 13:52:46

4EVERLAND 的 IPFS Pinning 服务：4EVER Pin

我们很高兴地宣布 4EVERLAND Storage 的一个令人兴奋的补充，即 4EVER Pin。什么是 4EVER Pin？您可能已经知道星际文件系统或IPFS是一个分布式存储网络，来自世界各地的计算机组成节点共享数据。通常，在IPFS中获取一条数据时&#x…...

编程日记 2023/5/31 13:52:42

activiti整合springBoot其他操作

如果单纯使用activiti进行流程的自动控制，是可以实现的。但是通常我们都需要结合自定义的表，便于在流程执行中更加清晰的看到每一个流程实例节点的具体信息。关联自定义表与activiti表才能完成真正的业务 BusinessKey关联 // 定义businessKey Test pub…...

编程日记 2023/5/31 13:52:40

深度探索C++预编译头机制

深度详见预编译头，以vs编译器实现的预编译头管理为例预编译头是为了节省庞大的编译时间，采取的一种方法；C标准并没有规定如何实现预编译头机制；因此其具体实现方式由编译器供应商自行决定。下面就以VS中观测的结果为例进行说明…...

编程日记 2023/5/31 13:52:36

Leaflet基础入门教程（一）

leaflet是一个前端的轻量的gis框架，为什么说它轻量呢。因为相比于传统的“庞大的”GIS框架比如openlayers和mapbox，leaflet不仅代码体积小，而且API构成也极为简单。是GIS行业小白入门级别学习的最好的框架，没有之一。那么话不多说我们首先来学习一下如何使用leaflet搭建一…...

编程日记 2023/5/31 13:52:33

《强化学习导论》之6.5 Q-Learning

Q-Learning:Off-Policy TD Control强化学习的早期突破之一是开发了一种称为Q学习的非策略TD控制算法（Watkins，1989）。其最简单的形式，定义为(6.8)在这种情况下，学习的动作-值函数Q直接近似于最优动作-值函数&#xff0…...

编程日记 2023/5/31 13:52:31

5年软测，女朋友跑了俩，2年外包感觉自己废了一半，怎么办？

17年毕业，校招毕业就进入一家软件公司，干了2年的点工，随后进入一家外包公司工作至今，安逸使人堕落不知进取，加之随着近年的环境不景气，谈了多年将要结婚的女朋友也因为我的心态和工资要跟我闹分手我想改变现…...

编程日记 2023/5/31 13:52:28

【JavaWeb】HTML常用标签

HTML标签结构 HTML语言主要都是由标签构成的。标签名在 <> 中如<body> 标签大部分成对出现，代表开始和结束如 <body>标签中的内容</body> 少部分单个出现，叫单标签 </br> 代表换行标签中可以加属性，多个…...

编程日记 2023/5/31 13:52:25

python编程：查找某个文件夹下所有的文件，包括子文件加下的所有文件，读取指定类型的文件

目录一、实现要求二、代码实现三、效果测试一、实现要求 1、在电脑上有一个文件夹，该文件夹下面还有子文件夹，具体层级不清楚，需要实现将该文件夹下所有的文件路径读取出来； 2、在1的基础上，只需读取指定类型的文…...

编程日记 2023/5/31 13:52:22

测试外包干了5年，感觉自己已经废了····

前两天有读者想我资讯： 我是一名软件测试工程师，工作已经四年多快五年了。现在正在找工作，由于一直做的都是外包的项目。技术方面都不是很深入，现在找工作都是会问一些，测试框架，自动化测试，感…...

编程日记 2023/5/31 13:52:19

C++17 文件与目录操作＜filesystem＞

目录路径操作目录遍历文件检查和操作总结每次写C进行目录操作时，我一般都是调平台的SDK，尤其是win32 api 非常难记，于是查一下文档看看有没有和Python中os模块一样好用的库。于是发现 filesystem，从来没用过&#xff0…...

编程日记 2023/5/31 13:52:16

Python 如何安装 MySQLdb ?

人生苦短我用python Python 标准数据库接口为 Python DB-API， Python DB-API为开发人员提供了数据库应用编程接口。 Python 数据库接口支持非常多的数据库， 你可以选择适合你项目的数据库： GadFlymSQLMySQLPostgreSQLMicrosoft SQL Serve…...

编程日记 2023/5/31 13:52:14

总被程序员坑？你需要了解API接口

编辑导读：程序员是公司里的技术岗，也是产品经理最密切的合作伙伴。但是，程序员能看懂产品经理的工作，产品经理却不一定能明白程序员的工作，因此也常常被无良程序员坑。本文就从API接口的维度，浅析API的概念…...

编程日记 2023/5/31 13:52:11

信息系统基本知识（四）新技术

大纲信息系统与信息化信息系统开发方法常规信息系统集成技术软件工程新一代信息技术信息系统安全技术信息化发展与应用信息系统服务管理信息系统服务规划企业首席信息管及其责任 1.5 新一代技术 1.5.1 物联网概念：（The Internet of Things&#xf…...

编程日记 2023/5/31 13:52:09

jeesite多环境配置参考网址： https://blog.csdn.net/shaoming314/article/details/129115912?spm1001.2014.3001.5501 开源项目地址： https://gitee.com/thinkgem/jeesite Spring Spring MVC mybatis Ehcache shiro mysql jsp (主要技术栈) 项目…...

编程日记 2023/5/31 13:52:06

项目中用到的知识点回顾---JWT(JSON Web Token)

1.JWT原理： JWT 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，如下； {"姓名": "张三","角色": "管理员","到期时间": "2018年7月1日…...

编程日记 2023/5/31 13:52:04

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/4 22:17:32

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...

编程新知 2025/7/4 12:08:14

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/7/5 22:43:55

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/7/5 2:52:28

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

uniapp中使用aixos 报错

问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/7/4 22:38:24

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建前言如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...

编程新知 2025/7/6 3:14:03

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录一、👋🏻前言二、😈sinx波动的基本原理三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理四、🌊波动优化…...

编程新知 2025/7/5 13:25:31

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/7/6 3:25:33

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/7/3 2:49:55

1.案例准备工作

2.CSS属性书写顺序（重点）

3.页面布局整体思路

4.头部的制作

5.banner制作

6.精品推荐小模块

7.精品推荐大模块

8.底部模块

9.最终代码：

相关文章：