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 · 2138 阅读 · 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 · 152 阅读 · 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 · 1418 阅读 · 0 评论 -
Scss&Less初探，学会基本的使用方式
文章目录简介Less&Scss注释变量定义插值作用域选择器嵌套、伪类嵌套、属性嵌套(Scss)运算函数混入命名空间继承合并媒体查询条件语句循环语句引入 简介 Scss和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数、继承等概念。将css作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。 Less&Scss 注释 两者注释都是单行注释编译后不显示，多行注释显示。 变量定义.原创 2021-05-19 00:16:56 · 1280 阅读 · 0 评论 -
CSS3网格布局
简介 网格布局可以将容器划分为各种网格，可以对这些网格进行任意的组合，组成网格分界线的有行网格线和列网格线，由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。 注意：划分的网格并不是div，div存在与划分的网格之中，具体看以下实例。 <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <原创 2021-05-17 23:55:10 · 407 阅读 · 0 评论 -
快速掌握CSS3弹性布局
简介 display:flex; 弹性布局是css3的一种新的布局方式，它能够快速轻易的实现页面的各种布局。 采用弹性布局的盒子叫做弹性盒子 弹性盒子中的元素称为弹性项目 容器中有两条轴，沿水平方向的叫主轴，垂直于主轴的叫侧轴 常用属性 flex-direction: (控制项目的排列方向) row(默认) row-reverse column(纵向) column-reverse flex-direction: row; flex-direction: column; flex-wrap原创 2021-05-17 14:09:36 · 245 阅读 · 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 · 377 阅读 · 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 · 342 阅读 · 0 评论 -
CSS3新特性-rem
新增单位rem em：根据父元素的大小来决定 rem：根据根元素(html)元素来决定 html元素默认字体大小为16px(基础字体大小) Chrome浏览器不支持12px以下的字体大小(字体大小小于12px后改字体一直为12px)，其他浏览器没问题 <div class="l1"> 文字 <div class="l2"> 文字 </div> </div> html {原创 2021-05-15 17:15:41 · 199 阅读 · 0 评论