CSS网页布局综合练习(涵盖大多CSS知识点)
该综合练习就是为这个学校静态网页设置CSS样式,使其变成下面的模样

其基本骨架代码为:
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页布局综合练习</title>
</head> <body> <header> <section class="container1"> </section></header> <nav> <ul class="clear_ele"> <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li> <li><a href="#">学院概况</a></li> <li><a href="#">机构设置</a></li> <li><a href="#">院系专业</a></li> <li><a href="#">教学科研</a></li> <li><a href="#">信息公开</a></li> <li><a href="#">招生就业</a></li></ul> </nav> <main> <section class="container2 clear_ele"> <aside id="aside-left"> 学院新闻</aside><aside id="aside-right"> 友情链接</aside> <article>文章 <ul class="clear_ele"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></article> </section> <section class="container3"> <h4>联系我们</h4> <form> 姓名:<input type="text" id="name" name="name"><br> 邮箱:<input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> </section> </main> <footer> <p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p> </footer> </body> </html>
1、首先设置几个div盒子放置顶部的图片,使用绝对定位设置好它们的位置
其代码为:
<style>#div1{height: 150px;width: 100%;float: left;background-image: url(./网页布局综合练习(完成版)/img_src/top.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#div2{position: absolute;top: 2px;margin-left: 50px;}#div3{position: absolute;top: 20px;left: 50%;}#div3 p{font-size: 30px;text-align: center;margin: 0px;}</style> <header> <section class="container1"> <div id="div1"><div id="div2"><img src="./网页布局综合练习(完成版)/img_src/logo.png" alt=""></div><div id="div3"><p>计算机学院</p><img src="./网页布局综合练习(完成版)/img_src/logo2.png" alt=""></div></div> </section></header>
2、使用左浮动功能 float: left; 让导航栏横向排列
其CSS代码为:
nav{background-color: rgb(0, 192, 0);}nav ul li{list-style: none;float: left;margin-left: 50px;font-size: 20px;}ul{margin: 0;padding: 0;}/* 使用伪元素选择器解决高度塌陷问题 */nav::after{content: "";display: block;clear: both;}
3、接下来使用固定定位 position: fixed; 将问题栏放在右下角
其CSS代码为:
main .container3{border: 2px rgb(255, 136, 156) solid;background-color: pink;width: 240px;height: 150px;position: fixed;bottom: 50px;right: 50px;}
4、使用三列布局方法将内容部分分成三列
其CSS代码为:
#aside-left{width: 20%;height: 600px;background-color: green;float: left;}#aside-right{width: 20%;height: 600px;background-color: green;float: right;}article{width: 60%;height: 600px;background-color: gray;margin-left: 20%;margin-right: 20%;}
5、使用左浮动将内容图片摆放好
其CSS代码为:
article ul li{list-style: none;width: 20%;height: 150px;background-image: url(./网页布局综合练习(完成版)/img_src/photo2.jpg);background-size: 100% 100%;border: 2px red solid;margin-right: 2%;margin-bottom: 2%;float: left;}article ul{margin: 100px;}
6、设置页脚样式
其CSS代码为:
footer{background-color: rgb(0, 192, 0);text-align: center;}footer p{margin: 0px;}
7、最后使用伪类选择器设置导航栏样式
其CSS代码为:
.clear_ele li a:link{color: white;text-decoration: none;}.clear_ele li a:visited{color: white;text-decoration: none;}.clear_ele li a:hover{background-color: rgb(176, 255, 176);}
这样一个完整的网页布局就做好啦!!(其中很多细致的知识点在前面的博客有详细介绍,这里不再一一赘述,需要了解的可移步至前面去查看哦~)
相关文章:
CSS网页布局综合练习(涵盖大多CSS知识点)
该综合练习就是为这个学校静态网页设置CSS样式,使其变成下面的模样 其基本骨架代码为: <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content…...
解决 Hardhat Verify 超时
问题背景 今天在学习使用Hardhat进行verify 合约 到 Ethscan的时候,出现了如下报错 fafafafadeMacBook-Air Web3_Solidity_Study % npx hardhat verify --network sepolia XXXXXXXXXXXXXXXXXXXXXXXX "10" Successfully verifie…...
ACIS创建各种基本体,举例说明
ACIS(Advanced CAD Interoperability System)是一个广泛使用的三维几何建模内核,它支持创建和操作各种基本的三维几何体。虽然ACIS没有专门的函数来直接创建某些特定的基本体(如椭球体),但可以通过一系列变…...
[CISCN 2019华北]PWN1-好久不见7
Partial RELRO 表示部分 RELRO 保护已启用。在这种情况下,只有某些部分(如 GOT 中的只读部分)是只读的。 NX enabled 表示这个二进制文件启用了 NX 保护,数据段是不可执行的。这可以防止某些类型的代码注入攻击。 这里是ida识别…...
代码随想录day16| 513找树左下角的值 、 路径总和 、 从中序与后序遍历序列构造二叉树
代码随想录day16| 找树左下角的值 、 路径总和 、 从中序与后序遍历序列构造二叉树 513找树左下角的值层序遍历法递归法 路径总和112. 路径总和113. 路径总和 II 从中序与后序遍历序列构造二叉树思路 513找树左下角的值 层序遍历法 使用层序遍历,找到最后一层最左边…...
使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习(二) ubuntu的下载安装
首先,Linux系统是人工智能和深度学习首选系统。原因如下: 开放性和自由度:Linux 是一个开源操作系统,允许开发者自由修改和分发代码。这在开发和研究阶段非常有用,因为开发者可以轻松地访问和修改底层代码。社区支持:…...
书生大模型实战营(第四期)——入门岛
第 1 关 Linux 前置基础 闯关任务完成SSH连接与端口映射并运行hello_world.py10min可选任务 1将Linux基础命令在开发机上完成一遍10min可选任务 2使用 VSCODE 远程连接开发机并创建一个conda环境10min 完成SSH连接 创建python文件 建环境 运行 第 2 关 Python 前置基础 Leet…...
压强随着时间的变化
import numpy as np import matplotlib.pyplot as plt# 参数设置 L 50 # 长度 (m) D 4 # 直径 (m) d 0.01 # 洞的直径 (m) P0 101300 # 初始压力 (Pa) P_final 0.3 * P0 # 最终压力 (Pa) R 287 # 理想气体常数 (J/(kgK)) T 20 273.15 # 温度 (K) M 0.029 # 空…...
2024年大厂AI大模型面试题精选与答案解析
前言 随着AI市场,人工智能的爆火,在接下来的金九银十招聘高峰期,各大科技巨头和国有企业将会对AGI人才的争夺展开一场大战,为求职市场注入了新的活力。 为了助力求职者在面试中展现最佳状态,深入理解行业巨头的选拔标…...
Linux开发讲课47--- 详解 Linux 中的虚拟文件系统
虚拟文件系统是一种神奇的抽象,它使得 “一切皆文件” 哲学在 Linux 中成为了可能。 什么是文件系统?根据早期的 Linux 贡献者和作家 Robert Love 所说,“文件系统是一个遵循特定结构的数据的分层存储。” 不过,这种描述也同样适用…...
全球银行常用英语
Earn OCBC$ or 90 Miles or VOYAGE Miles today! Get the most out of your OCBC Card with OCBC Privileges. 今天赚取华侨银行美元或 90 英里或航程英里!通过华侨银行特权充分利用您的华侨银行卡。 Check out the rewards catalogue. Apply for a OCBC Credit Car…...
新160个crackme -090-tc.12
运行分析 需要破解注册码 PE分析 Delphi程序,32位,无壳 静态分析&动态调试 ida搜不到字符串,根据Deiphi程序的结构,直接打开来到start函数,找到CreateForm函数的参数off_445FC4,双击 逐个查找偏移&…...
Swagger文档-Unable to scan documentation context default报错
文章目录 报错情况: Unable to scan documentation context 管理端接口发生情况一:发生情况三: 报错情况: Unable to scan documentation context 管理端接口 报错日志: 2024-11-03 12:40:27.427 ERROR 3340 --- [ …...
SpringKafka生产者、消费者消息拦截
1 前言 在Spring Kafka中,可以通过配置拦截器来实现对生产者和消费者消息的拦截。拦截器可以用来记录日志、修改消息等等。 2 基于Kafka管理的拦截器 Kafka原生提供的拦截器接口是org.apache.kafka.clients.producer.ProducerInterceptor和 org.apache.kafka.cli…...
Qt报错QOCI driver not loaded且QOCI available的解决方法
参考 Linux Qt 6安装Oracle QOCI SQL Driver插件(适用WSL) 安装 QOCI 插件完成后运行 Qt 项目报错: qt.sql.qsqldatabase: QSqlDatabase: QOCI driver not loaded qt.sql.qsqldatabase: QSqlDatabase: available drivers: QMIMER QPSQL QODBC…...
python mac vscode 脚本文件的运行
切换到脚本文件的目录下 路径的修改 当前文件组织形式: 脚本文件在文件夹下: 赋予权限:chmod x ./scripts/fscd_test.sh 运行:./scripts/fscd_test.sh...
Linux之du命令
华子目录 du命令常用选项示例注意事项 du命令 du(Disk Usage)命令是用于在类Unix操作系统(如Linux和macOS)中显示文件和目录所占用的磁盘空间大小的工具。它可以递归地计算目录和文件的磁盘使用情况,并提供详细的报告…...
WRF-LES与PALM微尺度气象大涡模拟
针对微尺度气象的复杂性,大涡模拟(LES)提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟,这些过程往往与天气模式、地形影响和人为因素如城市布局紧密相关。在这种规模上,传统的气象模…...
桌面程序开发框架选择
桌面程序开发框架选择 1、WinForm(Windows Form)优点缺点 2、WPF(Windows Presentation Foundation)优点缺点 3、Electron优点缺点 4、Delphi优点缺点 5、QT优点缺点 6、MFC(Microsoft Foundation Class Library)优点缺点 7、JavaFX优点缺点 8、SwingAWT9、Avalonia10、Flutter…...
Vue项目开发:Vuex使用,表单验证配置,ESLint关闭与常见问题解决方案
文章目录 vuexvue配置form表单验证移除vue中表单验证的两种方法关闭vue项目的eslint代码校验做vue项目出现的问题 vuex Vue提供的状态管理工具,用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到的数据对象属性 state:vuex的基本…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
