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

0基础学前端 day2

news 2025/7/9 13:47:22

大家好，欢迎来到无限大的频道。

今天继续带领大家开始0基础学前端。

一、CSS简介与基础

层叠样式表（CSS，Cascading Style Sheets）是用来进行网页样式和布局设计的语言。通过CSS，开发者可以控制网页中元素的颜色、字体、大小、间距以及布局等视觉效果。CSS让页面不仅仅是信息的载体，还能提升用户的视觉体验和交互感受。

1. CSS的基本语法

CSS由选择器和声明块组成。选择器用于指定要设置样式的HTML元素。声明块包含一个或多个声明，各声明用分号分隔。每个声明包括一个属性和一个值，属性和值用冒号分隔。

选择器 {属性: 值;属性: 值;
}

例如：

h1 {color: blue;font-size: 24px;
}

上面的代码将所有的一级标题（`<h1>`）文本颜色设置为蓝色，字体大小设置为24像素。

2. 常见的选择器

- 元素选择器：选中所有该类型的HTML元素，例如`div`、`p`。
- 类选择器：使用` . ` 加类名选中，例如`.my-class`，这需要HTML中相应元素有`class="my-class"`。
- ID选择器：使用` # `加ID名，例如`#my-id`，这需要HTML中相应元素有`id="my-id"`。
- 组合选择器：可以组合多个选择器，应用于需要灵活定义样式的场景。

（关于类选择器和ID选择器的区别，我会再发一篇文章来和大家说明）

3. CSS样式的继承与优先级

CSS样式表中的样式可以从父元素继承给子元素。

例如，设置在`<body>`上的字体颜色会继承给`<p>`等子元素。

的选择器优先级依次为：ID选择器 > 类选择器 > 元素选择器。

此外，在冲突时，后定义的样式会覆盖此前定义的样式。

二、基础CSS布局及样式

在这部分，我们将结合昨天的HTML代码，通过简要的内嵌CSS样式进行页面基础布局，同时展示如何使用外部CSS文件来实现更复杂的样式。

1. 内嵌CSS示例

先在HTML的`<head>`部分中，通过`<style>`标签添加CSS，展示页面布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人主页</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;line-height: 1.6;}header {background-color: #333;color: #fff;padding: 10px 0;text-align: center;}main {padding: 20px;}h2 {color: #555;}ul {list-style-type: none;}li {margin-bottom: 10px;}a {text-decoration: none;color: #0066cc;}footer {background-color: #333;color: #fff;text-align: center;padding: 10px 0;position: fixed;bottom: 0;width: 100%;}</style>
</head>
<body><header><h1>欢迎来到我的个人主页</h1></header><main><section><h2>关于我</h2><p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p></section><section><h2>爱好与兴趣</h2><ul><li>编程</li><li>阅读</li><li>旅行</li></ul></section><section><h2>查看我的作品</h2><p>以下是一些我最近完成的项目：</p><ul><li><a href="https://我的项目链接.com">我的第一个项目</a></li><li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li></ul></section><figure><img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真"><figcaption>摄影：无限大</figcaption></figure></main><footer><p>联系我：<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer>
</body>
</html>

2. 外部CSS示例

在实际开发中，使用外部CSS文件管理样式更为常见。我们将上述内嵌样式移到一个外部文件中，比如styles.css，并在HTML中引入它：‘

我们创立一个名为styles.css的文件

body {font-family: Arial, sans-serif;margin: 0;padding: 0;line-height: 1.6;
}
header {background-color: #333;color: #fff;padding: 10px 0;text-align: center;
}
main {padding: 20px;
}
h2 {color: #555;
}
ul {list-style-type: none;
}
li {margin-bottom: 10px;
}
a {text-decoration: none;color: #0066cc;
}
footer {background-color: #333;color: #fff;text-align: center;padding: 10px 0;position: fixed;bottom: 0;width: 100%;
}

HTML文件更新

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人主页</title><link rel="stylesheet" href="styles.css">
</head>
<body><header></header><h1>欢迎来到我的个人主页</h1></header><main><section><h2>关于我</h2><p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p></section><section><h2>爱好与兴趣</h2><ul><li>编程</li><li>阅读</li><li>旅行</li></ul></section><section><h2>查看我的作品</h2><p>以下是一些我最近完成的项目：</p><ul><li><a href="https://我的项目链接.com">我的第一个项目</a></li><li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li></ul></section><figure><img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真"><figcaption>摄影：无限大</figcaption></figure></main><footer><p>联系我：<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer>
</body>
</html>

三、使用HTML和CSS创建精美的页面

接下来，我们创建一个更加精美的页面（还是有点简陋，后面的几天希望我们一起越做越好），介绍NBA球星凯文·杜兰特（Kevin Durant）。

ps：我个人最喜欢篮网杜，我的意难平“凯文杜兰特”，“他投出了一个最长的两分球”

Kevin Durant页面HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>凯文·杜兰特</title><link rel="stylesheet" href="kevin.css">
</head>
<body><header><h1>凯文·杜兰特</h1></header><main><section class="image"><img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特"></section><section class="bio"><h2>简介</h2><p>凯文·杜兰特是NBA著名篮球运动员，司职小前锋，曾多次获得NBA总冠军和MVP。</p></section><section class="achievements"><h2>成就</h2><ul><li>两届NBA总冠军</li><li>四届NBA得分王</li><li>两届总决赛MVP</li><li>NBA常规赛MVP</li></ul></section></main><footer><p>© 2024 凯文·杜兰特粉丝页面</p></footer>
</body>
</html>

Kevin Durant页面CSS

body {font-family: 'Roboto', sans-serif;color: #333;margin: 0;padding: 0;
}header {background-color: #181e25;color: #fff;text-align: center;padding: 20px;
}main {padding: 20px;display: flex;justify-content: space-between;
}.image img {max-width: 300px;border-radius: 10px;
}.bio, .achievements {width: 40%;
}h1, h2 {margin-top: 0;
}ul {list-style-type: square;
}footer {background-color: #181e25;color: #fff;text-align: center;padding: 10px;position: fixed;bottom: 0;width: 100%;
}

0基础学前端 day2

大家好，欢迎来到无限大的频道。今天继续带领大家开始0基础学前端。一、CSS简介与基础层叠样式表（CSS，Cascading Style Sheets）是用来进行网页样式和布局设计的语言。通过CSS，开发者可以控制网页中元素的颜色、字体…...

编程日记 2024/9/25 19:18:57

Invalid Executable The executable contains bitcode

Invalid Executable The executable contains bitcode xcode世界xcode16后，打包上传testflight时三方库报错：Invalid Executable - The executable ***.app/Frameworks/xxx.framework/xxx contains bitcode. 解决方案： 执行一下指令删除该f…...

编程日记 2024/9/25 19:16:54

音视频入门基础：FLV专题（4）——使用flvAnalyser工具分析FLV文件

一、引言有很多工具可以分析FLV格式，这里推荐flvAnalyser。其支持： 1.FLV 文件分析（Tag 列表、时间戳、码率、音视频同步等），HEVC(12)/AV1(13) or Enhanced RTMP v1 with fourCC(hvc1/av01)； 2.RTMP/HTT…...

编程日记 2024/9/25 19:15:53

Java服务端开发中的网络安全：防护DDoS与数据泄露的策略

Java服务端开发中的网络安全：防护DDoS与数据泄露的策略大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！在Java服务端开发中，网络安全是我们必须重点关注的领域&#xff0c…...

编程日记 2024/9/25 19:12:50

CodeMeter 8.20AxProtector 11.50版本更新

CodeMeter是一款强大的软件保护和许可管理工具，此次8.20版本更新引入了多个重要的新功能和优化，进一步提升了不同平台上的兼容性与使用体验。本次更新扩展了对CmCloudContainer的支持，优化了Python、Rust等语言的加密能力，并修复了…...

编程日记 2024/9/25 19:11:49

C语言在嵌入式系统中的应用有哪些？

C语言在嵌入式系统中的应用非常广泛，这主要得益于其高效的运行速度、优秀的代码优化能力以及丰富的函数库。以下是C语言在嵌入式系统应用中的几个关键方面： 1. 硬件直接访问能力底层硬件操作：C语言提供了直接访问底层硬件的机制&#xff0…...

编程日记 2024/9/25 19:08:47

Android 系统WIFI AP模式

在 Android 系统中，AP 模式（Access Point Mode，热点模式）允许设备作为 Wi-Fi 热点，其他设备可以通过连接这个热点进行互联网访问或局域网通信。要让 Android 设备工作在 AP 模式，你可以通过应用层的 API 控…...

编程日记 2024/9/25 19:07:44

java jdk8内存序列化为xml

在Java JDK 8中，将对象内存序列化为XML格式，可以使用JAXB（Java Architecture for XML Binding），它是JDK 8的一部分，并且被广泛用于Java对象与XML之间的转换。以下是一个使用JAXB在JDK 8中将Java对象序列化为…...

编程日记 2024/9/25 19:06:43

脚本注入网页:XSS

跨站脚本攻击（Cross-Site Scripting，简称 XSS）是一种常见的网络安全漏洞。它是指攻击者在网页中注入恶意脚本代码，当用户访问该网页时，恶意脚本会在用户的浏览器中执行，从而导致一系列安全问题。这些问题可…...

编程日记 2024/9/25 19:02:37

Python将ONNX转为Json脚本

Python脚本 import onnx from onnx.shape_inference import infer_shapes import numpy as npfrom google.protobuf.json_format import MessageToJson, Parse import argparse import osdef convertToJson(onnx_model_path):onnx_model = onnx.load(onnx_model_path)message …...

编程日记 2024/9/25 19:01:36

医学数据分析实训项目九糖尿病风险预测

文章目录综合实践二糖尿病遗传风险预测一、分析目标二、实现步骤三、数据准备四、特征工程五、模型构建六、性能度量七、提交要求综合实践任务二糖尿病遗传风险预测代码（一）数据准备（二）特征工程（三）模…...

编程日记 2024/9/25 19:00:35

C语言-文件操作-一些我想到的、见到的奇怪的问题

博客主页：【夜泉_ly】本文专栏：【C语言】欢迎点赞👍收藏⭐关注❤️ C语言-文件操作-一些我想到的、见到的奇怪的问题前言1.在不关闭文件的情况下，连续多次调用 fopen() 打开同一个文件，会发生什么？1.1过…...

编程日记 2024/9/25 18:58:33

变电站设备检测系统源码分享

变电站设备检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…...

编程日记 2024/9/25 18:57:31

电机foc线上课程开课啦

凌鸥学园电机控制学习盛宴，诚邀您的加入 🎓免费学习，荣誉加冕凌鸥学园提供免费的电机控制课程，从基础到专业，全程无负担。 📚全面课程体系，灵活学习模式凌鸥学园提供从基础到专业的全面课程…...

编程日记 2024/9/25 18:56:30

解决Mac 默认设置 wps不能双面打印的问题

目录问题描述： 问题解决： 问题描述： 使用mac电脑的时候，发现wps找不到双面打印的按钮，导致使用wps打开的所有文件都不能自动双面打印问题解决： mac的wps也是有双面打印的选项，只是默认被关…...

编程日记 2024/9/25 18:55:29

智谱清影 - CogVideoX-2b-部署与使用

🍑个人主页：Jupiter. 🚀 所属专栏：Linux从入门到进阶欢迎大家点赞收藏评论😊 目录体验地址：[丹摩DAMODEL官网](https://www.damodel.com/console/overview) CogVideoX 简介本篇将详细介绍使用丹摩服务器部…...

编程日记 2024/9/25 18:54:28

python queue.Queue介绍

queue.Queue 是 Python 中的线程安全队列，适合用于多线程或多进程环境中进行任务和数据的共享。queue.Queue 提供了 FIFO（先进先出）队列的实现，并包含线程锁机制以保证在多线程环境下数据的安全性。 queue.Queue 的主要方法&…...

编程日记 2024/9/25 18:53:27

Qt 每日面试题 -3

21、static和const的使用 static : 静态变量声明，分为局部静态变量，全局静态变量，类静态成员变量。也可修饰类成员函数。有以下几类∶ 局部静态变量 : 存储在静态存储区，程序运行期间只被初始化一次，作用域仍然为局部…...

编程日记 2024/9/25 18:52:25

TypeScript系列：第四篇 - typeof 与 keyof

在 TypeScript系列：第三篇 - 泛型有提及 keyof 的使用。本文将详细介绍 keyof 和 typeof 运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。 #mermaid-svg-bnMG6PMTxMI4iafc {font-family:"trebuchet ms",verdana,arial,sans-se…...

编程日记 2024/9/25 18:47:21

JDK8新增特性（值得收藏）

1.Lamdba表达式就相当于要使用接口Lock就不需要再创建一个类去实现接口了，直接用Lambda表达式省略了在创建的那个类。 Lamdba表达式是什么？ “->”,Lambda操作符或箭头操作符，它将Lambda表达式分割为两部分。左边：指Lam…...

编程日记 2024/9/25 18:46:19

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/8 16:42:22

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...

编程新知 2025/6/17 12:57:30

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/7/7 15:45:25

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/7/9 3:17:19

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/23 15:05:31

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/7/7 15:17:31

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码进程进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...

编程新知 2025/6/15 23:04:57

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/7/7 14:20:35

Bean 作用域有哪些？如何答出技术深度？

导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答&#xff0c…...

编程新知 2025/7/7 17:56:50