学习笔记-CSS3笔记
i'm_zhangting
这个作者很懒,什么都没留下…
展开
-
美化滚动条
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>.原创 2021-03-16 14:45:09 · 62 阅读 · 0 评论 -
CSS字体渐变
<h1 class="txt">字体渐变</h1>.txt { background: linear-gradient(to bottom, #ffffff,#ffffff, #08b9f0); background-clip: text; -webkit-background-clip: text; color: transparent;}原创 2021-03-03 09:59:12 · 114 阅读 · 0 评论 -
CSS各种选择器用法
选择器 例子 例子描述 CSS element+element div+p 选择紧接在 div 元素之后的所有 p 元素。 2 element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3 [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2 [attribute|=va...原创 2021-02-26 13:53:06 · 107 阅读 · 0 评论 -
CSS垂直居中布局
块垂直居中(高度auto)1、设置position: absolute;top: 50%; left: 50% 和 transform:traslate(-50%,-50%)实现水平垂直居中<style>.content{ position:absolute; top: 50%; left: 50%; transform: translate(-...原创 2019-03-26 21:16:44 · 553 阅读 · 0 评论 -
清除浮动的几种方式
.clearfix:after{ content:"";//设置内容为空 height:0;//高度为0 line-height:0;//行高为0 display:block;//将文本转为块级元素 visibility:hidden;//将元素隐藏 clear:both//清除浮动 } .c...转载 2019-03-26 21:31:54 · 182 阅读 · 0 评论 -
CSS绘制Icon
/*实心*/.icon{ display: inline-block; width:0px; height:0px; overflow:hidden; vertical-align: middle; border-width:10px; border-color:transparent transparent transparent b...原创 2019-03-26 22:40:32 · 387 阅读 · 0 评论 -
Flex布局
一、容器的属性以下6个属性设置在容器上.box {flex-direction: row | row-reverse | column | column-reverse; /*决定主轴的方向(即项目的排列方向)*/flex-wrap: nowrap | wrap | wrap-reverse; /*如果一行排不下,如何换行*/flex-flow: row nowrap; /*此属性是fl...转载 2019-04-03 13:14:10 · 108 阅读 · 0 评论 -
前端性能优化
浏览器进行DNS解析 DNS Prefech 与服务器建立TCP连接 浏览器发送HTTP请求 -- 前端优化 服务器发送HTTP请求 --优化 页面渲染 --前端优化浏览器发送HTTP请求减少请求次数缓存 HTTP Cache强缓存 -- 强缓存的特定是不需要询问服务器,他通过expires和cache-control来实现协商缓存 -- 协商缓存是请求服务器后,服务器来判断是...原创 2019-09-20 00:50:40 · 77 阅读 · 0 评论