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(子组件重新渲染了…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
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…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...