前端HTML+CSS基础
文章平均质量分 92
大家一起学习啊
AKA俄语人Лев
这个作者很懒,什么都没留下…
展开
-
自学前端第三天:html+css注意点
代码规范注意点:#(enter是隔行空行,enter+shift是直接空行)1.代码属性可以重复写,但不会有叠加效果,只会谁写在后面就实现谁的.2.p/li段落标签如果是借用父盒子长度,则宽度永远是跟着父盒子的原始width走,不会受padding+border影响而改变.3.写CSS样式的时候一定注意不要乱给"空格" , 特别是 ":冒号"前后 ,乱给空格样式就会失效. a:hover { }3.px没有零点几的说法,而em(1em就等于当前字号大小间距) 和 透明原创 2021-05-05 01:32:51 · 879 阅读 · 0 评论 -
Markdown编辑器使用说明
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-03-17 00:10:24 · 76 阅读 · 0 评论 -
LaTex的公式
LaTeX 是一种基于 ΤΕΧ 的排版系统,其中非常突出的是方便而强大的数学公式排版能力。XMind 2020 现已支持插入 LaTeX 数学命令,可实时转化为数学方程。此外还支持部分简单的化学方程,理工科的朋友们从此无需再借助其它应用,在 XMind 中即可完成方程的输入。今天和大家分享下在 XMind 中如何用 LaTeX 输入数学公式。1. 插入方程在「插入菜单」中找到方程,点击即可进入方程编辑界面。可手动输入或直接将方程复制黏贴到输入面板。输入完成后点击方程预览即可成功进行方程的插入。在方程输入面板原创 2021-03-04 22:48:35 · 656 阅读 · 1 评论 -
自学前端第一天:认识前端工程与网页
自我介绍列夫一个来自广东的fat boy前端的含义前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验网页&前端网页是构成网站的基础单元,是承载各种网站应用的平台。通俗地说,您每天通过浏览器甚至部分APP上网冲浪所看到的就是网页,网页主要由文字、图像、超链接、文本、多媒体等元素构成。前端开发是创建Web页面或app等转载 2021-03-16 23:55:10 · 207 阅读 · 0 评论 -
自学前端第二天:HTML基础知识提前汇总
「学习笔记」HTML基础「学习笔记」HTML基础前言 勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”,我的回答是:“初恋般的感觉”。或许笔记不一定十全十美,但肯定会让你有种初恋般的怦然心动。????????本章着重复习Html的基础内容,学习Html究竟要学些什么呢?主要是学习各种标签,来搭建网页的“结构”。✨✨本篇文章主要由五个章节构成,从WEB标准到初识HTML,接着学习HTML常用标签,最后学习表格列表和表单。????????开始充电转载 2021-05-05 00:47:43 · 438 阅读 · 0 评论 -
自学前端第四天:HTML基本标签(一)
课堂笔记6.3 HTML基础标签一、 新建html文件 并且通过vscode打开进行编辑和保存二、HTML文档文档版本 docType HTML1.0 HTML4.0 XHTML1.0 HTML5<!doctype html> 三.标签<TAG`>单标签 <!doctype html> / 双标签 </html’>HTML标签网页的大包围 整体网页内容的外衣 所有的网页文档内容都要写在 html标签内原创 2021-03-04 02:21:17 · 117 阅读 · 0 评论 -
自学前端第五天:HTML基础标签(二)
HTML标签:(HyperText Markup Language)一.html标签基本概念:1. HTML 标签是由尖括号包围的关键词,例如 <html>。2. HTML 标签通常是成对出现的:例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。3. 有些特殊的标签必须是单个标签(极少情况):例如 <br />,我们称为单标签。 二.html标签之间的关系:父子关系——嵌套关系兄原创 2021-05-05 00:46:27 · 267 阅读 · 0 评论 -
自学前端第六天:HTML基础标签(三)
HTML基础标签(二)一.了解什么是HTML文档流?1.文档流指的是元素在HTML页面布局中的位置顺序决定排布的过程, 主要的形式是自上而下(块级元素)一行接一行,每一行从左至右(行内元素)。主要是针对盒子模型来说的。2.HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.①内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对原创 2021-05-05 00:45:22 · 347 阅读 · 1 评论 -
自学前端第七天 :CSS样式表引入和基础选择器
一.CSS (Cascading Style Sheets) 层叠样式表引入CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性1.行内式(内联样式原创 2021-05-05 00:44:24 · 162 阅读 · 1 评论 -
自学前端第八天 :CSS字体样式
一.CSS字体样式基础属性1.font-size:字号大小font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:相对长度单位说明px像素单位 以像素点个数为基础 最常用的单位em相对于当前对象内文本的字体尺寸2.font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本原创 2021-05-04 02:46:30 · 618 阅读 · 1 评论 -
自学前端第九天 : CSS标准盒子模型
标准盒子模型(CSS重点)其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。1.前提了解:①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;}因为浏览器是默认使用CSS的stylesheet样式表的,而这个原创 2021-05-04 02:38:30 · 951 阅读 · 1 评论 -
自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */}怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度二.标准盒子和怪异盒子:1.标准模型下 宽度计算方式原创 2021-05-04 02:22:39 · 2512 阅读 · 2 评论 -
自学前端第十一天 :CSS盒子背景
复习关于盒子模型相关知识点补充说明(细节决定成败)高度样式设置auto图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算同行宽度问题一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度无法完整放入的元素会被挤下一行展示比如:一张图片 + 一段文字一起变为块元素,如果一段文字不设置宽度则默认继承父级body100%整行,就不可能和图片一起显示在一行中.(因此只能给p设置固定的宽度,除了图片外父级还剩多原创 2021-05-04 02:19:32 · 953 阅读 · 0 评论 -
自学前端第十二天 :页面小练习
小页面综合练习:(老师版)<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>homework 0612</title> <style> * {原创 2021-05-04 02:08:01 · 283 阅读 · 1 评论 -
自学前端第十三天 : CSS复合选择器和优先级
第十天:CSS复合选择器和优先级一.选择器综述(重点 )(1)选择器概念: 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。(2)选择器作用: 选择页面标签用的二.复习一下CSS基础选择器(五种)1.标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }原创 2021-05-04 01:57:16 · 710 阅读 · 1 评论 -
自学前端第十四天:垂直居中和文字溢出
一.vertical-align(文字垂直对齐图片方式)举例:这里文字对齐图片基线(默认基线,但会有间隙问题!)1.以前我们讲过让带有宽度的父子块级元素之间的盒子居中对齐,是margin: 0 auto;2.以前我们还讲过让块元素中的文字居中对齐,是 text-align: center;3.以前我们还讲过让块元素中的文字垂直对齐, 是让块元素中的text-aglin 等于自身高度即可,(img图片不行)4.现在来讲垂直居中:vertical-align 垂直对齐, 这个看上去很美好的一个属性,原创 2021-05-04 01:52:37 · 326 阅读 · 1 评论 -
自学前端第十五天:伪类伪元素和属性选择器和精灵图
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加)1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!)4.伪类语法结构:① 类选择器是一个点 比如 .demo {} ②而我们的伪类 用冒号 比如 类 :link{} a { /* a原创 2021-05-04 01:47:39 · 667 阅读 · 2 评论 -
自学前端第十六天:表格和input和textarea控件
一.表格 table (后期有UI/bootstrap组件辅助工具写)一.表格概念:就是一张为 横行纵列 多行多列的单元格表二.表格语法结构: (三层嵌套关系table>tr>td)<table> 表格 <tr> 行 <td>单元格内的文字</td> 单元格/列 ... </tr> ...</table>①tr 元素定义表格行(table row)②th 元素定义表头(原创 2021-05-04 01:37:44 · 962 阅读 · 0 评论 -
自学前端第十七天:CSS浮动float定位
学习浮动(float)CSS的定位机制有3种:普通流(标准流)、浮动和定位。1.标准文档流(normal flow)这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?html语言当中另外一个相当重要的概念----------标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局原创 2021-05-04 01:24:25 · 1511 阅读 · 0 评论 -
自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position)一.①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面, 那么 我们的position定位关键在于一个 “精准位” 上。②CSS定位目的上,如果说,浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是 移动位置, 让盒子到我们想要的"任意坐标"位置上去。③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样,原创 2021-04-30 01:39:38 · 1323 阅读 · 0 评论 -
自学前端第十九天:云道页面综合练习
CSS之 reset.css模板*{word-wrap:break-word}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}ul,ol,dl{list-style-type:none}html,body{*position:static}html{font-family: sans-...原创 2021-04-30 01:19:01 · 750 阅读 · 1 评论 -
自学前端第二十天:圆角border-radius属性和盒子阴影boxshadow和linear-gradient颜色渐变
一.css3 新增样式(美学特效)CSS3概念: 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式,利用css3 我们可以通过更少的代码实现更好的表现,很大程度上节省了JavaScript引擎的开销。二.border-radius 圆角属性①(一个PX值(最常用): 四个圆角值相同(4px , 8px ,50%全圆形,最常用))②(四个PX值(设置宽2高1上侧半圆最常用): heightPX, heightPX,0 ,0;原创 2021-04-30 01:04:05 · 1179 阅读 · 2 评论 -
自学前端第二十一天:transform2D变形 和 transition过渡
transform总结:①[transform对行内元素无效,对行内块元素或者块元素才有作用.(注意因此伪元素)①transform:让盒子在空间上有行为 , transition让盒子在时间上有长度.②transform的位移translateXY 和旋转rotate(30deg)使用在定位父级盒子上,则也是真的位移了,也会影响子元素绝对定位的开始定位的地方地方(也跟着父盒子transform后的位移位置开始绝对定位);③transform rotateX,Y,Z旋转到90度时是看不见线条的,无原创 2021-04-30 00:22:48 · 597 阅读 · 1 评论 -
自学前端第二十二天:perspective视觉
CSS之perspective详解语法(实际开发都是给perspective: 1000px;perspective: number | none;1.简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样。比如说, perspective:800px 意思就是,我在离屏幕800px 的地方观看这个元素。(这个属性,要设置在父元素上面)好了2.最后补充一点,这个perspective 属性呢,要放在父级身上,然后还有一个属性perspective-origin,这个属原创 2021-04-29 02:20:45 · 1225 阅读 · 2 评论 -
自学前端第二十三天:CSStransform3D形变
3D变换 transform3D1.浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间2.3D变形涉及的属性主要是①transform-origin:调整物体的旋转点,设置在当前子盒子上②transform:物体的变幻(平移,旋转,缩放,倾斜),设置在子盒子上[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxpHXZ5W-1619629397509)(C:\Users\tuyu原创 2021-04-29 02:19:36 · 295 阅读 · 0 评论 -
自学前端第二十四天:Animation动画栈帧效果
CSS3 帧动画 amimation @keyframesamimation 是transition过渡的高级升级版1.为什么要 amimation 一帧一帧的具体动画,因为transition进行单一型动画效果(且hover不点击时则会复原),而amimation@keyframes可以进行复合型(多帧)多运动的动画效果2.设置了amimation的盒子也是不脱离文档流的,除非变为绝对定位.3.amimation不会增加元素个数 , 而是可以很多段自定义的时间内让元素完成transform的各种形原创 2021-04-29 00:46:23 · 346 阅读 · 0 评论 -
自学前端第二十四天(二):旋转相框transform+perspective+animation综合项目
[利用perspective 和 transform 里面的几个参数来实现旋转照片墙]旋转照片墙首先,来看下,是什么效果吧,上效果图 ↓其实这个东西,很容易制作,先说下思路, 把照片都给叠在一起,然后 rotateY 旋转,给每张图片 旋转不一样的角度能构成一圈, 然后translateZ 出去就好了,最后一步,父级转起来。搭建好基本的 html 和 css ↓ 已经写好注释啦。[<!DOCTYPE html><html lang="en"><head>原创 2021-04-29 02:55:30 · 200 阅读 · 2 评论 -
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查:①路径那里是不是fonts文件夹的第一子路径就是全部的文件。②/+unicode编码 和 转义编码 有没有弄棍 (一个给content的,一个给html标签上的)③有没有引入@iconface的ont-family 和 具体引入属性 font-family。(两个 font-family)一.字体文件格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格原创 2021-03-17 01:29:29 · 773 阅读 · 0 评论 -
自学前端第二十六天:flex弹性盒子
CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵)1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这原创 2021-03-04 01:49:45 · 3099 阅读 · 1 评论 -
自学前端第二十六天:flex弹性盒子(二)
css3系列之弹性盒子 flex弹性盒子(伸缩盒)注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多搜索 弹性盒子的属性 ctrl + F 如果觉得图太小, ctrl + +键主要的属性有: (主要分两部分讲, 一部分讲 设置在父元素上的属性,一部分讲 设置在子元素上的属性, 还有最后一些简单的应用)flexflex-growflex-shrink (真实计算公式)flex-basisflex-directionflex-wrapalign-contentalign-i原创 2021-04-29 00:25:46 · 639 阅读 · 0 评论 -
自学前端第二十七天:CSS高级之兼容问题
CSS高级之兼容问题兼容处理不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅度降级, 渐进增强) 和两种 技巧(前缀兼容[这个可以用插件autoprefixer]与 HACK兼容[深入了解])一.邀请用户升级浏览器这种方式目前比较普遍 , 在用户通过老版浏览器登录网站的时候 通过服务判断用户 浏览器版本内核 从而返回升级页面. 省时省力 但是对用户不够友好meta强制解析模式x-ua-compatibl原创 2021-03-17 00:26:00 · 281 阅读 · 0 评论 -
自学前端第二十八天 CSS高级之BFC与变量
CSS OverflowCSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值:值描述visible默认值。内容不会被修剪,会呈现在元素框之外。hidden内容会被修剪,并且其余内容是不可见的。scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。原创 2021-03-13 01:09:44 · 127 阅读 · 0 评论 -
自学前端第二十九天 CSS高级之细节技巧
css高级细节技巧一.background-color :属性设置元素的背景颜色。定义和用法background-color 属性设置元素的背景颜色。元素背景的范围background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。transparent 值 (让背景色透明)尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素原创 2021-03-14 01:55:57 · 350 阅读 · 0 评论 -
总结前端面试题
1.菜鸟教程面试题(简易):https://www.runoob.com/w3cnote/front-end-development.html2.菜鸟教程面试题(苦难):https://www.runoob.com/w3cnote/front-end-developer-questions-and-answers.html面试有几点需注意:(来源寒冬winter 老师,github:@wintercn)面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。题目类型:原创 2021-05-05 00:48:27 · 168 阅读 · 0 评论