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

网站优化有哪些/宁波优化网站哪家好

news 文章来源：https://blog.csdn.net/weixin_62588253/article/details/129367270 2025/3/10 14:54:52
网站优化有哪些,宁波优化网站哪家好,营销型网站建设目的和意义,电子商务网站建设与维护试卷🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简…
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS概念，语法规范，代码风格等等，作为CSS入门必备知识。知识学习内容来自b站的@黑马程序员的视频

😃0 什么是CSS

名称：CSS是层叠样式表的简称，别称是CSS样式表或者级联样式表。

使用场景

美化网页，布局网页。具体就是设置HTML中的文本内容（字体，大小，对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

作用：让HTML专注结构呈现，使得结构和样式分离。

语法规则

CSS语法由两部分组成：选择器和一条或多条声明（键值对形式，属性是对象设置的样式属性，如字体的大小，文本的颜色等。两者用英文":"分割，多个声明用英文";"分割）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>
</head>
<body><p>有点意思</p>
</body>
</html>

代码风格

1）样式风格书写

紧凑型

<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>

展开型（强烈推荐）

<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>

2）样式大小写风格

一般都推荐小写字母，全部用小写

3）样式空格风格

属性值前面，冒号后面保留一个空格；选择器和大括号中间保留空格

😃1 CSS基础选择器

作用

选择器就是根据不同需求把不同的标签选出来，即选择标签。具体看以下例子：

把div里面的文字改成红色
把第一个div里面的文字改成红色
把ul里的li标签的文字改成红色

分类

选择器分为基础选择器和复合选择器

基础选择器

标签选择器

是指用html标签名称作为选择器，为页面中某一类标签指定统一的CSS样式。

语法
标签名 {
属性: 属性值;
属性: 属性值;
属性: 属性值;
......
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: green;}div {color: pink;}</style>
</head>
<body><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>
</body>
</html>

优点：把某一类标签全部选择出来

缺点：不能个性化设计

类选择器

用于单独选一个或某几个标签

语法：
.类名 {
属性1: 属性值1;
......
}
标签中使用class属性调用对应的类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;font-size: 12px;}</style>
</head>
<body><ul><li class="red">喜洋洋</li><li>美羊羊</li><li class="red">懒羊羊</li><li>慢羊羊</li></ul><div class="red">我是迪迦</div>
</body>
</html>

注意

类名不要用已经存在的标签名称（div，p等等），自己取名字

名字过长用-短横线连接

一些常用命名规则

头：header
内容：content；container
导航：nav
页面主体：main
菜单：menu
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 100px;height: 100px;/* 背景颜色 */background-color: red;}.green {width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="red">红色</div><div class="green">绿色</div><div class="red">红色</div>
</body>
</html>

多类名

给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签

使用方式：在类属性中用空格隔开多个类名

使用场景：方便统一修改，如果有多个属性值一样，就可以提取出作为一个单独的类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;}.red {/* 背景颜色 */background-color: red;}.green {background-color: green;}</style>
</head>
<body><div class="box red">红色</div><div class="box green">绿色</div><div class="box red">红色</div>
</body>
</html>
id选择器

为特有id的html元素指定样式

语法：
#id名 {
属性：属性值;
}

与类选择器的区别：只能调用一次，其他标签无法调用。经常和js搭配使用。类选择器在修改样式中使用的最多。

通配符选择器
语法：
* {
属性：属性值;
}

把HTML页面中所有元素（标签）进行修改；并且不需要调用，会自动使用。在特殊情况（后面进一步学习后）使用

基础选择器总结

基础选择器

作用

特点

使用情况

用法

标签选择器

选出某一类所用标签

不能差异化选择

较多

p {color: red;}

类选择器

可以选出1个或多个不同类型的标签

可以根据需求选择

非常多

.nav {color: red;}

id选择器

一次只能选择一个标签

在一个HTML页面中只能出现一次

一般和js搭配使用

#nav {color: red;}

通配符选择器

选择所有标签

选择的太多

特殊情况使用

相关文章：

认识CSS之基础选择器

&#x1f31f;所属专栏&#xff1a;前端只因变凤凰之路&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该系列将持续更新前端的相关学习笔记&#xff0c;欢迎和我一样的小白订阅&#xff0c;一起学习共同进步~&#x1f449;文章简…...

编程日记 2023/5/7 2:52:42

JavaScript面试题整理汇总

1、面试官&#xff1a;说说JavaScript中的数据类型&#xff1f;存储上的差别&#xff1f;在JavaScript中&#xff0c;我们可以分成两种类型&#xff1a;基本类型和复杂类型。两种类型的区别是&#xff1a;存储位置不同基本类型主要为以下6种&#xff1a;NumberStringBooleanUnd…...

编程日记 2023/5/7 2:52:40

科普| 什么是云原生？

“新冠疫情从根本上改变了商业模式&#xff0c;工作流向在线迁移的速度比以往任何时候都要快。越来越多的公司和消费者依靠电子商务“ B2B”和B2C”&#xff0c;以及网上银行促进创新以满足日益增长的客户需求&#xff0c;云原生技术在其中发挥重要作用&#xff0c;同时也加速了…...

编程日记 2023/5/6 11:35:42

Spring Boot 3.0系列【9】核心特性篇之依赖管理

有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot版本3.0.3 源码地址：https://gitee.com/pearl-organization/study-spring-boot3 文章目录 前言依赖管理1. dependencyManagement、parent2. spring-boot-starter-parent3. spring-boot-dependencies4. 实际开发中的…...

编程日记 2023/5/7 2:52:38

每日算法题

目录 第一题 第二题 第一题 题目描述 小蓝要为一条街的住户制作门牌号。 这条街一共有 20202020 位住户&#xff0c;门牌号从 11 到 20202020 编号。 小蓝制作门牌的方法是先制作 00 到 99 这几个数字字符&#xff0c;最后根据需要将字符粘贴到门牌上&#xff0c;例如门牌…...

编程日记 2023/5/6 11:35:40

xss靶场绕过

目录 第一关 原理 payload 第二关 原理 payload 第三关 原理 payload 第四关 原理 payload 第五关 原理 payload 第六关 原理 payload 第七关 原理 payload 第八关 原理 payload 第九关 原理 payload 第十关 原理 payload 第十一关 原理 payl…...

编程日记 2023/5/6 17:42:53

【数据结构】核心数据结构之二叉堆的原理及实现

1.大顶堆和小顶堆原理 什么是堆 堆&#xff08;Heap&#xff09;是计算机科学中一类特殊的数据结构&#xff0c;通常是一个可以被看作一颗完全二叉树的数组对象。 完全二叉树 只有最下面两层节点的度可以小于2&#xff0c;并且最下层的叶节点集中在靠左连续的边界 只允许最后…...

编程日记 2023/5/6 17:42:51

Spring Cloud Alibaba+saas企业架构技术选型+架构全景业务图 + 架构典型部署方案

基于Spring Cloud Alibaba 分布式微服务高并发数据平台化(中台)思想多租户saas设计的企业开发架构&#xff0c;支持源码二次开发、支持其他业务系统集成、集中式应用权限管理、支持拓展其他任意子项目。 一、架构技术选型 核心框架 Spring Boot SOA Spring Cloud …...

编程日记 2023/5/6 17:42:48

RocketMQ-03

1. 高级功能 1.1 消息存储 分布式队列因为有高可靠性的要求&#xff0c;所以数据要进行持久化存储。 消息生成者发送消息MQ收到消息&#xff0c;将消息进行持久化&#xff0c;在存储中新增一条记录返回ACK给生产者MQ push 消息给对应的消费者&#xff0c;然后等待消费者返回A…...

编程日记 2023/5/6 17:42:46

大神教你在 Linux 中查看你的时区

在这篇短文中&#xff0c;我们将向你简单介绍几种 Linux 下查看系统时区的简单方法。在 Linux 机器中&#xff0c;尤其是生产服务器上的时间管理技能&#xff0c;是在系统管理中一个极其重要的方面。Linux 包含多种可用的时间管理工具&#xff0c;比如 date 或 timedatectlcomm…...

编程日记 2023/5/6 17:42:43

Redis持久化策略

Redis有两种持久化方式：快照(snapshotting，或者叫Redis DataBase，RDB)和只追加文件(append-only,AOF)。两种方式可以单独使用，也可以同时使用。 1.RDB模式 RDB：将某时刻所有数据都写入到硬盘里，存储为.rdb快照文件，新的快照文件生成之后会替换旧的快照文件。用户可以将…...

编程日记 2023/5/5 19:47:44

显著性检验【t-test、方差分析、ks检验】

显著性检验【t-test、方差分析、ks检验】 0、目录 1显著性检验基本定义&#xff08;what&#xff1f;&#xff09; 2.使用显著性检验的意义&#xff08;why? &#xff09; 3.显著性检验的具体操作流程&#xff08;how? &#xff09; 1、显著性检验基本定义 统计假设检验…...

编程日记 2023/5/6 17:42:41

访问学者在德国访学生活衣食住行攻略

德国因其优质的教育水平、高价值的学制、低廉的访学成本&#xff0c;逐渐成为访学领域的宠儿。对于初次来到德国生活的访问学者&#xff0c;一定不是很熟悉德国的真实生活情况。今天51访学网小编就给大家介绍德国访学学衣食住行&#xff0c;希望可以帮助到即将出国的你。 一、…...

编程日记 2023/5/6 17:42:38

SQL-刷题技巧-删除重复记录

一. 原题呈现 牛客 SQL236. 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 描述&#xff1a; 删除emp_no重复的记录&#xff0c;只保留最小的id对应的记录。 drop table if exists titles_test; CREATE TABLE titles_test (id int(11) not null primary key…...

编程日记 2023/5/6 17:42:33

基于JSP的虚拟账号交易平台

技术&#xff1a;Java、JSP等摘要&#xff1a;随着网络游戏以及各种平台的出现与更新&#xff0c;虚拟账号交易平台正逐渐成为电商的新增长点。当今社会&#xff0c;互联网发发展飞速&#xff0c;游戏产业也渐渐兴起&#xff0c;随之虚拟游戏账号的交易量逐渐增多&#xff0c;但…...

编程日记 2023/5/6 17:42:31

LeetCode201_201. 数字范围按位与

LeetCode201_201. 数字范围按位与 一、描述 给你两个整数 left 和 right &#xff0c;表示区间 [left, right] &#xff0c;返回此区间内所有数字 按位与 的结果&#xff08;包含 left 、right 端点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;left 5, right 7 输…...

编程日记 2023/5/6 17:42:28

一款好的风险管理软件可以做什么

风险管理软件哪个好&#xff1f;使用Zoho Projects易于使用的项目风险管理软件&#xff0c;最大限度地减少收入损失并快速调整您的投资组合&#xff0c;保护您的项目投资。Zoho Projects的高级风险管理软件可在您最需要的时候安全的保护您的业务。使用Zoho Projects强大的风险管…...

编程日记 2023/5/6 17:42:26

html2canvas使用文档

一、安装 Install NPM npm install --save html2canvasInstall Yarn yarn add html2canvas二、引入 import html2canvas from html2canvas;三、使用 以 vue 举例&#xff0c;这样写起来比较方便 <div ref"picture"><h4>Hello world!</h4> &l…...

编程日记 2023/5/6 17:42:21

HTML DOM 改变 CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式&#xff0c;请使用这个语法&#xff1a;document.getElementById(id).style.propertynew style 下面的例子会改变 <p> 元素的样式&#xff1a;实例<html><body><…...

编程日记 2023/5/6 17:42:18

基于EB工具的TC3xx_MCAL配置开发01_WDG模块配置介绍

目录 1.概述2. WDG 配置2.1 General部分配置2.2 WdgSettingsConfig配置2.2.1 配置概述2.2.2 CPU WDG具体配置2.3 WdgDemEventParameterRefs3. WDG配置注意事项1.概述 本篇开始我们基于EB Tresos工具对英飞凌TC3xx系列MCU的MCAL开发进行介绍，结合项目经验对各MCAL外设的开发及…...

编程日记 2023/5/6 17:42:16

Activty启动到显示的过程[二]

Activity的显示从handleResumeActivity()方法开始。 //ActivityThread.javaOverridepublic void handleResumeActivity(IBinder token, boolean finalStateRequest, boolean isForward,String reason) {final ActivityClientRecord r performResumeActivity(token, finalStat…...

编程日记 2023/5/6 17:42:13

ubuntu 18.04.06LST安装R4.0+版本报错及解决过程

1. sudo apt-get update无法正常使用 错误:13 http://ppa.launchpad.net/webupd8team/sublime-text-3/ubuntu bionic Release 404 Not Found [IP: 2620:2d:4000:1::3e 80] 解决措施&#xff1a;删除 webupd8team/sublime-text-3这个ppa文件。 sudo add-apt-repository --…...

编程日记 2023/5/6 17:42:11

数据湖架构Hudi（五）Hudi集成Flink案例详解

五、Hudi集成Flink案例详解 5.1 hudi集成flink flink的下载地址&#xff1a; https://archive.apache.org/dist/flink/ HudiSupported Flink version0.12.x1.15.x、1.14.x、1.13.x0.11.x1.14.x、1.13.x0.10.x1.13.x0.9.01.12.2 将上述编译好的安装包拷贝到flink下的jars目录…...

编程日记 2023/5/6 17:42:07

【Java学习笔记】9.Java 循环结构 - for, while 及 do...while

Java 循环结构 - for, while 及 do…while 顺序结构的程序语句只能被执行一次。 如果您想要同样的操作执行多次&#xff0c;就需要使用循环结构。 Java中有三种主要的循环结构&#xff1a; while 循环do…while 循环for 循环 在 Java5 中引入了一种主要用于数组的增强型 f…...

编程日记 2023/5/6 17:42:05

【面向对象初步】之面向对象VS面向过程

面向对象（ObjectorientedProgramming，OOP）编程的思想主要是针对大型软件设计而来的。面向对象编程使程序的扩展性更强、可读性更好，使的编程可以像搭积木一样简单。 面向对象编程将数据和操作数据相关的方法封装到对象中，组织代码和数据的方式更加接近人的思维，从而大大提…...

编程日记 2023/5/6 17:42:02

原型链(回顾)

概念prototype__proto__原型链查找机制万物皆对象判断私有/共有属性方法Object.prototype.prototype nullObject.create(proto, [propertiesObject])给类的原型上扩展属性方法的4种方法Fn.prototype.xxx xxxObject.prototype.xxx xxxf1.proto.xxx xxx原型重定向 概念 原型…...

编程日记 2023/5/6 17:41:59

DS内排—2-路归并排序

目录 题目描述 AC代码 题目描述 输入一组字符串&#xff0c;用2-路归并排序按字典顺序进行降序排序。 输入 测试次数t 每组测试数据&#xff1a;数据个数n&#xff0c;后跟n个字符串&#xff0c;字符串不含空格。 输出 对每组测试数据&#xff0c;输出2-路归并排序的每…...

编程日记 2023/5/6 17:41:57

深度账户抽象(Account Abstraction)第 3 部分：Wallet创建

Wallet创建 我们还没有解决的是每个用户的钱包合约最初是如何在区块链上结束的。部署合约的“传统”方式是使用 EOA 发送包含合约部署代码的且没有收件人的交易。这在这里会非常令人不满意，因为我们刚刚做了很多工作来实现它，所以有人可以在没有 EOA 的情况下与链交互。如果用…...

编程日记 2023/5/6 17:41:55

代码分享：面波数据快速成图

代码分享&#xff1a;面波数据快速成图 前言 目前&#xff0c;物探数据主要用surfer软件成图&#xff0c;surfer软件具有强大的插值和绘图功能&#xff0c;成图比较美观。但是&#xff0c;生产过程中大量的物探数据&#xff0c;依靠excel和surfer来成图耗费人力时间成本。本博…...

编程日记 2023/5/6 17:41:53

常见数据结构

一. 数据结构概述、栈、队列 1. 数据结构概述 2. 栈数据结构的执行特点 3. 常见数据结构之队列 二. 常见数据结构之数组 数组它就是内存中的一块儿连续区域。数组变量存的是数组在堆内存当中的起始地址。数组查询任意索引位置的值耗时相同&#xff0c;数组根据索引查询速度快。…...

编程日记 2023/5/6 17:41:50