![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
一只老黄牛
这个作者很懒,什么都没留下…
展开
-
026-盒模型
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒模型</title> <style> .box1{ /* 内容区(content);元素的所有的子元素和文本内容都在内容区中排列原创 2021-02-01 10:22:25 · 55 阅读 · 0 评论 -
035-行内元素的盒模型
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>行内元素的盒模型</title> <style> .s1 { background-color: yellow; /* 行内元素的盒模型原创 2021-01-31 22:53:01 · 117 阅读 · 0 评论 -
034-外边距的折叠
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>外边距的折叠</title> <style> .box1, .box2 { width: 200px; height: 200px; font-size:原创 2021-01-31 22:52:30 · 45 阅读 · 0 评论 -
033-盒子模型的水平布局
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型的水平布局</title> <style> .outer { width: 800px; height: 200px; border: 10px solid red原创 2021-01-31 22:51:57 · 61 阅读 · 0 评论 -
032-盒子模型的垂直布局
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型的垂直布局</title> <style> .outer { background-color: #bfa; height: 600px; /*原创 2021-01-31 22:51:24 · 65 阅读 · 0 评论 -
031-盒子模型的垂直布局
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型的垂直布局</title> <style> .outer{ background-color: #bfa; height: 600px; /*原创 2021-01-30 23:56:52 · 70 阅读 · 0 评论 -
030-盒子模型的水平布局
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型的水平布局</title> <style> .outer { width: 800px; height: 200px; border: 10px solid red原创 2021-01-30 22:53:40 · 91 阅读 · 0 评论 -
029-盒子模型(外边距)
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒子模型-外边距</title> <style> .box1 { width: 200px; height: 200px; background-color: #bfa;原创 2021-01-30 18:23:27 · 67 阅读 · 0 评论 -
028-盒子模型(内边距)
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒模型-内边距</title> <style> .box1 { width: 200px; height: 200px; background-color: #bfa;原创 2021-01-30 18:22:55 · 55 阅读 · 0 评论 -
027-盒子模型(边框)
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>盒模型-边框</title> <style> .box1 { width: 200px; height: 200px; background-color: #bfa;原创 2021-01-30 18:22:16 · 63 阅读 · 0 评论 -
025-单位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单位</title> <style> html{ font-size: 20px; } /* 长度单位: 像素原创 2021-01-30 15:53:52 · 84 阅读 · 0 评论 -
024-文档流
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>文档流</title> <style> .box1{ width: 100px; background-color: yellow; } .box2{原创 2021-01-29 22:59:40 · 48 阅读 · 0 评论 -
023-颜色
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>颜色</title> <style> div{ width: 100px; height: 100px; /* 颜色单位:原创 2021-01-29 22:59:08 · 155 阅读 · 0 评论 -
022-选择器的权重
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>选择器的权重</title> <style> /* 样式的冲突 - 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突原创 2021-01-29 22:58:18 · 64 阅读 · 0 评论 -
021-样式的继承
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>样式的继承</title> <style> /* body{ font-size: 12px; } */ /* 样式的继承,我们为元素设置的样式同时也会应用到它的后原创 2021-01-29 22:57:32 · 45 阅读 · 0 评论 -
020-伪元素选择器
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> p{ font-size: 20px; } /* 伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)原创 2021-01-29 22:56:50 · 41 阅读 · 0 评论 -
019-a元素的伪类
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>a元素的伪类</title> <style> /* :link 用来表示没访问过的链接(正常的链接) */ a:link{ color: red; .原创 2021-01-29 22:56:06 · 140 阅读 · 0 评论 -
018-伪类选择器
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /* 将ul里的第一个li设置为红色 */ /* 伪类(不存在的类,特殊的类) -原创 2021-01-29 22:55:24 · 83 阅读 · 0 评论 -
017-属性选择器
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* [属性名] 选择含有指定属性的元素 [属性名 = 属性值] 选择含有指定属性和属性值的元素 [属性名 ^= 属性值] 选择原创 2021-01-29 22:53:28 · 44 阅读 · 0 评论 -
016-关系选择器
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>关系选择器</title> <style> /* 为div的子元素span设置一个字体颜色红色 (为div直接包含的sapn设置一个字体颜色) 子元素选择器原创 2021-01-29 22:52:51 · 54 阅读 · 0 评论 -
015-复合选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>复合选择器</title> <style> /* 将class为red的元素设置为红色(字体) */ .red{ color: red; } /* 将class为red的d原创 2021-01-29 22:52:15 · 65 阅读 · 0 评论 -
013-CSS语法结构
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>CSS语法结构</title> <style> /* CSS中的注释,注释中的内容会自动被浏览器所忽略 CSS的基本语法: 选择器 声明块原创 2021-01-28 16:33:29 · 61 阅读 · 0 评论 -
012-CSS关联样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS关联样式</title> <!-- 第二种方式(内部样式表) - 将样式编写到head中的style标签里 然后通过CSS的选择器来选中元素并为其设置各种颜色原创 2021-01-28 16:31:18 · 316 阅读 · 0 评论 -
011-音视频
音视频原创 2021-01-28 14:53:17 · 114 阅读 · 0 评论 -
010-内联框架
内联框架 Hello原创 2021-01-28 14:52:47 · 46 阅读 · 0 评论 -
009-图片
图片原创 2021-01-28 14:52:07 · 105 阅读 · 0 评论 -
008-超链接
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>超链接</title></head><body> <!-- 超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他位置 使用a标签来定义超链接 属性:原创 2021-01-15 11:40:21 · 265 阅读 · 0 评论 -
007-列表
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>列表</title></head><body> <!-- HTML中的列表一共有3种: 1. 有序列表 2. 无序列表 3. 定义列表 无序列表,使用ul标签来创建无原创 2021-01-15 11:39:16 · 65 阅读 · 0 评论 -
006-布局标签(结构语义化标签)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>布局标签(结构语义化标签)</title></head><body> <!-- header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网原创 2021-01-15 11:35:56 · 137 阅读 · 0 评论 -
005-块元素、行内元素
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>块元素、行内元素</title></head><body> <!-- 块元素(block element) - 在网页中一般通过块元素来对页面进行布局 行内元素(inline elem原创 2021-01-15 11:34:29 · 43 阅读 · 0 评论 -
004-mate标签、p标签
<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <!-- keywords表示网站的关键字,可同时指定多个关键字 --> <meta name="keywords" content="HTML,CSS,前端"> <!-- description 用于指定网站的描述 --> <meta name="des原创 2021-01-15 11:33:09 · 151 阅读 · 0 评论 -
003-HTML简介
一、HTMLHyperText Markup Language ,超文本标记语言—超文本:只有文本;—标记:标识出网页中不同的内容。<html> <head> <title>这是我的第一个网页</title> </head> <body> <h1>内容</h1> <!-- 标签一般成对出现,但也存在自结束标签 <img/> <input/>原创 2021-01-09 20:07:12 · 109 阅读 · 0 评论 -
002-前端基础框架
一、第一个网站:http://info.cern.ch/hypertext/WWW/TheProject.html二、浏览器和网页—浏览器:负责将网页渲染成我们想要的样子;—网页:前段工程师负责编写网页的源代码。三、万维网联盟为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果。根据W3C标准,一个网页主要由三部分组成:结构(HTML)、行为(CSS)、和行为(JavaScript)。—结构:HTML用于描述页面的结构;—表现:CSS用于控制页面中元素的样式;—行为:Jav原创 2021-01-06 10:32:32 · 91 阅读 · 0 评论 -
001-前端基础简介
一、软件的分类系统软件:Windows、Linux、MacOS应用软件:office、WPS游戏软件:绝地求生、王者荣耀二、客户端与服务器通常情况下,现在的软件由2部分组成:---客户端:用户通过客户端来使用软件;---服务器:负责在远程处理业务逻辑。三、语言服务器开发的语言:Java、Node.js四、客户端形式---文字客户端:古老的方式,通过命令行的方式来使用软件;---图形化界面:通过点击拖动等来使用软件。Windows、MacOS、Android、IOS中的原创 2021-01-05 17:30:38 · 101 阅读 · 0 评论