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"><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…...
SpringBoot使用Kafka详解含完整代码
1. 前言 随着大数据和实时处理需求的增长，Kafka作为一种分布式流处理平台，与Spring Boot的集成变得尤为重要。本文将详细探讨如何在Spring Boot应用程序中设置和使用Kafka，从基础概念到高级特性，通过实际代码示例帮助读者深入理解…...
解决：java -jar 在cmd中运行 程序卡顿，卡死的 问题。BIO和NIO案例保存
解决 怎么解决，就是 日志别输出到 cmd 就行了。就行了。就行了。 java -jar demo.jar > output.log 2>&1 &最近写东西，遇到了 程序偶尔卡死的情况。是java -jar 启动的。具体卡死为：http请求超级卡顿 或 偶尔反应好多个请求&…...
LeetCode第824题 - 山羊拉丁文
题目 解答 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 <…...
[Python] 什么是逻辑回归模型？使用scikit-learn中的LogisticRegression来解决乳腺癌数据集上的二分类问题
什么是线性回归和逻辑回归？ 线性回归是一种用于解决回归问题的统计模型。它通过建立自变量（或特征）与因变量之间的线性关系来预测连续数值的输出。线性回归的目标是找到一条直线（或超平面），使得预测值与观…...
那些不输于乙游男主人设的国漫男主
最近乙游的势头越来越猛，新宠旧爱一起上阵，叫人应接不暇。在二次元的世界里，乙游男主们凭借着超凡的魅力，成为了无数少女心中的理想对象。他们或冷酷、或温柔、或阳光、或神秘，每一个角色都有着独特的性格和故事。 乙游…...
Apache Doris 整合 FLINK CDC + Iceberg 构建实时湖仓一体的联邦查询
1概况 本文展示如何使用 Flink CDC Iceberg Doris 构建实时湖仓一体的联邦查询分析，Doris 1.1版本提供了Iceberg的支持，本文主要展示Doris和Iceberg怎么使用，大家按照步骤可以一步步完成。完整体验整个搭建操作的过程。 2系统架构 我们整…...
关于华为应用市场上架，申请权限未告知目的被驳回问题的简单处理方式
关于华为应用市场上架过程中出现的【您的应用在运行时，未同步告知权限申请的使用目的，向用户索取（存储、拍照）等权限，不符合华为应用市场审核标准。】 使用方式： 1、引入 import permision from "/m…...
【ElasticSearch】概述
文章目录 ElasticSearch1.基本介绍2.设计理念3.基本架构与核心概念学习参考资料： ElasticSearch 简单整理ES基本概念，设计理念，构建与使用，供回顾。 1.基本介绍 Elasticsearch 是一个基于 Apache Lucene 的开源的分布式搜索引擎…...
十进制转十六进制 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在十六进制中是…...
【LVGL环境搭建】
LVGL环境搭建 win模拟器环境搭建一.二.三.四.五. Ubuntu模拟器环境搭建一. 前置准备二. 下载LVGL Source code：三. 安装sdl2：四. 开启VScode执行五. 安装扩展套件六. 按F5执行七. 执行结果 win模拟器环境搭建 一. 二. 三. 四. 五. Ubuntu模拟器环境…...
【c语言】简单贪吃蛇的实现
目录 一、游戏说明 编辑 二、地图坐标 编辑 三、头文件 四、蛇身和食物 五、数据结构设计 蛇节点结构如下： 封装一个Snake的结构来维护整条贪吃蛇： 蛇的方向，可以一一列举，使用枚举： 游戏状态&a…...
2023年09月CCF-GESP编程能力等级认证Python编程六级真题解析
Python等级认证GESP（1~6级）全部真题・点这里 一、单选题（共15题，共30分） 第1题 近年来，线上授课变得普遍，很多有助于改善教学效果的设备也逐渐流行，其中包括比较常用的手写板，那么它属于哪类设备？（ ） A：输入 B：输出 C：控制 D：记录 答案：A 第2题 以下关于…...
Flink中StateBackend（工作状态）与Checkpoint（状态快照）的关系
State Backends 由 Flink 管理的 keyed state 是一种分片的键/值存储，每个 keyed state 的工作副本都保存在负责该键的 taskmanager 本地中。另外，Operator state 也保存在机器节点本地。Flink 定期获取所有状态的快照，并将这些快照复制到持…...
【C语言刷题系列】喝汽水问题
文章目录 一、文章简介 1.先买再换 1.1 代码逻辑： 1.2 完整代码 1.3 运行结果 1.4 根据方法一总结优化 2.边买边换 2.1 代码逻辑： 2.2 完整代码 2.3 运行结果 一、文章简介 本文所述专栏——C语言经典编程问题 C语言刷题_倔强的石头106的博客…...
[C++] C++ 11的functional模块介绍和使用案例
functional模块介绍 functional模块是C 11提供了一组函数对象和算法，用于增强C的函数式编程能力。该模块中的函数对象和算法可以大大简化代码，并提供了一些有用的工具，例如函数适配器和函数对象的组合。 functional模块中的函数对象包括&am…...
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.…...
20240128周报-网络太杂，Tomcat太难
今天来做个小总结吧，之前说想用几个月的时间将Java生态给整理一遍，该工作已经进入第三周了。先和各位老老板汇报一下上一周的工作，然后说一下本周的计划和后面的计划。 1.上周工作 上周的计划是将网络和Tomcat的内容梳理一番，但…...
DES加密原理
DES加密算法综合运用了置换、代替、代数等多种密码技术，具有设计精 巧、实现容易、使用方便等特点。DES加密算法的明文、密文和密钥的分组长度 都是64位，详细的DES加密算法结构如图6-10所示。 图6-10 DES加密算法结构图 DES加密过程如下所示ÿ…...
react 之 useCallback
简单讲述下useCallback的使用方法，useCallback也是用来缓存的，只不过是用于做函数缓存 // useCallbackimport { memo, useCallback, useState } from "react"const Input memo(function Input ({ onChange }) {console.log(子组件重新渲染了…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
stm32G473的flash模式是单bank还是双bank？
今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...