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

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

news 2025/11/10 22:07:49

对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

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/11/8 5:57:07

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/11/10 2:40:50

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

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

编程新知 2025/11/8 10:17:49

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/11/7 20:30:32

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/11/10 0:21:40

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/11/9 15:24:39