![](https://img-blog.csdnimg.cn/20210515172505113.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 70
学习
boboj1
web前端在职两年
展开
-
《原神》官网首页练习
完成效果项目数据通过ajax请求data中的数据然后通过js动态渲染到页面中AJAX的封装请求的主要代码 function getInfo(index) { let message = null; switch (index) { case 0: $ajax({ method: 'get', url: '../data/newest.json', success: function (da原创 2021-07-20 12:42:12 · 2027 阅读 · 2 评论 -
html&css容易遗忘的问题
文档类型声明标签<!DOCTYPE html>告诉浏览器使用最新的html语言来渲染网页常用标签<br /> 换行标签<strong>文字加粗</strong><em>倾斜</em><del>删除线</del>&; 空格<><a href="tel:1111111">电话</a><a href="原创 2021-07-13 21:32:46 · 125 阅读 · 0 评论 -
CSS-将多个div切割,通过定位实现一个图案
CSS-将多个div切割,通过定位实现一个图案通过CSS3中clip-path属性来实现个大象同过clip-path对div进行裁剪时可以利用PS对原图片进行取色并获取一定的比例。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2020-11-06 00:43:58 · 1357 阅读 · 0 评论 -
Scss&Less初探,学会基本的使用方式
文章目录简介Less&Scss注释变量定义插值作用域选择器嵌套、伪类嵌套、属性嵌套(Scss)运算函数混入命名空间继承合并媒体查询条件语句循环语句引入简介Scss和Less都属于CSS预处理器,CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,如:变量、语句、函数、继承等概念。将css作为目标生成文件,然后开发者就只要使用这种语言进行CSS编码工作。Less&Scss注释两者注释都是单行注释编译后不显示,多行注释显示。变量定义.原创 2021-05-19 00:16:56 · 1061 阅读 · 0 评论 -
CSS3网格布局
简介网格布局可以将容器划分为各种网格,可以对这些网格进行任意的组合,组成网格分界线的有行网格线和列网格线,由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。注意:划分的网格并不是div,div存在与划分的网格之中,具体看以下实例。 <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <原创 2021-05-17 23:55:10 · 365 阅读 · 0 评论 -
快速掌握CSS3弹性布局
简介display:flex;弹性布局是css3的一种新的布局方式,它能够快速轻易的实现页面的各种布局。采用弹性布局的盒子叫做弹性盒子弹性盒子中的元素称为弹性项目容器中有两条轴,沿水平方向的叫主轴,垂直于主轴的叫侧轴常用属性flex-direction:(控制项目的排列方向)row(默认)row-reversecolumn(纵向)column-reverseflex-direction: row;flex-direction: column;flex-wrap原创 2021-05-17 14:09:36 · 209 阅读 · 0 评论 -
CSS3新特性-新增样式
新增样式文本效果文本阴影文本裁剪单词换行边框圆角边框图片边框背景图片背景渐变背景盒子盒子大小界面上直接调节盒子尺寸盒子阴影文本效果文本阴影语法:text‐shadow: x y blur color;x:水平方向上右为正y:垂直方向上下为正blur:模糊程度color:文本颜色 <div> 我是一行文本 </div> div { text-shadow: 10px 5px 3px red;原创 2021-05-16 16:32:53 · 308 阅读 · 0 评论 -
CSS3新特性-选择器
结构性伪类:first‐child/last‐child父元素中第一个元素和最后一个元素 <div> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> div li:first-child { color: red原创 2021-05-15 18:27:14 · 299 阅读 · 0 评论 -
CSS3新特性-rem
新增单位remem:根据父元素的大小来决定rem:根据根元素(html)元素来决定html元素默认字体大小为16px(基础字体大小)Chrome浏览器不支持12px以下的字体大小(字体大小小于12px后改字体一直为12px),其他浏览器没问题 <div class="l1"> 文字 <div class="l2"> 文字 </div> </div> html {原创 2021-05-15 17:15:41 · 173 阅读 · 0 评论