前端学习2——自学习梳理

1.HTML如何和CSS、JS关联呢

2.CSS语法(Css最重要的是:选择器和布局)

1.        index2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外部样式 --><link rel="stylesheet" href="css/index2.css"><!-- 内部样式 --><!-- <style>div{color:red;background-color: aquamarine;font-size: 30px;}</style> --></head>
<body><!-- 行内样式>内部样式=外部样式 --><!-- 行内样式 --><!-- <div style="color:red;background-color: aquamarine;font-size: 30px;">hello</div> --><div class="aaa">hello</div><div>hello</div> <div>hello</div><div>hello</div><p class="aaa">demo</p><p>demo</p><p>demo</p><span class="aaa">hello</span><span>demo666</span> <div><p>demo</p><h2><p>demo</p></h2></div><p>demo</p>
</body>
</html>

2.  index.css

/* div{color:red;background-color: aquamarine;font-size: 30px;
} *//* css语法 *//* 选择器 {属性: 值;属性1: 值1;
} *//* 选择器 *//* 1、元素选择器 用元素名称做选择*//* div {color: red;background: gray;font-size: 30px;
} *//* 2、 id选择器 根据元素的id值做选择*//* #test {color: red;background: gray;font-size: 30px;
} *//* 3、class选择器 根据元素的class值做选择 *//* .aaa{color:red;background-color: aquamarine;font-size: 30px;
} *//* 特例:结合选择器 *//* span.aaa {color: red;background: gray;font-size: 30px;
} *//* 4、包含选择器  selector1 selector2{} 强调包含*//* div p {color: red;background: gray;font-size: 30px;
} *//* 5、子选择器 selector1>selector2{}强调父子 *//* div>p {color: red;background: gray;font-size: 30px;
} *//* 6、选择器组合 selector1,selector2..{}*//* div,
span,
p {color: red;background: gray;font-size: 30px;
} *//* 选择全部 *  *//*
* {color: red;background: gray;font-size: 30px;
} 
*//* 布局 */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12 前端工程化

组件化 1. 组件化理解 就是将页面的某一部分独立出来&#xff0c;将这一部分的数据层&#xff08;M&#xff09;、视图层&#xff08;V&#xff09;和控制层&#xff08;C&#xff09;用黑盒的形式全部封装到一个组件内&#xff0c;暴露出一些开箱即用的函数和属性供外部调用。…

苹果笔记本电脑如何优化系统 苹果电脑系统优化软件哪个好 cleanmymac x怎么用

随着时间的推移&#xff0c;你可能会发现你的MacBook运行速度变慢&#xff0c;甚至在执行一些基本任务时也会感觉到卡顿。这不仅影响了工作效率&#xff0c;也大大降低了使用体验。但别担心&#xff0c;优化你的Mac系统比做早餐还简单。本文将用一种轻松的风格向你介绍7种简单易…

数据结构(1)(顺序表)

数据结构 数据结构 相互之间存在一种或多种特定关系的数据元素的集合。 逻辑结构 集合&#xff0c;所有数据在同一个集合中&#xff0c;关系平等。&#xff08;数组中的每一个int&#xff09; 线性&#xff0c;数据和数据之间是一对一的关系&#xff08;…

函数的介绍

目录 一、函数介绍 1、函数的介绍 2、自定义函数 3、函数的好处 二、函数的定义 1、函数的定义 2、函数的调用 3、快速入门案例 三、函数-调用机制 1、函数-调用过程 2、return语句 一、函数介绍 1、函数的介绍 1&#xff09;为了完成某一功能的程序指令(语句)的集…

【Postgres实战】Postgres的角色权限本地/在线不一致?

背景 Gin-Vue-Admin是开源的全栈开发平台&#xff0c;可以担任企业内部后台管理的职责。官网地址是&#xff1a;gin-vue-admin | GVA 文档站。上图为在线demo展示页面。 它的后台使用Golang&#xff08;The Go Programming Language (google.cn)&#xff09;&#xff0c;基于…

JSON 文件第一段飘红

问题 原因 这个问题通常发生在尝试用 ESLint 去解析 JSON 文件时。ESLint 主要设计用于检查 JavaScript 代码的语法和风格&#xff0c;而JSON是一种数据交换格式&#xff0c;不包含 JavaScript 的逻辑结构&#xff0c;如函数、变量声明等。 解释报错原因 当ESLint遇到它不能识…

让 AI 开发更高效、低成本,DigitalOcean 公布 GPU Droplet 云主机产品

全球知名云服务供应商 DigitalOcean 在近期举行的 Deploy 大会上公布了全新的 GPU Droplet 云主机服务&#xff0c;这标志着DigitalOcean 在支持AI和机器学习工作负载方面迈出了重要一步。 DigitalOcean 的 GPU Droplet&#xff08;云主机&#xff09; DigitalOcean 自 2023 …

【STM32嵌入式系统设计与开发拓展】——12_Timer(定时器中断实验)

目录 1、什么是定时器&#xff1f;定时器用于测量时间间隔&#xff0c;而计数器用于计数外部事件的次数 2、定时器的主要功能和用途&#xff1f;3、定时器类型&#xff1f;4、定时器的编写过程5、代码分析定时器计算&#xff1f; 1、什么是定时器&#xff1f; 定时器就是计数器…

正点原子STM32(基于HAL库)6

目录 TFTLCD&#xff08;MCU 屏&#xff09;实验TFTLCD 简介TFTLCD 简介液晶显示控制器FSMC 简介FSMC 关联寄存器简介 硬件设计程序设计FSMC 和SRAM 的HAL 库驱动程序流程图程序解析 下载验证 LTDC LCD&#xff08;RGB 屏&#xff09;实验RGBLCD<DC 简介RGBLCD 简介LTDC 简介…

力扣高频SQL 50题(基础版)第九题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第九题197. 上升的温度题目说明思路分析实现过程准备数据实现方式结果截图总结 力扣高频SQL 50题&#xff08;基础版&#xff09;第九题 197. 上升的温度 题目说明 Weather ---------------------- | Column Name…

深度学习实战笔记2实战Kaggle比赛:预测房价

此数据集由Bart de Cock于2011年收集 :cite:De-Cock.2011&#xff0c; 涵盖了2006-2010年期间亚利桑那州埃姆斯市的房价。 这个数据集是相当通用的&#xff0c;不会需要使用复杂模型架构。 它比哈里森和鲁宾菲尔德的波士顿房价 数据集要大得多&#xff0c;也有更多的特征。 1下…

数据结构之深入理解简单选择排序:原理、实现与示例(C,C++)

文章目录 一、简单选择排序原理二、C/C代码实现总结&#xff1a; 在计算机科学中&#xff0c;排序算法是一种非常基础且重要的算法。简单选择排序&#xff08;Selection Sort&#xff09;作为其中的一种&#xff0c;因其实现简单、易于理解而受到许多初学者的喜爱。本文将详细介…

El-Table 表格的表头字段切换

最近写了一个小功能&#xff0c;比较有意思&#xff0c;特此博客记录。 提出需求&#xff1a;需要表头字段变化&#xff0c;但是我在官网上的表格相关上查找&#xff0c;没有发现便捷方法。 于是我有两个想法&#xff1a;1.做三个不同的表格。2.做一个表格使用不同的表头字段。…

python如何调用matlab python package库matlab转python安装包调用使用简单示例

说明(废话) 之前没有进行python调用过matlab&#xff0c;前面用matlab engine for python可以通过调用matlab的源码文件的形式可以调用工程&#xff0c;但是这又有一个问题&#xff0c;就是在运行的时候必须提供python和matlab的全部源码 该文章是通过matlab源码转python pack…

cdp碳信息披露

在全球化日益加深的今天&#xff0c;环境保护和可持续发展已成为全球共识。企业作为经济社会的主体&#xff0c;其在环保领域的行动和决策不仅影响着自身的发展&#xff0c;更对整个社会乃至全球的生态环境产生深远影响。CDP&#xff08;Carbon Disclosure Project&#xff0c;…

很酷的仿真翻页书HTML源码,书本页面是加载的图片,基于JQuery实现的翻页特效,结合一些js插件,看起来很酷,在实现在线翻书项目。

仿真翻页书HTML源码https://www.bootstrapmb.com/item/14742 创建一个仿真的翻页书效果在HTML和CSS中可以通过多种方式实现&#xff0c;但通常这也会涉及到JavaScript&#xff08;或jQuery&#xff09;来处理交互和动画。以下是一个简单的示例&#xff0c;展示如何使用HTML、…

【Leetcode】十八、动态规划:不同路径 + 全1的最大正方形

文章目录 1、动态规划2、leetcode509&#xff1a;斐波那契数列3、leetcode62&#xff1a;不同路径4、leetcode121&#xff1a;买卖股票的最佳时机5、leetcode70&#xff1a;爬楼梯6、leetcode279&#xff1a;完全平方数7、leetcode221&#xff1a;最大正方形 1、动态规划 只能…

10KW级电机电流特性曲线推导及校验

1.首先进行数据拟合 2.拟合曲线依照电机参数标准化 30A处转差率应为6.6%。 3.全域电流对照表&#xff1a; 4.实际的电流年变化曲线&#xff08;因为电压不稳定&#xff09; 4.1 以日为单位的电流起伏 蓝色的部分标出了工作日的切换。 4.2 某个月的电流趋势图&#xff1a;

argon主题调整日记

前言 argon主题是一款由solstice23开发的一款简洁美观的WordPress主题&#xff0c;在使用过程中也发现了几个可以优化的点&#xff0c;在查阅主题文档无果后对其进行以下几点修改。 1、使用子主题 为了避免修改源文件而引起主题更新后修改丢失的问题&#xff0c;还是尽量使用子…

解决前端和后端时间不一致问题的实践指南

目录 前言为什么会出现时间不一致的问题通过配置解决时区问题 配置示例 示例代码实现 实体类控制器主程序应用类 验证配置效果总结 前言 造成前端和后端时间不一致的常见原因是时区差异。在后端代码中生成的时间可能是以系统默认时区&#xff08;如 UTC&#xff09;为基础的…