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

news2024/11/13 11:03:28

对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%。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2143089.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Netty笔记09-网络协议设计与解析

文章目录 前言一、协议设计1. 数据格式2. 消息长度3. 编码方式4. 错误处理5. 安全性 二、协议解析1. 消息分隔2. 粘包与半包处理3. 校验机制 三、为什么需要协议&#xff1f;四、redis 协议五、HTTP 协议六、自定义协议要素编解码器&#x1f4a1; 什么时候可以加 Sharable 前言…

使用 PHPstudy 建立ThinkPHP8 本地集成环境

安装Composer 下载地址&#xff1a;https://getcomposer.org/Composer-Setup.exehttps://getcomposer.org/Composer-Setup.exe 打开PHPstudy创建网站&#xff1a; cmd终端进入PHPstudy www根目录下&#xff1a; 执行代码&#xff1a;cd phpstudy www 根目录地址 cd C:\phpst…

甲骨文发布全球首个采用英伟达™(NVIDIA®)Blackwell GPU的Zettascale人工智能超级计算集群

甲骨文公司宣布推出全球首个Zettascale云计算集群。 该集群配备了令人印象深刻的 131,072 个英伟达Blackwell GPU&#xff0c;能够提供 2.4 ZettaFLOPS 的峰值性能。 这一强大的人工智能基础设施使企业能够以更大的灵活性和主权处理大规模人工智能工作负载。 Oracle云计算基础…

算法_宽度优先搜索解决FloodFill---持续更新

文章目录 前言什么是FloodFill算法图像渲染题目要求题目解析代码如下 岛屿数量题目要求题目解析代码如下 岛屿的最大面积题目要求题目解析代码如下 被围绕的区域题目要求题目解析代码如下 前言 本文将会向你介绍宽度优先搜索解决FloodFill算法相关题型&#xff1a;图像渲染、岛…

2019-2023(CSP-J)选择题真题解析

1&#xff0c;了解的知识 中国的国家顶级域名是&#xff08; &#xff09;【2019年CSP-J初赛选择题第一题】 A…cn B…ch C…chn D…china 【答案】&#xff1a;A 以下哪个奖项是计算机科学领域的最高奖&#xff1f;&#xff08; &#xff09;【2019年CSP-J初赛选择题第…

2025年最新大数据毕业设计选题-基于Hive分析相关

选题思路 回忆学过的知识(Python、Java、Hadoop、Hive、Sqoop、Spark、算法等等。。。) 结合学过的知识确定大的方向 a. 确定技术方向&#xff0c;比如基于Hadoop、基于Hive、基于Spark 等等。。。 b. 确定业务方向&#xff0c;比如民宿分析、电商行为分析、天气分析等等。。。…

uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件

uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件 日历期间、年期间、月期间及时分期间组件在不同的应用场景中发挥着重要的作用。这些组件通常用于表单、应用程序或网站中&#xff0c;以方便用户输入和选择特定的日期和时间范围。以下是这些组件的主要作用&a…

【读书】原则

后面的 太长了&#xff0c;而且太多了 我看作者 49年的 0多岁的老人的谆谆教诲 太多了 一下子吃不消 分为 生活原则 和 工作原则 倡导 人要以 原则而活 要做到极度透明 极度求真和极度透明&#xff1a;在软件开发中&#xff0c;对事实的执着追求和对信息的透明度是至关重要的。…

dedecms——四种webshell姿势

姿势一&#xff1a;通过文件管理器上传WebShell 步骤一&#xff1a;访问目标靶场其思路为 dedecms 后台可以直接上传任意文件&#xff0c;可以通过文件管理器上传php文件获取webshell 步骤二&#xff1a;登陆到后台点击【核心】--》 【文件式管理器】--》 【文件上传】将准备好…

linux系统如何通过进程PID号找到对应的程序在系统中的路径

linux系统如何通过进程PID号找到对应的程序在系统中的路径 首先我们用ps -aux​命令找到对应进程的PID号&#xff0c;比如我这里要得就是xmrig这个进程的PID号 ​​ 通过lsof命令查看对应进程的关联的文件&#xff0c;并找到可执行文件的路径 lsof -p 22785 | grep txt​​ 或…

SpringCloud Feign 以及 一个标准的微服务的制作

一个标准的微服务制作 以一个咖啡小程序项目的订单模块为例&#xff0c;这个模块必将包括&#xff1a; 各种实体类&#xff08;pojo,dto,vo....&#xff09; 控制器 controller 服务类service ...... 其中控制器中有的接口需要提供给其他微服务&#xff0c;订单模块也需要…

软件无线电2:矢量信号器和HackRF实现FM调制解调

前面实现了在matlab平台下的FM收发&#xff0c;那么如果将matlab中的数据应用在真实的无线电台中会是怎样呢&#xff1f;于是我们借助矢量信号器和HackRF实现了射频下的FM调制解调。注意本文仅用于科研和学习&#xff0c;私自搭建电台属于违法行为。 1. 概述 整体实现框图如下…

【梯度下降|链式法则】卷积神经网络中的参数是如何传输和更新的?

【梯度下降|链式法则】卷积神经网络中的参数是如何传输和更新的&#xff1f; 【梯度下降|链式法则】卷积神经网络中的参数是如何传输和更新的&#xff1f; 文章目录 【梯度下降|链式法则】卷积神经网络中的参数是如何传输和更新的&#xff1f;1. 什么是梯度&#xff1f;2.梯度…

【网络安全】分享4个高危业务逻辑漏洞

未经许可,不得转载。 文章目录 正文逻辑漏洞1逻辑漏洞2逻辑漏洞3逻辑漏洞4其它正文 该目标程序是一家提供浏览器服务的公司,其核心功能是网页抓取和多账户登录操作,类似于浏览器中的隐身模式,但更加强大和高效。通过该平台,用户可以轻松管理并同时运行数百个隐身浏览器实…

【Python123题库】#绘制温度曲线 #XRD谱图绘制 #态密度曲线绘制

禁止转载&#xff0c;原文&#xff1a;https://blog.csdn.net/qq_45801887/article/details/140087866 参考教程&#xff1a;B站视频讲解——https://space.bilibili.com/3546616042621301 有帮助麻烦点个赞 ~ ~ Python123题库 绘制温度曲线XRD谱图绘制态密度曲线绘制 绘制温度…

【LeetCode】每日一题 2024_9_16 公交站间的距离(模拟)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;公交站间的距离 代码与解题思路 func distanceBetweenBusStops(distance []int, start int, destination int) int {// 首先让 start > destination, 这两个谁大对结果没有影响&#…

监控易监测对象及指标之:全面监控DB2_linux数据库

在数字化时代&#xff0c;数据库作为企业核心数据资产的存储和管理中心&#xff0c;其稳定性和性能直接关系到业务的连续性和效率。DB2作为IBM推出的关系型数据库管理系统&#xff0c;广泛应用于各种业务场景。为了确保DB2_linux数据库的稳定运行和高效性能&#xff0c;全面而细…

【已解决】关于错误 UnicodeEncodeError: ‘gbk‘ codec can‘t encode character

某次爬取一个网站的时候UnicodeEncodeError: gbk codec cant encode character \xa9 in position 19417: illegal multibyte sequence 尝试了很多个办法&#xff0c; def get_page(self):headers {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)…

浏览器插件利器--allWebPluginV2.0.0.20-beta版发布

allWebPlugin简介 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品&#xff0c;致力于将浏览器插件重新应用到所有浏览器。它将现有ActiveX控件直接嵌入浏览器&#xff0c;实现插件加载、界面显示、接口调用、事件回调等。支持Chrome、Firefo…

Jenkins基于tag的构建

文章目录 Jenkins参数化构建设置设置gitlab tag在工程中维护构建的版本按指定tag的版本启动服务 Jenkins参数化构建设置 选择参数化构建&#xff1a; 在gradle构建之前&#xff0c;增加执行shell的步骤&#xff1a; 把新增的shell框挪到gradle构建之前&#xff0c; 最后保存 …