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

项目实训：CSS基本布局理解——WEB开发系列38

news 2026/2/10 7:59:21

对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。

544d7ad2ad9e4348a19da064d455a068.gif

题 1：基于栅格布局的现代博客首页设计

题目要求：
创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。要求使用 栅格布局 来分割页面，顶部导航栏固定在顶部，内容区域左右分栏。

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客首页</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;}.container {display: grid;grid-template-rows: 80px 1fr 100px;grid-template-columns: 1fr 3fr 1fr;grid-template-areas: "header header header""sidebar main main""footer footer footer";min-height: 100vh;}header {grid-area: header;background-color: #333;color: #fff;display: flex;justify-content: center;align-items: center;font-size: 24px;}.sidebar {grid-area: sidebar;background-color: #f4f4f4;padding: 20px;}.main-content {grid-area: main;padding: 20px;background-color: #fff;}footer {grid-area: footer;background-color: #333;color: #fff;text-align: center;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><div class="container"><header>导航栏</header><aside class="sidebar">侧边栏推荐内容</aside><section class="main-content"><h2>博客文章标题</h2><p>这是博客文章的内容。你可以在这里测试文本和图片布局。</p></section><footer>页脚信息</footer></div>
</body>
</html>

99a3e0bc7ec8a00b582915126c09c0ab.png

示例注解：

栅格布局的使用：使用 ​​grid-template-rows​​ 和 ​​grid-template-columns​​ 将页面分为三行三列。第一行是顶部导航栏，第二行分为左右两栏，第三行是页脚。通过 ​​grid-template-areas​​ 确定每个区域的布局位置。

顶部导航栏：​​header​​ 元素被设置在第一行，占据整个页面宽度，居中显示导航文字。

内容区域：​​main-content​​ 和 ​​sidebar​​ 分别设置在栅格的中间部分，主内容区域宽度是侧边栏的三倍，符合现代博客的布局风格。

页脚：​​footer​​ 固定在页面底部，跨越整个页面宽度，并居中显示内容。

响应式设计：通过 ​​grid​​​ 的灵活性，你可以轻松扩展布局，适应不同屏幕大小。

题 2：基于 Flexbox 和浮动的响应式电商产品页面

题目要求：
创建一个电商网站的产品详情页面，包括顶部的产品图片展示区、描述区、以及一个放置推荐产品的底部区域。要求通过 弹性盒布局 完成产品图片和描述区的布局，底部的推荐产品使用 浮动布局。

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Apple</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;background-color: aliceblue;}.product-section {display: flex;justify-content: space-between;padding: 20px;background-color: #f9f9f9;}.product-image {max-width: 2%;flex: 1;margin-right: 20px;}.product-image img {max-width: 100%;height: auto;display: block;}.product-details {flex: 2;}.product-details h2 {margin-bottom: 20px;}.recommendation-section {margin: 20px;overflow: hidden;}.recommendation-item {float: center;width: 100%;margin: 1.66%;background-color: #eee;padding: 10px;text-align: center;}.recommendation-item img {max-width: 100%;height: auto;}@media (max-width: 768px) {.product-section {flex-direction: column;}.recommendation-item {width: 100%;margin-bottom: 20px;}}</style>
</head>
<body><div class="product-section"><div class="product-image"><img src="01.jpg" alt="产品图片"></div><div class="product-details"><h2>Apple</h2><p>这里是Apple，是的，就是Apple！</p></div></div><div class="recommendation-section"><div class="recommendation-item"><img src="02.jpg" alt="推荐产品1"><p>iPhone 16 Pro</p></div><div class="recommendation-item"><img src="03.jpg" alt="推荐产品2"><p>iPhone 16 </p></div><div class="recommendation-item"><img src="04.jpg" alt="推荐产品3"><p>Apple Watch Ultra 2</p></div></div>
</body>
</html>

4d60d66cf0743191e1dec328b686408a.gif

示例注解：

弹性盒布局的使用：​​product-section​​ 区域使用了 ​​flexbox​​ 布局，​​product-image​​ 和 ​​product-details​​ 分别占据 1 和 2 的比例，保证图片和描述部分在大屏幕上呈现合理的比例。

图片自适应：​​img​​ 标签通过 ​​max-width: 100%​​ 确保图片不会超出其父容器，且可以根据容器大小自适应缩放。

浮动布局的使用：底部的推荐产品区域采用浮动布局，每个推荐产品使用 ​​float: left​​ 并设置固定宽度，使它们并排排列。同时使用 ​​overflow: hidden​​ 清除浮动。

响应式设计：使用媒体查询（​​@media​​​）调整布局，使页面在移动设备上显示更加友好。当屏幕宽度小于 768px 时，产品图片和描述区垂直排列，推荐产品区域的每个项目宽度为 100%。

 

 

 

相关文章：

项目实训：CSS基本布局理解——WEB开发系列38

对CSS学习已经接近尾声&#xff0c;下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1&#xff1a;基于栅格布局的现代博客首页设计 题目要求&#xff1a; 创建一个博客首页布局&#xff0c;包含一个顶部导航栏、一个主要的内容区域&#xff08;左侧为博客文…...

编程日记 2024/9/17 14:27:24

springBoot整合easyexcel实现导入、导出功能

本次使用的框架是springboot&#xff0c;使用mybatisplus操作表&#xff0c;使用easyexcel实现表格的导入与导出。 操作步骤 1、导入依赖&#xff1a;&#xff08;pom.xml&#xff09; <!-- 查看excel的maven仓库 https://mvnrepository.com/artifact/com.alibaba/easyex…...

编程日记 2024/9/17 14:26:23

代码随想录训练营第35天|逆序背包

46. 携带研究材料 #include <iostream> #include <vector> using namespace std; int main(){int m,n;cin>>m>>n;vector<int> weights(m,0), values(m,0),dp(n1,0);for(int i0; i<m; i){cin>>weights[i];}for(int i0; i<m; i){cin…...

编程日记 2024/9/17 14:25:22

Centos7环境下Hive的安装

Centos7环境下Hive的安装 前言一、安装Hive1.1 下载并解压1.2 配置环境变量1.3 修改配置1. hive-env.sh2. hive-site.xml 1.4 拷贝数据库驱动1.5 初始化元数据库报错 1.6 安装MySQL1.7 启动 二、HiveServer2/beeline2.1 修改Hadoop配置2.2 修改Hive配置2.2 启动hiveserver22.3 …...

编程日记 2024/9/17 14:21:18

？？Ansible——ad-hoc

文章目录 一、ad-hoc介绍二、ad-hoc的使用1、语法2、ad-hoc常用模块1&#xff09;shell模块2&#xff09;command模块3&#xff09;script模块4&#xff09;file模块5&#xff09;copy模块6&#xff09;yum模块7&#xff09;yum-repository模块8&#xff09;service模块9&#…...

编程日记 2024/9/17 14:20:17

清理Go/Rust编译时产生的缓存

Go Mac 1T的磁盘频频空间高级&#xff0c;发现是/Users/yourname/Library/Caches/go-build 目录占用了大量空间。 此目录保存来自 Go 构建系统的缓存构建工件。 如果目录太大&#xff0c;请运行go clean -cache。 运行go clean -fuzzcache以删除模糊缓存。 当时直接手工清理了…...

编程日记 2024/9/17 14:18:15

【linux】 ls命令

ls 命令是 Linux 和 Unix 系统中用于列出目录内容的命令。它显示指定目录下的文件和子目录列表。如果不指定目录&#xff0c;ls 默认显示当前目录下的内容。 基本用法 ls [选项] [文件或目录...] 无选项&#xff1a;简单地列出当前目录下的文件和目录。文件或目录&#xff1…...

编程日记 2024/9/17 14:16:13

STM32的寄存器深度解析

目录 一、STM32 寄存器概述 二、寄存器的定义与作用 三、寄存器分类 1.内核寄存器 2.外设寄存器 四、重要寄存器详解 1.GPIO 相关寄存器 2.定时器相关寄存器 3.中断相关寄存器 4.RCC 相关寄存器 五、寄存器操作方法 1.直接操作寄存器 2.使用库函数操作寄存器 六…...

编程日记 2024/9/17 14:15:12

win11 运行vmware workstation 虚拟机很卡，解决办法

本身win11的hyper V和vmare workstation有兼容性问题&#xff0c;正常来说&#xff0c;不能二者共存 需要在win11上流畅运行vmare虚拟机&#xff0c;需要在win11用管理员权限打开power shell 然后在里面运行命令: bcdedit /set hypervisorlaunchtype off powercfg /powerthr…...

编程日记 2024/9/17 14:12:10

C语言 | Leetcode C语言题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; bool isLeafNode(struct TreeNode *node) {return !node->left && !node->right; }int sumOfLeftLeaves(struct TreeNode *root) {if (!root) {return 0;}struct TreeNode **q malloc(sizeof(struct TreeNode *) * 2001);in…...

编程日记 2024/9/17 14:09:07

jeesite支持db2数据库初始化sql

点击下载&#xff1a;jeesite5.8.1-db2-sql.rar 提取码: yqev...

编程日记 2024/9/17 14:08:06

微信小程序页面制作——婚礼邀请函（含代码）

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/9/17 14:06:04

股票量化接口api，国内股票期权怎么交易

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…...

编程日记 2024/9/17 14:03:01

Spring解决循环依赖的原理

通过将自己注入自己&#xff0c;使用代理对象调用add方法解决了事务失效问题&#xff0c;但是这样不会产生循环依赖吗&#xff1f; 在OrdersCreateServiceImpl 中注入的是OrdersCreateServiceImpl 的代理对象&#xff0c;并不是OrdersCreateServiceImpl 本身实例&#xff0c;构…...

编程日记 2024/9/17 14:02:00

Openal o1初探

9 月 13 日&#xff0c;OpenAI 正式公开一系列全新 AI 大模型&#xff0c;传说的“草莓”终于上线&#xff0c;但是正式命名不叫“草莓”&#xff0c;而是o1。 一、为什么叫o1 为什么取名叫o1&#xff0c;OpenAI是这么说的&#xff1a; For complex reasoning tasks this is…...

编程日记 2024/9/17 14:00:59

基于python+django+vue的学生成绩管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于协同过滤pythondjangovue…...

编程日记 2024/9/17 13:59:57

mimd 公平收敛在相图中的细节

aimd 的收敛已经说腻了&#xff0c;我曾经画了好几次相图。有朋友希望我能画一个 mimd 相图&#xff0c;我就再画一个稍微详细的。 下面相图收敛到稳定点的前提异步 mimd&#xff1a; 之所以要异步&#xff0c;举个例子&#xff0c;在执行 gx 时&#xff0c;要确保 y 已经执…...

编程日记 2024/9/17 13:57:55

爬虫--翻页tips

免责声明&#xff1a;本文仅做分享&#xff01; 伪线程 from DrissionPage import ChromiumPage import timepage ChromiumPage() page.get("https://you.ctrip.com/sight/taian746.html") # 初始化 第0页 index_page 0# 翻页点击函数 sleep def page_turn():page…...

编程日记 2024/9/17 13:55:53

论文内容分类与检测系统源码分享

论文内容分类与检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…...

编程日记 2024/9/17 13:53:51

【MySQL】将表导出CSV（可以使用excel打开）

1、准备工作 查看数据库&#xff1a; show databases;切换数据库&#xff1a; use 数据库名;查看表名字 show tables;2、单个表导出 需要替换导出csv文件目录和表名 SELECT * INTO OUTFILE 目录/文件名.csv FIELDS TERMINATED BY , ENCLOSED BY " LINES TERMINATED …...

编程日记 2024/9/17 13:52:50

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/8 5:11:39

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44