WEB前端
关注
分享
扫一扫
文章平均质量分 76
个人学习笔记记录，HTML CSS JS 等。时间有限，内容仅简单整理，有很多不足，仅供参考。
Herk (ง •̀_•́)ง
工大小学生
展开
-
一、HTML 速览—— VSCode 插件配置教程 HTML 的初步认识
本WEB前端快速通关系列，分为三大板块：HTML CSS JavaScripts，持续更新。目录VSCode安装配置常用快捷操作HTML骨架分析VSCode安装配置1.安装VSCode：官方下载地址推荐使用VSCode，免费，轻量，插件多。2.安装常用插件：HTML CSS Support：CSS的智能感知。 Live Server：可以跳转至浏览器实时预览网页。open in browser需要手动刷新，不推荐。 HTML Preview：可以直接在VSCode内实时原创 2022-02-10 14:11:52 · 4431 阅读 · 0 评论 -
二、HTML 速览——常用标签的使用及演示
1.文本与markdown等标记语言一样，HTML源码中多个空格在浏览器显示时只显示一个空格，需显示多个空格可在源码中敲入多个 “ ” 即可。 从中可证实，HTML的本文段落格式等通常由各标签定义，这也是文本标记的含义。段落文本标签 标签 英文全称 作用 例子(点击图片查看) <h2> header 标题，h1标签通常存网页logo <p> paragraph 标签包裹的内容...原创 2022-02-10 15:07:52 · 429 阅读 · 0 评论 -
三、HTML 速览—— HTML5
HTML5HTML(HyperText Mark-up Language)通常指HTML4.01XHTML(Extensible HyperText Mark-up Language)是XML风格的更严格的HTML4.01，是HTML4。01的过渡版HTML5是HTML4.01的升级版HTML5特性：标签不区分大小写，但是实际开发中建议小写形式属性值可以不加引号，但是建议加，单引号双引号均可部分属性的属性值可以忽略，如checked、readonly等HTML5新增标签：原创 2022-02-10 22:39:59 · 471 阅读 · 0 评论 -
一、CSS 速览—— 基本了解
1.CSS 基础概念样式：文字样式、盒模型的样式布局：辅助页面布局，完成HTML不能完成的功能，如并排显示，精确定位显示。前端三层结构层：HTML从语义的角度进行网页结构的搭建样式层：CSS从美观的角度修饰页面样式交互层：JS从交互的角度描述页面的行为2.CSS的常用样式属性文字属性：color, font-size, font-familycolor可为rgb、16进制色等。chrome字体默认16px, 最小8px。中文常用微软雅黑、宋体；英语常用Arial、consolas原创 2022-02-11 00:18:06 · 324 阅读 · 0 评论 -
二、CSS 速览—— CSS 选择器、伪类、继承性和层叠性
CSS的选择器基础选择器：标签选择器：通过同名标签选择，同名标签可设置公共样式<style> h3 {color:red;} p {color:blue;}</style><p>段落</p>id选择器：通过标签的id属性选择<style> #id1 {color:red;}</style><p id="id1">段落</p>类名选择器：通过class属性选择<style原创 2022-02-11 20:50:29 · 301 阅读 · 0 评论 -
三、CSS 速览—— CSS 盒模型的了解
1. CSS盒模型宽 [width: px %]高 [height:px %]如果盒子不设置宽度，会默认撑满父盒子的宽度如果盒子不设置高度，会默认被内容撑高<style> p { width:100%; height:100% } </style>内边距 [padding: px]作用：设置宽高到边框的间距特点：不能加载内容，但是可以加载背景padding-top, right, bottom, left<style> p { padding原创 2022-02-12 00:07:59 · 425 阅读 · 0 评论 -
四、CSS 速览—— CSS 的浮动 float 属性
1. 浮动的基本使用标准文档流不能实现所有效果，还需要让标签去标准化实现非标准流。让标签去标准流的方法：浮动、定位浮动属性专门用于网页的并排布局，脱离了标准文档流，不再受元素等级的限制，既可以并排显示，又可以设置宽高。float: left 往左浮动float: right 往右浮动2. 浮动布局：所有的兄弟元素，有一个浮动，剩下的所有兄弟元素必须浮动。如果浮动元素不设置宽度，不会撑满父盒子，而被内容撑满。3. 浮动的性质浮动的元素脱标：标准流元素区分行、块，浮动元素脱离标准流原创 2022-02-12 00:14:29 · 254 阅读 · 0 评论 -
五、CSS 速览 ——相对定位、绝对定位
定位相对定位不脱离标准流，绝对定位和固定地位脱离标准流。position: relative;position: absolute;position: fixed;相对定位相对定位性质：不脱标，不会让出原始位置，盒子会在偏移位置加载；偏移量有正负之分。同时设置left和right偏移，只会加载left；同时设置top和bottom偏移只会加载top。应用：菜单栏下划提示线：设置下边框，同时盒子相对上移。设置文本段落的角标引用。<style> p {原创 2022-02-13 18:51:39 · 514 阅读 · 0 评论 -
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换、3D转换、动画字体图标iconfont 阿里图标库从图标库引用素材平面转换transition: all 1s; 设置元素变换动画transform: translate(px, px); 移动指定像素transform: translate(x%, y%); 相对自身百分比移动transform: translateX(值) 或 translateY(值)transform: rotate(360deg); 可自定义旋转点transform: scale(1.2); 缩原创 2022-02-15 13:04:31 · 289 阅读 · 0 评论 -
七、CSS 速览 —— Flex弹性布局、移动布局、响应式布局
Flex弹性布局Flex 布局概念精确灵活控制块级盒子的布局，避免浮动布局中的脱标现象。非常适合结构化布局。父元素添加 display: flex，子元素可自动地挤压或拉伸。此时父元素称为弹性容器，子元素称为弹性盒子调节盒子的间距调节主轴justify-content: start 默认值justify-content: endjustify-content: centerjustify-content: space-aroundjustify-content: space-ev原创 2022-02-15 13:05:50 · 564 阅读 · 0 评论 -
一、速览 Web框架 BootStrap4 —— BootStrap4 基础
BootStrap4 集成了快捷灵活的布局，我们只用根据需要引用布局样式即可，可以帮助我们快速开发Web网页。封装了CSS样式，直接调用，非常适合只有HTML基础的后端人员使用。隐藏与显示 <p class="d-none d-md-block">超小屏幕以上隐藏，中等以上屏幕显示</p> <p class="d-md-none">中等以上屏幕隐藏</p>表格样式 <table class="table table-dark "原创 2022-02-16 15:36:10 · 488 阅读 · 0 评论 -
二、速览 Web框架 BootStrap4 —— BootStrap4布局
布局Col栅格布局布局方法.container 固定尺寸；.container-fluid 宽度拉满。每行默认分成12份，例如 col-sm-4 占4份，即1/3。可以用 .w-100 折行<div class="container"> <div class="row"> <div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</d原创 2022-02-16 15:37:46 · 598 阅读 · 0 评论 -
三、速览 Web框架 BootStrap4 —— BootStrap4 组件(上)
BootStrap 组件警告提示框各种颜色提示框<div class="alert alert-success">百度</div><div class="alert alert-primary">百度</div><div class="alert alert-secondary">百度</div><div class="alert alert-danger">百度</div><div cl原创 2022-02-17 15:28:01 · 358 阅读 · 0 评论 -
四、速览 Web框架 BootStrap4 —— BootStrap4 组件(下)
按钮普通按钮<button class="btn btn-primary">我是按钮</button><button class="btn btn-success">我是按钮</button><button class="btn btn-link">我是按钮</button>高级按钮<button class="btn btn-primary btn-lg">btn-lg</button><原创 2022-02-17 15:28:46 · 1632 阅读 · 0 评论 -
CSS transform属性的简单应用——双开门动画效果
1.效果演示CSS transform属性有许多效果，平移、旋转、缩放等。这里简单应用平移效果，实现双开门动画，以下为效果图。2.设计思路设置一张居中的需要隐藏的底图。 设置封面图，平分成左右两部分。 鼠标悬浮在封面图上，触发“开门”效果。3.代码详解3.1 设置居中底图<!--写一个div标签，以容纳图片--><body> <div class="box"> </div></body>/*清.原创 2022-02-13 21:18:08 · 2459 阅读 · 0 评论