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

CSS网页布局综合练习（涵盖大多CSS知识点）

news 2025/11/6 21:22:04

 该综合练习就是为这个学校静态网页设置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>版权所有 &copy; 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样式&#xff0c;使其变成下面的模样 其基本骨架代码为&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content…...

编程日记 2024/11/3 20:07:59

解决 Hardhat Verify 超时

问题背景 今天在学习使用Hardhat进行verify 合约 到 Ethscan的时候&#xff0c;出现了如下报错 fafafafadeMacBook-Air Web3_Solidity_Study % npx hardhat verify --network sepolia XXXXXXXXXXXXXXXXXXXXXXXX "10" Successfully verifie…...

编程日记 2024/11/3 20:06:57

ACIS创建各种基本体，举例说明

ACIS&#xff08;Advanced CAD Interoperability System&#xff09;是一个广泛使用的三维几何建模内核&#xff0c;它支持创建和操作各种基本的三维几何体。虽然ACIS没有专门的函数来直接创建某些特定的基本体&#xff08;如椭球体&#xff09;&#xff0c;但可以通过一系列变…...

编程日记 2024/11/3 20:03:54

[CISCN 2019华北]PWN1-好久不见7

Partial RELRO 表示部分 RELRO 保护已启用。在这种情况下&#xff0c;只有某些部分&#xff08;如 GOT 中的只读部分&#xff09;是只读的。 NX enabled 表示这个二进制文件启用了 NX 保护&#xff0c;数据段是不可执行的。这可以防止某些类型的代码注入攻击。 这里是ida识别…...

编程日记 2024/11/3 20:02:52

代码随想录day16| 513找树左下角的值 、 路径总和 、 从中序与后序遍历序列构造二叉树

代码随想录day16| 找树左下角的值 、 路径总和 、 从中序与后序遍历序列构造二叉树 513找树左下角的值层序遍历法递归法 路径总和112. 路径总和113. 路径总和 II 从中序与后序遍历序列构造二叉树思路 513找树左下角的值 层序遍历法 使用层序遍历&#xff0c;找到最后一层最左边…...

编程日记 2024/11/3 20:00:51

使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习（二） ubuntu的下载安装

首先&#xff0c;Linux系统是人工智能和深度学习首选系统。原因如下: 开放性和自由度&#xff1a;Linux 是一个开源操作系统&#xff0c;允许开发者自由修改和分发代码。这在开发和研究阶段非常有用&#xff0c;因为开发者可以轻松地访问和修改底层代码。社区支持&#xff1a;…...

编程日记 2024/11/3 19:59:50

书生大模型实战营（第四期）——入门岛

第 1 关 Linux 前置基础 闯关任务完成SSH连接与端口映射并运行hello_world.py10min可选任务 1将Linux基础命令在开发机上完成一遍10min可选任务 2使用 VSCODE 远程连接开发机并创建一个conda环境10min 完成SSH连接 创建python文件 建环境 运行 第 2 关 Python 前置基础 Leet…...

编程日记 2024/11/3 19:58:49

压强随着时间的变化

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/11/3 19:57:48

2024年大厂AI大模型面试题精选与答案解析

前言 随着AI市场&#xff0c;人工智能的爆火&#xff0c;在接下来的金九银十招聘高峰期&#xff0c;各大科技巨头和国有企业将会对AGI人才的争夺展开一场大战&#xff0c;为求职市场注入了新的活力。 为了助力求职者在面试中展现最佳状态&#xff0c;深入理解行业巨头的选拔标…...

编程日记 2024/11/3 19:56:47

Linux开发讲课47--- 详解 Linux 中的虚拟文件系统

虚拟文件系统是一种神奇的抽象&#xff0c;它使得 “一切皆文件” 哲学在 Linux 中成为了可能。 什么是文件系统&#xff1f;根据早期的 Linux 贡献者和作家 Robert Love 所说&#xff0c;“文件系统是一个遵循特定结构的数据的分层存储。” 不过&#xff0c;这种描述也同样适用…...

编程日记 2024/11/3 19:55:46

全球银行常用英语

Earn OCBC$ or 90 Miles or VOYAGE Miles today! Get the most out of your OCBC Card with OCBC Privileges. 今天赚取华侨银行美元或 90 英里或航程英里&#xff01;通过华侨银行特权充分利用您的华侨银行卡。 Check out the rewards catalogue. Apply for a OCBC Credit Car…...

编程日记 2024/11/3 19:54:45

新160个crackme -090-tc.12

运行分析 需要破解注册码 PE分析 Delphi程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida搜不到字符串&#xff0c;根据Deiphi程序的结构&#xff0c;直接打开来到start函数&#xff0c;找到CreateForm函数的参数off_445FC4&#xff0c;双击 逐个查找偏移&…...

编程日记 2024/11/3 19:53:43

Swagger文档-Unable to scan documentation context default报错

文章目录 报错情况&#xff1a; Unable to scan documentation context 管理端接口发生情况一&#xff1a;发生情况三&#xff1a; 报错情况&#xff1a; Unable to scan documentation context 管理端接口 报错日志&#xff1a; 2024-11-03 12:40:27.427 ERROR 3340 --- [ …...

编程日记 2024/11/3 19:51:40

SpringKafka生产者、消费者消息拦截

1 前言 在Spring Kafka中&#xff0c;可以通过配置拦截器来实现对生产者和消费者消息的拦截。拦截器可以用来记录日志、修改消息等等。 2 基于Kafka管理的拦截器 Kafka原生提供的拦截器接口是org.apache.kafka.clients.producer.ProducerInterceptor和 org.apache.kafka.cli…...

编程日记 2024/11/3 19:50:38

Qt报错QOCI driver not loaded且QOCI available的解决方法

参考 Linux Qt 6安装Oracle QOCI SQL Driver插件&#xff08;适用WSL&#xff09; 安装 QOCI 插件完成后运行 Qt 项目报错&#xff1a; qt.sql.qsqldatabase: QSqlDatabase: QOCI driver not loaded qt.sql.qsqldatabase: QSqlDatabase: available drivers: QMIMER QPSQL QODBC…...

编程日记 2024/11/3 19:49:37

python mac vscode 脚本文件的运行

切换到脚本文件的目录下 路径的修改 当前文件组织形式&#xff1a; 脚本文件在文件夹下&#xff1a; 赋予权限&#xff1a;chmod x ./scripts/fscd_test.sh 运行&#xff1a;./scripts/fscd_test.sh...

编程日记 2024/11/3 19:48:35

Linux之du命令

华子目录 du命令常用选项示例注意事项 du命令 du&#xff08;Disk Usage&#xff09;命令是用于在类Unix操作系统&#xff08;如Linux和macOS&#xff09;中显示文件和目录所占用的磁盘空间大小的工具。它可以递归地计算目录和文件的磁盘使用情况&#xff0c;并提供详细的报告…...

编程日记 2024/11/3 19:47:34

WRF-LES与PALM微尺度气象大涡模拟

针对微尺度气象的复杂性&#xff0c;大涡模拟&#xff08;LES&#xff09;提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟&#xff0c;这些过程往往与天气模式、地形影响和人为因素如城市布局紧密相关。在这种规模上&#xff0c;传统的气象模…...

编程日记 2024/11/3 19:46:33

桌面程序开发框架选择

桌面程序开发框架选择 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…...

编程日记 2024/11/3 19:45:32

Vue项目开发：Vuex使用，表单验证配置，ESLint关闭与常见问题解决方案

文章目录 vuexvue配置form表单验证移除vue中表单验证的两种方法关闭vue项目的eslint代码校验做vue项目出现的问题 vuex Vue提供的状态管理工具&#xff0c;用于统一管理我们项目中各种数据的交互和重用&#xff0c;存储我们需要用到的数据对象属性 state&#xff1a;vuex的基本…...

编程日记 2024/11/3 19:42:28

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/6 17:02:38

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/6 20:28:07

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/11/2 9:57:20

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/11/3 19:15:05

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/10/24 7:04:27

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/10/27 5:23:59

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/10/28 6:00:57

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

编程新知 2025/10/26 0:07:11