前端之html(二)加入css开篇(一)

1.lebal标签-增大点击范围

性别:<input type="radio" name="gender" id="man"><lebal for="man">男</lebal>

<lebal><input type="radio" name="gender" id="nv">女</lebal>

2.button按钮

<button type="submit或者reset或者button"></button>  (submit提交,reset重置,button一般配合JavaScript)

3.form标签:统一管理   (action是提交位置)

4.无语义标签

div与span,前者独占一行,后者不独占一行

5.字符实体

空格 &nbsp <:&li >:&gt

学习css:html文档呈现(美化内容)

1.一般放到<title标签>下,写<style></style>标签,标签选择器:必须存在html标签,类选择器:class='类名',通配符选择器*  (一般class配合css,id选择器2配合JavaScript)

2.color

3.文字大小

4.引入:

    <link rel="stylesheet" href="/namenode.css">

5.行内写法,直接在html标签夹style

6.画盒子  (字体大小font-site) (字体粗细font-weight)

7.行高:line-height  (px表示大小,直接加数字表示当前大小的倍数)

8.font复合属性  (是否倾斜,加粗,行高,字体)

9.文本缩进text-indent  (两格:2em)   文本对齐text-align   (例如center居中)   文本修饰线:text-decoration  (none没有,underline下划线)

10.复合选择器:选择器写法:父选择器 > 子选择器 { CSS 属性},父子选择器之间用 > 隔开。

定义:由 两个或多个基础选择器 ,通过不同的方式组合而成。
作用: 更准确、更高效 的选择目标元素(标签)。
< span >span 标签 </ span >
< div >
< span > 文字颜色是绿色 </ span >
</ div >
11. 后代选择器
后代选择器:选中某元素的 后代 元素。
选择器写法: 父选择器 子选择器 { CSS 属性},父子选择器之间用 空格 隔开
< style >
div span {
color : red;
}
</ style >
< span > span 标签 </ span >
< div >
< span > 这是 div 的儿子 span </ span >
</ div >
12 伪类选择器
伪类选择器:伪类表示元素 状态 ,选中元素的某个状态设置样式。
鼠标悬停状态:选择器 :hover { CSS 属性 }
< style >
a :hover {
color : red;
}
.box:hover {
color : green;
}
</ style >
< a href = "#" > a 标签 </ a >
< div class = "box" > div 标签 </ div >
注意:CSS 特性
CSS特性:化简代码 / 定位问题,并解决问题继承性,层叠性 , 优先级

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

记一次:Clickhouse同步mysql数据库

ClickHouse可以通过使用MaterializeMySQL引擎来实现与MySQL的数据同步。 前言&#xff1a;因为数据量比较大&#xff0c;既然要分库&#xff0c;为何不让clickhouse同步一下mysql数据库呢&#xff1f; 零、前期准备--mysql的查询和配置 1 查询mysql的配置状态 查询以下语句…

Rust 力扣 - 1984. 学生分数的最小差值

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 原数组 nums 排序&#xff0c;遍历nums中下标为[0, nums.len() - k]的学生分数 假设当前遍历的下标为i则&#xff0c;以 i 下标为最小值的学生分数的最小差值为nums[i k - 1] - nums[i] 取最小差值的最小值即…

10个领先的增强现实平台【AR】

增强现实 (AR) 被描述为一种通过计算机生成的内容增强现实世界的交互式体验。 使用软件、应用程序和硬件&#xff08;例如 AR 眼镜&#xff09;&#xff0c;AR 能够将数字内容叠加到现实环境和物体上。早在 2024 年&#xff0c;许多像 Apple 这样的公司就已进入 VR/AR 市场&am…

提高交换网络可靠性之端口安全配置

转载请注明出处 此实验为配置交换机端口安全&#xff0c;当非法设备接入接口时自动触发安全措施 1.查看PC1和PC2的MAC地址&#x1f447; 2.交换机改名为S1&#xff0c;同时启用端口安全 3.配置允许接入设备 4.设置违规处理方式&#xff1a;即违规则关闭端口 5.查看安全端口相关…

HTTP与HTTPS的区别

HTTP与HTTPS的区别 一、HTTP二、HTTPS三、区别 一、HTTP HTTP (HyperText Transfer Protocol)&#xff0c;即超文本运输协议&#xff0c;是实现网络通信的一种规范 在计算机和网络世界有&#xff0c;存在不同的协议&#xff0c;如广播协议、寻址协议、路由协议等等… 而HTTP…

Qt中的Model与View5: QStyledItemDelegate

目录 QStyledItemDelegate API 重载公共函数 保护函数 重载保护函数 当在 Qt 项目视图中显示模型数据时&#xff0c;例如 QTableView&#xff0c;每个项目由代理绘制。此外&#xff0c;当项目被编辑时&#xff0c;提供一个编辑器小部件&#xff0c;该小部件在编辑时显示在项…

token无感刷新+处理并发的后端方案

问题描述&#xff1a; 当用户通过登陆后进入一个web网站&#xff0c;会把token保存到localStorage。假设token过期时间30min。 那么当用户在网站快乐地玩耍了30min后&#xff0c;这时进行了一次提交表单&#xff0c;它会被重定向到登陆页面。 作为用户&#xff1a;我表单填了…

VMware虚拟机Debian扩展磁盘

一、 版本 VMware&#xff1a;Workstation 17 Pro虚拟机&#xff1a;Debian11 二、 VMware虚拟机扩展 虚拟机关机状态快照或者备份&#xff1a;以免扩容失败导致文件丢失虚拟机——设置——硬盘——磁盘使用工具——扩展——扩展磁盘容量——设置为想要的大小 三、 虚拟机…

L1-2 什么是机器学习

L1-2 什么是机器学习 作者 陈越 单位 浙江大学 什么是机器学习&#xff1f;上图展示了一段面试官与“机器学习程序”的对话&#xff1a; 面试官&#xff1a;9 10 等于多少&#xff1f; 答&#xff1a;3 面试官&#xff1a;差远了&#xff0c;是19。 答&#xff1a;16 面试…

ssm基于WEB的人事档案管理系统的设计与实现+jsp

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 1 绪论 1 1.1 选题背景 1 1.2 选题意义 1 1.3 研究内容 2 2 系统开发技术 3 2.1 MySQL数据库 3 2.…

WireShark入门学习笔记

学习视频&#xff1a;WireShark入门使用教程 文章目录 WireShark介绍WireShark抓包入门操作WireShark过滤器使用WireShark之ARP协议分析WireShark之ICMP协议TCP连接的3次握手协议TCP连接断开的4次挥手协议WireShark抓HTTP协议黑客利用WireShark获取用户密码实战 WireShark介绍…

vue3中使用mqtt数据传输(封装)

使用版本 "mqtt": "^5.8.0",安装指令 npm install mqtt --save ------ yarn add mqtt介绍mqtt 参考使用文档 配置 connection: {protocol: "ws",host: "broker.emqx.io",port: 8083,endpoint: "/mqtt",clean: true,con…

《Baichuan-Omni》论文精读:第1个7B全模态模型 | 能够同时处理文本、图像、视频和音频输入

技术报告Baichuan-Omni Technical ReportGitHub仓库地址 文章目录 论文摘要1. 引言简介2. 训练2.1. 高质量的多模态数据2.2. 多模态对齐预训练2.2.1. 图像-语言分支2.2.2. 视频语音分支2.2.3. 音频语言分支2.2.4. 图像-视频-音频全方位对齐 2.3. 多模态微调监督 3. 实验3.1. 语…

计算机的一些基础知识

文章目录 编程语言 程序 所谓程序&#xff0c;就是 一组指令 以及 这组指令要处理的数据。狭义上来说&#xff0c;程序对我们来说&#xff0c;通常表现为一组文件。 程序 指令 指令要处理的数据。 编程语言发展 机器语言&#xff1a;0、1 二进制构成汇编语言&#xff1a;…

苏州金龙新V系客车创新引领旅游出行未来

10月25日&#xff0c;为期三天的“2024第六届旅游出行大会”在风景秀丽的云南省丽江市落下帷幕。本次大会由中国旅游车船协会主办&#xff0c;全面展示了中国旅游出行行业最新发展动态和发展成就&#xff0c;为旅游行业带来全新发展动力。 在大会期间&#xff0c;备受瞩目的展车…

【重生之我要苦学C语言】深入理解指针4

深入理解指针4 字符指针变量 指针指向字符变量 char ch w; char* p &ch;指针指向字符数组 char arr[10] "abcdef"; char* p arr;printf("%s\n", arr); printf("%s\n", p);结果是一样的 也可以写成&#xff1a; char* p "abc…

Java | Leetcode Java题解之第525题连续数组

题目&#xff1a; 题解&#xff1a; class Solution {public int findMaxLength(int[] nums) {int maxLength 0;Map<Integer, Integer> map new HashMap<Integer, Integer>();int counter 0;map.put(counter, -1);int n nums.length;for (int i 0; i < n;…

Docker部署学习

目录 前言 一、实验环境准备 二、Docker常见命令 三、Docker数据卷 四、Docker自定义镜像 五、Docker网络相关 六、Docker项目部署实践 七、Docker知识追问强化 前言 1. Docker是用以项目上线部署的工具 2. Docker并不会很难&#xff0c;只要你跟着将所有的命令敲一遍…

二叉树和堆

目录 1.二叉树的概念及结构 1.1概念 1.2特殊的二叉树 1.3二叉树的性质 1.4二叉树的存储结构 2.二叉树的顺序结构及实现&#xff08;堆&#xff09; 2.1二叉树的顺序结构 2.2堆的概念及结构 2.3堆的实现 2.3.1堆的插入 2.3.2堆的删除 2.3.3 Heap.h 2.3.4 Heap.c 2.…

linux驱动-输入子系统框架分析

接下来&#xff0c;来分析三个结构体 打开这个文件drivers\input\evdev.c 第一步&#xff1a;要找到它的入口函数evdev_init 看到了&#xff0c;入口的位置注册了一个 input_handler&#xff0c;并且对里面的值完成赋值&#xff0c;和之前学习&#xff0c;我自己注册platform驱…