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

2024年复习 HTML5+CSS3+移动web 笔记之CSS遍第5天

news 2026/2/9 5:04:34

第五天整个网站例

5.1 准备工作项目目录与版心

base.css

5.2 网页制作思路

5.3 header 区域-整体布局

5.4 header区域-logo

5.5 header区域-导航

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><!-- 顺序要求：先清除再设置  --><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 头部区域 --><div class="header"><div class="wrapper"><!-- logo --><div class="logo"><h1><a href="#">学成在线</a></h1></div><!-- 导航 --><div class="nav"><ul><li><a href="#" class="active">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业</a></li></ul></div><!-- 搜索 --><div class="search">search</div><!-- 用户 --><div class="user">用户</div></div></div>
</body>
</html>

base.css

/* 基础公共样式：清除默认样式 + 设置通用样式*/
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}body {font: 14px/1.5 "Microsoft Yaher", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;
}a {color: #333;text-decoration: none;
}

index.css

/* 首页样式 */
/* 版心 */
.wrapper {margin: 0 auto;width: 1200px;
}body {background-color: #f3f5f7;
}/* 头部区域 */
.header {height: 100px;background-color: #fff;
}.header .wrapper {padding-top: 29px;display: flex;
}/* logo */
.logo a {display: block;width: 195px;height: 41px;background-image: url(../images/logo.png);font-size: 0;
}/* 导航 */
.nav {margin-left: 102px;
}.nav ul {display: flex;
}.nav li {margin-right: 24px;
}.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{border-bottom: 2px solid #00a4ff;
}

5.6 header区域-搜索区域

5.7 header区域-用户区域

<!-- 头部区域 --><div class="header"><div class="wrapper"><!-- logo --><div class="logo"><h1><a href="#">学成在线</a></h1></div><!-- 导航 --><div class="nav"><ul><li><a href="#" class="active">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业</a></li></ul></div><!-- 搜索 --><div class="search"><input type="text" placeholder="请输入关键词"><a href="#"></a></div><!-- 用户 --><div class="user"><img src="./img/user.png"><span>学员用户</span></div></div></div>CSS
/* 导航 */
.nav {margin-left: 102px;
}.nav ul {display: flex;
}.nav li {margin-right: 24px;
}.nav li a {display: block;padding: 6px 8px;line-height: 27px;font-size: 19px;
}/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{border-bottom: 2px solid #00a4ff;
}.search {display: flex;margin-left: 64px;padding-left: 19px;padding-right: 12px;width: 412px;height: 40px;background-color: #f3f5f7;border-radius: 20px;
}.search input {flex: 1;border: 0;background-color: transparent;/* 去掉表单控件的焦点框 */outline: none;
}/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {width: 16px;height: 16px;background-image: url(../img/search.png);align-self: center;
}/* 用户 */
.user {margin-left: 32px;margin-top: 4px;
}.user img {margin-right: 7px;/* vertical-align 行内块和行内垂直方向对方方式 */vertical-align: middle;
}.user span {font-size: 16px;color: #666;
}

5.8 banner区域

index.css--banner

/* banner 区域 */
.banner {height: 420px;background-color: #0092cb;
}.banner .wrapper {display: flex;justify-content: space-between;height: 420px;background-image: url(../img/banner2.png);
}/* 侧导航 */
.banner .left {padding: 3px 20px;width: 191px;height: 420px;background-color: rgba(0, 0, 0, 0, 42);
}.banner .left a {/*  */display: block;height: 46px;/* background-image: url(../img/); */line-height: 46px;font-size: 16px;color: #fff;
}.banner .left a:hover {background-image: url(../img/right-hover.png);color: #00a4ff;
}/* 课程表 */
.banner .right {margin-top: 60px;width: 218px;height: 305px;background-color: #209dd5;border-radius: 10px;
}.banner .right h3 {margin-left: 14px;height: 48px;line-height: 48px;font-size: 15px;color: #fff;font-weight: 400;
}.banner .right .content {padding: 14px;height: 257px;background-color: #fff;border-radius: 10px;
}.banner .right dl {margin-bottom: 12px;border-bottom: 1px solid #e0e0e0;
}.banner .right dt {margin-bottom: 8px;font-size: 14px;line-height: 20px;font-weight: 700;
}.banner .right dd {margin-bottom: 8px;font-size: 12px;line-height: 16px;
}.banner .right dd span {color: #00a4ff;
}.banner .right dd strong {color: #7d7d7d;font-weight: 400;
}.banner .right a {display: block;height: 32px;background-color: #00a4ff;text-align: center;font-size: 32xp;color: #fff;line-height: 32px;border-radius: 15px;
}

<!-- banner 区域 --><div class="banner"><div class="wrapper"><div class="left"><ul><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><li><a href="#">前端开发</a></li><li><a href="#">前端开发</a></li><li><a href="#">前端开发</a></li></ul></div><div class="right"><h3>我的课程表</h3><div class="content"><dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd></dl><dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd></dl><dl><dt>数据可视化课程</dt><dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd></dl><a href="#">全部课程</a></div></div></div></div>

5.9 精品推荐区域

/* 精品推荐 */
.recommed {display: flex;margin-top: 11px;padding: 0 20px;height: 60px;background-color: #FFF;box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);line-height: 60px;
}
.recommed h3 {font-size: 18px;color: #00a4ff;font-weight: 400;
}.recommed ul {flex: 1;display: flex;
}.recommed ul li a {padding: 0 24px;border-right: 1px solid #e0e0e0;font-size: 18px;
}.recommed ul li:last-child a {border-right: 0;
}.recommed .modify {font-size: 16px;color: #00a4ff;
}

 <!-- 精品推荐 --><div class="recommed wrapper"><h3>精品推荐</h3><ul><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li><li><a href="#">Html</a></li></ul><a href="#" class="modify">修改兴趣</a></div>

5.10 推荐课程区域

5.11 前端开发工程师区域

5.12 版权区域

2024年复习 HTML5+CSS3+移动web 笔记之CSS遍第5天

第五天整个网站例 5.1 准备工作项目目录与版心 base.css 5.2 网页制作思路 5.3 header 区域-整体布局 5.4 header区域-logo 5.5 header区域-导航 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&l…...

编程日记 2024/2/3 11:45:40

SpringBoot使用Kafka详解含完整代码

1. 前言随着大数据和实时处理需求的增长，Kafka作为一种分布式流处理平台，与Spring Boot的集成变得尤为重要。本文将详细探讨如何在Spring Boot应用程序中设置和使用Kafka，从基础概念到高级特性，通过实际代码示例帮助读者深入理解…...

编程日记 2024/2/3 11:43:37

解决：java -jar 在cmd中运行程序卡顿，卡死的问题。BIO和NIO案例保存

解决怎么解决，就是日志别输出到 cmd 就行了。就行了。就行了。 java -jar demo.jar > output.log 2>&1 &最近写东西，遇到了程序偶尔卡死的情况。是java -jar 启动的。具体卡死为：http请求超级卡顿或偶尔反应好多个请求&…...

编程日记 2024/2/3 11:41:35

题目解答 String toGoatLatin(String S) {if (S null) {return "";}S S.trim();if (S.isEmpty()) {return "";}StringBuilder sb new StringBuilder();String[] tokens S.split(" ");for (int i 0, j 1, length tokens.length; i <…...

编程日记 2024/2/3 11:39:33

[Python] 什么是逻辑回归模型？使用scikit-learn中的LogisticRegression来解决乳腺癌数据集上的二分类问题

什么是线性回归和逻辑回归？ 线性回归是一种用于解决回归问题的统计模型。它通过建立自变量（或特征）与因变量之间的线性关系来预测连续数值的输出。线性回归的目标是找到一条直线（或超平面），使得预测值与观…...

编程日记 2024/2/3 11:35:29

那些不输于乙游男主人设的国漫男主

最近乙游的势头越来越猛，新宠旧爱一起上阵，叫人应接不暇。在二次元的世界里，乙游男主们凭借着超凡的魅力，成为了无数少女心中的理想对象。他们或冷酷、或温柔、或阳光、或神秘，每一个角色都有着独特的性格和故事。乙游…...

编程日记 2024/2/3 11:33:26

Apache Doris 整合 FLINK CDC + Iceberg 构建实时湖仓一体的联邦查询

1概况本文展示如何使用 Flink CDC Iceberg Doris 构建实时湖仓一体的联邦查询分析，Doris 1.1版本提供了Iceberg的支持，本文主要展示Doris和Iceberg怎么使用，大家按照步骤可以一步步完成。完整体验整个搭建操作的过程。 2系统架构我们整…...

编程日记 2024/2/3 11:32:25

关于华为应用市场上架，申请权限未告知目的被驳回问题的简单处理方式

关于华为应用市场上架过程中出现的【您的应用在运行时，未同步告知权限申请的使用目的，向用户索取（存储、拍照）等权限，不符合华为应用市场审核标准。】使用方式： 1、引入 import permision from "/m…...

编程日记 2024/2/3 11:31:24

【ElasticSearch】概述

文章目录 ElasticSearch1.基本介绍2.设计理念3.基本架构与核心概念学习参考资料： ElasticSearch 简单整理ES基本概念，设计理念，构建与使用，供回顾。 1.基本介绍 Elasticsearch 是一个基于 Apache Lucene 的开源的分布式搜索引擎…...

编程日记 2024/2/3 11:27:20

十进制转十六进制 C/C++蓝桥杯基础试题BASIC-10

问题描述十六进制数是在程序设计时经常要使用到的一种整数的表示方式。它有0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F共16个符号，分别表示十进制数的0至15。十六进制的计数方法是满16进1，所以十进制数16在十六进制中是10，而十进制的17在十六进制中是…...

编程日记 2024/2/3 11:23:16

【LVGL环境搭建】

LVGL环境搭建 win模拟器环境搭建一.二.三.四.五. Ubuntu模拟器环境搭建一. 前置准备二. 下载LVGL Source code：三. 安装sdl2：四. 开启VScode执行五. 安装扩展套件六. 按F5执行七. 执行结果 win模拟器环境搭建一. 二. 三. 四. 五. Ubuntu模拟器环境…...

编程日记 2024/2/3 11:20:13

【c语言】简单贪吃蛇的实现

目录一、游戏说明编辑二、地图坐标编辑三、头文件四、蛇身和食物五、数据结构设计蛇节点结构如下： 封装一个Snake的结构来维护整条贪吃蛇： 蛇的方向，可以一一列举，使用枚举： 游戏状态&a…...

编程日记 2024/2/3 11:19:12

2023年09月CCF-GESP编程能力等级认证Python编程六级真题解析

Python等级认证GESP（1~6级）全部真题・点这里一、单选题（共15题，共30分）第1题近年来，线上授课变得普遍，很多有助于改善教学效果的设备也逐渐流行，其中包括比较常用的手写板，那么它属于哪类设备？（） A：输入 B：输出 C：控制 D：记录答案：A 第2题以下关于…...

编程日记 2024/2/3 11:16:09

Flink中StateBackend（工作状态）与Checkpoint（状态快照）的关系

State Backends 由 Flink 管理的 keyed state 是一种分片的键/值存储，每个 keyed state 的工作副本都保存在负责该键的 taskmanager 本地中。另外，Operator state 也保存在机器节点本地。Flink 定期获取所有状态的快照，并将这些快照复制到持…...

编程日记 2024/2/3 11:15:08

【C语言刷题系列】喝汽水问题

文章目录一、文章简介 1.先买再换 1.1 代码逻辑： 1.2 完整代码 1.3 运行结果 1.4 根据方法一总结优化 2.边买边换 2.1 代码逻辑： 2.2 完整代码 2.3 运行结果一、文章简介本文所述专栏——C语言经典编程问题 C语言刷题_倔强的石头106的博客…...

编程日记 2024/2/3 11:13:06

[C++] C++ 11的functional模块介绍和使用案例

functional模块介绍 functional模块是C 11提供了一组函数对象和算法，用于增强C的函数式编程能力。该模块中的函数对象和算法可以大大简化代码，并提供了一些有用的工具，例如函数适配器和函数对象的组合。 functional模块中的函数对象包括&am…...

编程日记 2024/2/3 11:10:04

kubernetes基本概念和操作

基本概念和操作 1.Namespace1.1概述1.2应用示例 2.Pod2.1概述2.2语法及应用示例 3.Label3.1概述3.2语法及应用示例 4.Deployment4.1概述4.2语法及应用示例 5.Service5.1概述5.2语法及应用示例5.2.1创建集群内部可访问的Service5.2.2创建集群外部可访问的Service5.2.3删除服务5.…...

编程日记 2024/2/3 11:08:02

20240128周报-网络太杂，Tomcat太难

今天来做个小总结吧，之前说想用几个月的时间将Java生态给整理一遍，该工作已经进入第三周了。先和各位老老板汇报一下上一周的工作，然后说一下本周的计划和后面的计划。 1.上周工作上周的计划是将网络和Tomcat的内容梳理一番，但…...

编程日记 2024/2/3 11:06:00

DES加密原理

DES加密算法综合运用了置换、代替、代数等多种密码技术，具有设计精巧、实现容易、使用方便等特点。DES加密算法的明文、密文和密钥的分组长度都是64位，详细的DES加密算法结构如图6-10所示。图6-10 DES加密算法结构图 DES加密过程如下所示&#xff…...

编程日记 2024/2/3 11:04:59

react 之 useCallback

简单讲述下useCallback的使用方法，useCallback也是用来缓存的，只不过是用于做函数缓存 // useCallbackimport { memo, useCallback, useState } from "react"const Input memo(function Input ({ onChange }) {console.log(子组件重新渲染了…...

编程日记 2024/2/3 11:02:57

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2026/2/5 4:25:15

Day131 | 灵神 | 回溯算法 | 子集型子集

Day131 | 灵神 | 回溯算法 | 子集型子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2026/2/4 16:21:14

如何在网页里填写 PDF 表格？

有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...

编程新知 2026/1/26 12:37:40

uniapp 小程序学习（一）

利用Hbuilder 创建项目运行到内置浏览器看效果下载微信小程序安装到Hbuilder 下载地址 ：开发者工具默认安装设置服务端口号在Hbuilder中设置微信小程序配置找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现如下 bug 解…...

编程新知 2026/2/5 4:29:00

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27