0基础学前端 day2
大家好,欢迎来到无限大的频道。
今天继续带领大家开始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,开发者可以控制网页中元素的颜色、字体…...

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…...

音视频入门基础:FLV专题(4)——使用flvAnalyser工具分析FLV文件
一、引言 有很多工具可以分析FLV格式,这里推荐flvAnalyser。其支持: 1.FLV 文件分析(Tag 列表、时间戳、码率、音视频同步等),HEVC(12)/AV1(13) or Enhanced RTMP v1 with fourCC(hvc1/av01); 2.RTMP/HTT…...
Java服务端开发中的网络安全:防护DDoS与数据泄露的策略
Java服务端开发中的网络安全:防护DDoS与数据泄露的策略 大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!在Java服务端开发中,网络安全是我们必须重点关注的领域,…...
CodeMeter 8.20AxProtector 11.50版本更新
CodeMeter是一款强大的软件保护和许可管理工具,此次8.20版本更新引入了多个重要的新功能和优化,进一步提升了不同平台上的兼容性与使用体验。本次更新扩展了对CmCloudContainer的支持,优化了Python、Rust等语言的加密能力,并修复了…...
C语言在嵌入式系统中的应用有哪些?
C语言在嵌入式系统中的应用非常广泛,这主要得益于其高效的运行速度、优秀的代码优化能力以及丰富的函数库。以下是C语言在嵌入式系统应用中的几个关键方面: 1. 硬件直接访问能力 底层硬件操作:C语言提供了直接访问底层硬件的机制࿰…...
Android 系统WIFI AP模式
在 Android 系统中,AP 模式(Access Point Mode,热点模式)允许设备作为 Wi-Fi 热点,其他设备可以通过连接这个热点进行互联网访问或局域网通信。要让 Android 设备工作在 AP 模式,你可以通过应用层的 API 控…...
java jdk8内存序列化为xml
在Java JDK 8中,将对象内存序列化为XML格式,可以使用JAXB(Java Architecture for XML Binding),它是JDK 8的一部分,并且被广泛用于Java对象与XML之间的转换。以下是一个使用JAXB在JDK 8中将Java对象序列化为…...

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

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

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

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

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

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

智谱清影 - CogVideoX-2b-部署与使用
🍑个人主页:Jupiter. 🚀 所属专栏:Linux从入门到进阶 欢迎大家点赞收藏评论😊 目录 体验地址:[丹摩DAMODEL官网](https://www.damodel.com/console/overview) CogVideoX 简介本篇将详细介绍使用丹摩服务器部…...
python queue.Queue介绍
queue.Queue 是 Python 中的线程安全队列,适合用于多线程或多进程环境中进行任务和数据的共享。queue.Queue 提供了 FIFO(先进先出)队列的实现,并包含线程锁机制以保证在多线程环境下数据的安全性。 queue.Queue 的主要方法&…...
Qt 每日面试题 -3
21、static和const的使用 static : 静态变量声明,分为局部静态变量,全局静态变量,类静态成员变量。也可修饰类成员函数。 有以下几类∶ 局部静态变量 : 存储在静态存储区,程序运行期间只被初始化一次,作用域仍然为局部…...
TypeScript系列:第四篇 - typeof 与 keyof
在 TypeScript系列:第三篇 - 泛型 有提及 keyof 的使用。 本文将详细介绍 keyof 和 typeof 运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。 #mermaid-svg-bnMG6PMTxMI4iafc {font-family:"trebuchet ms",verdana,arial,sans-se…...

JDK8新增特性(值得收藏)
1.Lamdba表达式 就相当于要使用接口Lock就不需要再创建一个类去实现接口了,直接用Lambda表达式省略了在创建的那个类。 Lamdba表达式是什么? “->”,Lambda操作符或箭 头操作符,它将Lambda表达式分割为两部分。 左边:指Lam…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...