![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
教练我真的想敲代码
这个作者很懒,什么都没留下…
展开
-
html访问图片资源403问题(http referrer)
先说下解决方法: 在HTML代码的head中添加一句<meta name="referrer" content="no-referrer" />即可,后面再说下原理。https://www.jianshu.com/p/56df73d0d128?utm_source=oschina-app原创 2020-09-20 21:50:24 · 211 阅读 · 0 评论 -
flex布局+display:flex布局,自动适应屏幕高度100%
子项属性原创 2020-09-02 17:14:03 · 2702 阅读 · 0 评论 -
070JQ-电梯导航!
js$(function () { // 互斥锁节流阀 var flag = true; var pos = $(".two").offset().top; toggleTool(); // 到第一个高度显示nav $(window).scroll(function () { toggleTool(); if (flag) { // 页面滚动到某个区域,对应的li添加和删除current原创 2020-07-24 20:56:52 · 97 阅读 · 0 评论 -
057JS-轮播图插件
轮播图插件https://www.swiper.com.cn/http://www.superslide2.comhttps://github.com/cubiq/iscroll原创 2020-07-24 13:04:27 · 79 阅读 · 0 评论 -
052CSS-网站图标favicon.ico
favicon.ico一般勇于作为缩略的网站图标,他先是在浏览器的地址栏或者标签上【制作png、转化ico、放在根目录、引入】 通过比特虫网站转换http://www.bitbug.net/ 引入规范、放在head里 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">...原创 2020-07-24 11:12:34 · 124 阅读 · 0 评论 -
051CSS-初始化样式文件
不全就是简单的一些/* 把我们所有标签的内外边距清零 */* { margin: 0; padding: 0; /* css3盒子模型 */ box-sizing: border-box;}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal}/* 去掉li 的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了原创 2020-07-24 11:01:34 · 99 阅读 · 0 评论 -
029CSS-动画@keyframes
1、用keyframes定义动画@keyframes 动画名称{ 0%{ 动画开始 } 100%{ 动画结尾 }} 2、使用动画 调用动画 谁使用{animation-name:动画名称;调用时间animation-duration:持续时间; }@keyframes 规定动画animation 所有动画属性的简写属性、除了animation-play-state属性animation-name 动画的名称(必须)animati.原创 2020-07-22 15:55:51 · 114 阅读 · 0 评论 -
028CSS-transform:translate 2D
移动 translate 不会影响其他元素的位置旋转 rotate deg是单位度缩放 scale(1.1) 放大1.1倍transform-origin 设置旋转元素的基点位置:综合写法 顺序transform:translate(50px,50px) rotate(45deg) scale()原创 2020-07-22 15:27:33 · 87 阅读 · 0 评论 -
027CSS-transition过渡效果
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */ /* transition: width .5s ease 0s, height .5s ease 1s; */ /* 如果想要写多个属性,利用逗号进行分割 */ /* transition: width .5s, height .5s; */ /* 如果想要多个属性都变化,属性写all就可以了 */ /* transition: heig...原创 2020-07-22 14:57:21 · 71 阅读 · 0 评论 -
026CSS-图片模糊处理
img { /* blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */ filter: blur(15px); } img:hover { filter: blur(0); }原创 2020-07-22 14:43:37 · 85 阅读 · 0 评论 -
025CSS-属性选择器、结构伪类选择器 、伪元素选择器
1、属性选择器利用属性选择器可以不用借助类或者id选择器/* E[att]选择具有att属性的E元素E[att=‘val’]选择具有att属性且值等于val的E元素E[att^=‘val’]选择具有att属性以val开头的E元素E[att$=‘val’]选择具有att属性的结尾valE元素E[att*=‘val’]选择具有att属性含有val的E元素*/类选择器、属性选择器伪类选择器权重为102、结构伪类选择器据文档结构来选择元素,常用语根据父亲选择子元素E:first-child匹配原创 2020-07-22 14:32:44 · 134 阅读 · 0 评论 -
024CSS-文本溢出显示省略号(待完善)
必须强制一行内显示文本white-space:nowrap;超出的部分隐藏overflow:hidden;文字用省略号代替超出的部分text-overflow:ellipsis;<style> div { width: 150px; height: 80px; background-color: pink; /* white-space: normal; */原创 2020-07-22 13:07:33 · 100 阅读 · 0 评论 -
023CSS-强化三角
给没有大小的盒子设置四个边框 /* 强化三角 */ .qhsj { width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid greenyellow; border-bottom: 50px solid tomato; border-left: 50原创 2020-07-22 12:50:26 · 115 阅读 · 0 评论 -
022CSS-iconfont字体图标
icomoon字库 http://icomoon.ic [国外的网站唯一的遗憾就是网速慢]阿里iconfont字库 http://www.iconfont.cn/1、把下载包里的fonts文件夹放入页面根目录下2、在css样式里全局声明style.css里的东西原创 2020-07-22 12:43:45 · 92 阅读 · 0 评论 -
021CSS-元素显示与隐藏
display:none隐藏对象 【不保留位置】display:block出了转换为块级元素之外,同时还有显示元素的意思visibility hidden隐藏、visible可视、inherit集成上一个父对象的可见性【保留位置】 overflow 属性规定当内容溢出元素框时发生的事情。...原创 2020-07-22 12:32:33 · 174 阅读 · 0 评论 -
020CSS-定位子绝父相
为什么学习定位?以下情况能是同标准流或者浮动实现么1、某个元素可以自由的在一个盒子内移动位置,并且压住其他合资2、当我们滚动窗口的时候,盒子是固定评某个位置的所以浮动可以让多个块级盒子一行 没有缝隙排列显示,经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定在某个位置并且可以压住其他盒子 值 语义 static 静态定位 默认定位方式,无定位的意识原创 2020-07-22 12:19:09 · 152 阅读 · 0 评论 -
019CSS-清除浮动
为什么要清除浮动为什么要清除浮动,由于父级盒子很多的情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时就会影响下面的标准流盒子清除浮动后,父级就会根据浮动的子盒子自动检测高度,父级有了高度就不会影响下面的标准流清除浮动方法1、额外标签法,也称为隔墙法w3c推荐【在最后一个浮动元素添加一个新的空标签缺点,结构不好】语法选择器{clear:属性值;}属性值left不允许左侧有浮动元素(清除左侧浮动的影响)right 不允许右侧both 不允许两侧2、父级添加o原创 2020-07-22 11:29:50 · 98 阅读 · 0 评论 -
018CSS-三种传统布局方式(普通、浮动)
所为标准流就是按照规定好默认方式排列 块、行内网页布局第一准则,多个块级元素纵向排列找标准流。多个块级元素横向排列找浮动浮动最重要的元素特性1、脱离标准普通流的控制移动到指定位置(俗称脱标)2、浮动的盒子不在保留原先的位置任何元素都可以浮动不管原先是什么模式的元素,添加浮动之后具有行内快元素相似的特性如果块级盒子没有设置宽度,默认和父级一样宽。但是添加浮动后,它的大小根据内容来决定 浮动的盒子中间是没有缝隙的,是紧挨着一起的 行内元素同理为了约束浮动元素位置我们网页布局一般采取=》先用原创 2020-07-22 11:06:37 · 168 阅读 · 0 评论 -
017CSS-圆角边框+阴影
<body> <div></div> <div class="yuan yinying"></div> <!-- 原先盒子没有阴影鼠标落到盒子有阴影 --> <div class="kk"></div></body><style> * { margin: 0; padding: 0;原创 2020-07-22 10:49:36 · 225 阅读 · 0 评论 -
016CSS-overflow: hidden解决父子塌陷问题
对于两个嵌套关系(父子)的块元素,父元素又上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值 解决方案1、可以为父元素定义上边框2、可以为父元素定义上内边距3、可以为父元素添加overhidden未加overflow: hidden;加了overflow: hidden;...原创 2020-07-22 10:16:18 · 319 阅读 · 0 评论 -
015CSS-三大特性:层叠、继承、优先
层叠性原则:样式重读遵循就近原则,哪个样式离结构近就执行那个样式继承性原则 子标签会继承父表签的一些样式,如字号颜色inherited from xxx 继承xxx子元素主要可以继承父元素的(text、font、line等文字性的样式以及color属性)优先级原则(标签、类、id等)如果选择器相同则执行层叠性原则如果不同则根据|选择器权重|执行!important》行内样式》id》类选择器、伪类》元素选择器》继承或者*继承权中是0,最小,不管是否加了!important都是最小权重计算原创 2020-07-22 09:54:29 · 96 阅读 · 0 评论 -
014CSS-background背景+background-size
1、背景颜色 2、背景图片(常见于logo或者装饰性的小图片或者是超大的图片)优点方便控制位置3、背景平铺backgroud-repeat4、背景图片位置属性backgropund-position:x y;方位名词或者精确单位、方位名词top left 和left top没有顺序区别 如果只写一个,剩下一个默认居中 div { width: 1500px; height: 900px; /* 背景颜色 */原创 2020-07-22 09:25:30 · 101 阅读 · 0 评论 -
013CSS-snipaste小工具
1、f1可以截图、同时测量大小、设置剪头、书写文字2、f3在桌面置顶显示3、点击图片alt可以取色(按下shift可以切换取色模式)4、按下esc取消图片显示链接:https://pan.baidu.com/s/1vO17xK0QZacTBRko1vksHg提取码:aths...原创 2020-07-21 23:29:34 · 160 阅读 · 0 评论 -
012CSS-块元素、行内元素、行内块元素(合并相邻边框)
块级元素的特点1、比较霸道自己独占一行2、高度宽度外边距内边距都可以控制3、宽度是默认的父级的100%4、是一个容器可以放行内元素或者块级元素div是块级元素===》文字类的标签内不能使用块级元素,p或者h里面不能放div行内元素的特点1、相邻行内元素在一行上,一行可以显示多个2、高宽直接设置是无效的3、默认宽度就是它本身内容的宽度4、行内元素只能容纳文本或者其他行内元素注意链接里面不能再放链接特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全行内元素有a、strong、原创 2020-07-21 22:37:36 · 558 阅读 · 0 评论 -
011CSS-复合选择器
复合选择器就是建立在基础选择器上,分为后代选择器、子选择器、并集选择器、伪类选择器等1后代选择器**重要又称为包含选择器 可以选择父元素里的子元素,器械法就是吧外层标签在写前面。名内层标签写在后面。中间用空格分开,当标签发生嵌套时内层标签就成为外层标签的后代/* 声明规范 元素1 元素2 {样式声明} 元素2 可以是儿子或者孙子级别的*/ ol li { color: brown; }2子选择器子选择器只能弄儿子级别的格式用 > .hh>原创 2020-07-21 21:43:19 · 84 阅读 · 0 评论 -
010CSS-保存代码时自动格式化代码
如何设置保存代码 时候自动格式化点首选项-设置-搜索搜索emmet.include在settings.json编辑添加"editor.formatOnType":true添加"editor.formatOnSave":true原创 2020-07-21 21:00:17 · 575 阅读 · 0 评论 -
009CSS-emmet语法
emmet 可以提高编写速度vscode内部已经集成该语法生成多个相同的标签 div*3ul>li 如果有父子级关系如果有兄弟关系 div+pp#teo 直接生成带有类名或者id名的标签 p.demodiv.demo$∗5加*5 加∗5加可以自动加顺序...原创 2020-07-21 20:41:47 · 66 阅读 · 0 评论 -
008CSS-样式引入方式
按照书写的位置或者引入的方式,css样式表可以分为三大类1、行内样式表(行内式)在元素内部的style属性中设置css样式,适用于简单的修改 <div style="color: aqua; font-size: 34px;">青春不常在,抓紧谈恋爱</div>2、内部样式表(嵌入式)控制范围整个页面中的元素样式设置 <!-- 内部样式把所有css代码抽取出来,单独放到一个style标签中 <style> a {原创 2020-07-21 20:30:16 · 95 阅读 · 0 评论 -
007CSS-text文本属性
CSS text属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等//对齐文本 只能设置水平对其方式text-align: center;//装饰文本 text-decoration 上划线下划线删除线 aqua是颜色text-decoration: overline aqua;//none去掉下划线可以用于a标签去除下划线text-decoration: none;//第一行缩进 2em俩字text-indent: 2em;//行间距line-height:原创 2020-07-21 20:08:33 · 119 阅读 · 0 评论 -
006CSS-字体样式
p { /* font-family: Arial, Helvetica, sans-serif; */ font-family: 'Times New Roman', Times, serif; /* 写多个字体保证兼容性, */ /* 使用逗号间隔。 有空格隔开的多个单词组成的字体加引号单引号,尽量使用系统默认自带字体保证都能显示 */ /* 字体大小font-size */原创 2020-07-21 19:54:57 · 63 阅读 · 0 评论 -
005CSS-语法规范
样式 /* 选择器{样式} */ /* 给谁改样式{改成什么样式} */ p { color: rgb(28, 129, 67); font-size: 115px; }1.样式格式书写(紧凑型格式。展开格式)2.选择器分为基础选择器和复选选择器两个大类,我们这里先讲解一下基础选择器 基础选择器是有单个选择器组成的 包括标签选择器、类选择器、id选择器、通配符选择器 标签选择器不能差异选择,都选上了原创 2020-07-21 19:32:57 · 90 阅读 · 0 评论