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

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

news 2026/4/9 12:20:02

第五天整个网站例

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

从抓包到洞察：Wireshark实战解析HTTP协议核心交互

1. 为什么我们需要抓包分析HTTP协议刚开始接触网络协议分析时，很多人都会有这样的疑问：为什么非要大费周章地抓包？直接看文档不行吗？这个问题我也曾经困惑过，直到第一次用Wireshark亲眼看到真实的HTTP报文在眼前流动&…...

编程新知 2026/4/9 9:57:02

软件测试用例智能生成与优先级排序：KART-RERANK的实践

软件测试用例智能生成与优先级排序：KART-RERANK的实践最近跟几个测试团队的朋友聊天，大家普遍都在吐槽一件事：需求改得太快，测试用例根本跟不上。往往是这边刚把用例写完，那边产品经理又说需求变了，测试同…...

编程新知 2026/4/9 8:50:25

别再手动合并Excel了！用EasyExcel自定义策略搞定复杂报表导出（附完整代码）

告别Excel合并噩梦：EasyExcel高阶合并策略实战指南每次看到同事在Excel里手动拖选单元格、点击合并按钮时，我都忍不住想递上一杯咖啡——这活儿太折磨人了。作为后端开发者，我们完全可以用代码自动化这些重复劳动。本文将带你深入EasyExcel的…...

编程新知 2026/4/9 7:59:44

HagiCode Desktop 混合分发架构解析：如何用 PP 加速大文件下载耘

一、Actor 模型：不是并发技巧，而是领域单元 Actor 模型的本质是： Actor 是独立运行的实体 Actor 之间只通过消息交互 Actor 内部状态不可被外部直接访问 Actor 自行决定如何处理收到的消息 Actor 模型真正解决的是： 如何在不共享状…...

编程新知 2026/4/9 7:00:28

三、选择排序

算法原理一种简单直观的排序算法，其基本思想是每次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。排序步骤初始化：在未排序序列中找到最小&#xf…...

编程新知 2026/4/9 6:35:15

zynq原语_BRAM_TDP_MACRO

tdp_ram timescale 1ns / 1ps//------------------------------------------------------------------------------ // 模块名称：tdp_ram // 功能描述：基于 Xilinx 7 系列 BRAM_TDP_MACRO 原语实现的 **真双端口 RAM (True Dual Port RAM)** // 配置参数…...

编程新知 2026/4/9 6:31:12