- 博客(27)
- 收藏
- 关注
RSS订阅原创 亲爱的老狼- 移动端和PC端的不同
移动端比较于pc端，改变的设定并不大，只是其中有数个添加的设定需要谨记： 1> 首先说明，移动端里不再适用px绝对像素单位，而是改为rem相对单位。 body{ max-width: 750px; min-width: 320px; margin: auto; header{ height: 5.5rem; } …… footer{ height: 6.125rem; } } 进行说明（固定设定）：body里添加的是通用设定，因为移动端和pc端不同，屏幕狭窄，所以，宽度设定最高：750px，
2021-09-21 19:28:42
197
原创 亲爱的老狼-同样的行内块标签，一个文本隐藏，一个没有隐藏，他们不在同一行，怎么办？
举例： <div> <a class="ag">齐天大圣</a> <a class="ga">齐天大圣</a> </div> a{ display: inline-block; } .ag{ width: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 这种情况下，会造成.ag和.ga不在同一行，该怎么做呢？ 一步搞定，上代码：
2021-09-17 23:06:25
184
原创 亲爱的老狼-精灵图及BFC区域的解释
1、精灵图是一种非常方便的使用方法，它比起平常的频繁请求后台进行图片传输，要简便省力，不费流量的多。 它的使用步骤是： img{ width: ; height: ; background: url( ) no-repeat x轴 y轴; } 2、BFC区域是一种在项目中常用到的用法，引起BFC区域的原因有很多，例如：float、position BFC区域是一种非标准文本流区域，和标准文本流区域为两个概念。且，里面的模块都是行内块。 反过来说，当一个区域里的模块都是行内块时，大概率本区域就是
2021-09-06 19:40:12
232
原创 亲爱的老狼-display的应用
display主要有2方面的应用： 1>display:flex/none/block/table/inline/inline-block，主要用于互相改变某一标签的属性，例如把块属性变成行内块属性：display：inline-block 2>display：none或者display：block他们的作用分别是隐藏和显现。 display：none隐藏标签内容，但不占位置。 display：block显现内容，也不占位置。 主要用于鼠标悬浮某处标签时，自动显现隐藏内容。 关键标签
2021-09-06 19:12:06
181
原创 亲爱的老狼-Iconfont的应用方法及三角的制作方法
第一步：连接网络，打开iconfont阿里巴巴官网 第二步：选中要用的图标，加入项目 第三步：打开购物车，添加项目，确定 第四步：下载本地，出现压缩包，在项目里打开压缩包，demo.css里打开，有使用教程，按照教程练习即可。 三角的制作方法： ...
2021-09-03 15:37:21
196
原创 亲爱的老狼-opacity、rgba、transparent的应用
1>opacity是透明色的一种，他是一种具有继承性的标签，它不仅会让背景色变的透明，还会造成所在盒子里的内容也透明。所以要慎用，不然，当想让子元素不再透明时，opacity、rgba、等均不具效用。 唯一的办法是一开始就用rgba来变色，后续也用它来调。 2>rgba透明色的一种，不具有继承性，只会让所在元素变的透明，所以它比opacity方便的多，想让谁变的透明，就让谁变的透明。 3>transparent是color的一种，是样式。 ...
2021-09-02 20:49:55
601
原创 亲爱的老狼-弹性盒子布局：如何让盒子里的内容自动排列整齐、适中
三行代码解决这个问题：（作用于父元素） div{ display：flex； flex-direction：row； justify-content：space-between； }
2021-08-27 13:31:31
482
原创 亲爱的老狼-如何让固定的图形、盒子动起来
1、 div:hover{ margin: 10px } 2、 div{ width: 300px; height: 600px; background-color: #f00; transition: all 1s linear 0s; } div:hover{ width: 200px height: 500px } hover从这里就可以看出来是非常重要的，用法非常多。谨记！
2021-08-24 21:05:18
103
原创 亲爱的老狼-css三角形怎么做出来
上代码： div{ width: 0; height: 0; border: 100px solid transparent; border-top: 100px solid orange; } width和height及border的格式是固定的格式，不能改变，但border里面的属性可以改变
2021-08-24 20:53:30
105
原创 亲爱的老狼-＜!DOCTYPE＞及标准模式、混杂模式的区分
<!DOCTYPE>这是现在VSCODE常用快捷方式中直接打出来的首行，是文档声明，告诉浏览器按照什么规范来解析页面，整理讯息。现在是以html5规范为最新标准。 标准模式（W3C）是我们现在常用的模式，又称严格模式，各种规范都应用成熟，他的触发方式就是一般的格式就行。它主要告诉浏览器以现在支持的浏览器最高标准渲染。 混杂模式（IE6）是特殊的模式，又称怪异模式，主要支持老网站运行不出差错，这里的老网站都是指以自己的方式解析执行代码的网站，新网站运行的规范都是最新版本。 老网站触发的方式最
2021-08-22 23:51:39
287
原创 亲爱的老狼-搜索引擎的区分及现在各大浏览器的引擎细分
搜索引擎经过市场淘汰过后，现在分的越来越细：基本上可以分为两类 1>渲染引擎：主要负责页面的显示方式、整理讯息、语法解释…… 2>JS引擎：主要负责页面的动态效果添加，让页面动起来 3>浏览器种类的细分： IE、猎豹、360安全浏览器、百度 Trident引擎 火狐（firefox） Gecko（速度慢） safari webkit（老引擎） chrome chromium/Blink（主要浏览器，占据市场大部分份额，是webkit的二次变种的产
2021-08-20 16:38:11
551
原创 亲爱的老狼-定位position的应用
定位分为三种：相对定位（relative）、绝对定位（absolute）、固定定位（fixed） 1>相对定位：从一个地方移到另一个地方，且，原来的位置和现在的位置都占据着位置空间。 2>绝对定位：从一个地方移到另一个地方，且，原来的位置和现在的位置都不占据位置空间（使用前提是父级元素必须是relative，若无父级相对定位，则以屏幕左上角为基准点） 3>固定定位：固定在屏幕的某个位置上，随着屏幕移动，不占据位置空间 ...
2021-08-18 15:20:32
113
原创 亲爱的老狼-绝对路径、相对路径
绝对路径：1>直接复制链接网址 2>直接复制文件里需要的东西的本地地址+文件名 相对路径：1>举例a.html处在1号文件夹里，b照片处在3号文件夹里。 现在，a.html需要用b照片。 1号文件夹和3号文件夹都是同一根目录下的文件夹。具体为：根目录---1号文件夹----a.html ...
2021-08-18 14:39:25
146
原创 亲爱的老狼-清除浮动float的5种方法
1>清除子级元素的浮动时，使用clear：left、right、both 2>清除父级元素的浮动时，使用overflow：hidden、auto、scroll（常用） 3>使用<br/>强制换行，消除浮动 4>标签{ *zoom:1; }
2021-08-18 14:20:18
200
原创 亲爱的老狼-论cellspacing和collapse的区别
cellspacing是作用是在表格里将表格线之间的间距合并，形成一整条线，增强美观度。 collapse的作用和cellspacing的作用是一样的，只是collapse是作用于css里。 一个是表格专用，一个是盒子专用。
2021-08-18 14:12:43
339
原创 亲爱的老狼-HTML三大基本格式：表格、表单、下拉
表格：<table border="1" cellspacing="0" background=" " bgcolor=" " width=" " height=" " cellpadding=" " bordercolor=" " align=" "> <tr> <td> </td> <td> </td> </tr>...
2021-08-18 11:31:52
128
原创 亲爱的老狼-css选择器基本样式及其进阶样式
css选择器基本样式：*通配符选择器、div标签选择器、class=“jj”类选择器、id=“aa”唯一选择器、还有特殊的选择器：伪类选择器（link、visited、hover、active通常我们记的时候简记：LV，HA） 而其进阶样式是基本样式的复合模式：(父元素:a,子元素b) 1>子元素选择器:a>b{} 2>后代选择器:a b{} 3>交集选择器:ab{} 4>并集选择器:a，b{} 5>链接伪类选择器：b:L/V/H/A{} ...
2021-08-18 10:50:00
125
原创 亲爱的老狼-css文字基本属性汇总
font四大项：font-{style、weight、size、family}-------style：格式（是否倾斜italic等）、weight：粗细（文字粗细400-700）、size：大小（文字大小）、family：样式（例如微软雅黑/5FAE/8F6F/96C5/9ED1/等） color：颜色、 text-{indent、decoration}-----indent：段落首行缩进、decoration：划线（划线细分为删除线line-through、下划线under-line） word-
2021-08-18 10:25:44
278
原创 亲爱的老狼-浮动float用法解析
float分为左浮动left、右浮动right。 1>float=“left”指的是1--4列表竖列，直接转变为以1为头，紧挨左边的一行模式从左数1--4. 2>float=“right”指的是1--4列表竖列，直接转变为以1为头，紧挨右边的一行模式从右数1--4. ...
2021-08-16 20:30:19
208
原创 亲爱的老狼-列表符号怎么放在盒子里
解决这个问题的方法有两种： 1>一种是直接padding-left=“ 大小 ”，把盒子撑开，把内容裹进去 2>一种是先消去符号list-style=“none”，再单独在需要的列表上加上list-style=“符号”，列表和符号就会自动被盒子裹进去。 ...
2021-08-16 20:15:11
388
原创 亲爱的老狼-div盒子的类别、及margin、paddign的运用
div分为两种类别：1、标准盒子（W3C）2、怪异盒子（IE6） 标准盒子和怪异盒子可以互相转换。一般情况下，都是使用标注盒子就可以了，但是，一旦需要进行盒子内部内容的定位，就需要进行转换：box-sizing=“border-box”,否则，会造成盒子宽、高的增加。造成布局紊乱。 marign是在盒子之间的间距使用的元素，padding则是在内容和边框之间使用的元素。 虽然，元素属性不同，但是，用法是一样的。分为4种： 1>" "px:上下左右 2>“ ”px “ ...
2021-08-16 19:55:25
338
原创 亲爱的老狼-超链接的运用方式
<a href="" target=“” title=“”></a>,超链接的使用在css里十分频繁，所以非常非常重要!!! 1、首先需要明白target的属性，一共四种：blank（新窗口）、self（原窗口）、top（定级窗口）、parent（父级窗口） 2、<a href=""></a>使用时，共有4种方式： 1>“#”空链接时，作用是回到顶部、" "空链接，作用是刷新并回到顶部、“javascript”作用是既不回到顶部 ，又不刷新。 .
2021-08-16 17:43:40
167
原创 亲爱的老狼-ctrl的快捷键用法大全
ctrl+c、v：此两个属性连续使用，分别是复制和粘贴 ctrl+w：删除 ctrl+a：全选 ctrl+z：撤销 ctrl+b：打开左边选项 ctrl+x：直接删除一行 ctrl+e：打开搜索框，查找记录 ctrl+q：打开搜索框，查找设置 ctrl+n、s：此两个属性连续使用，分别是新建和保存 ctrl+o：打开 ...
2021-08-16 16:41:20
2338
原创 亲爱的老狼-form表单域的type组成
1、text：登录用户名时使用 2、password：登录用户密码时使用 3、radio：单选时使用（使用时name必须一样） 4、checkbox：多选时使用（使用时name不用一样） 5、file：上传文件时使用 6、image：上传照片时使用 7、submit、reset、button：按钮的组成（提交、重置、普通） 8、date：选择日期时使用 9、number：选择数字时使用 10、email：填写邮箱时使用 11、hidden：填写的内容会隐藏（用户看不见） 12、text
2021-08-16 16:18:46
112
原创 亲爱的老狼-html的格式含义全面说明
shift+i（快捷方式），html页面格式出现…… <Doctype html>代表告诉解析页面的浏览器按照html5的规范进行页面解析。 <html lang="en">代表告诉解析页面的浏览器以英文模式解析页面，lang="language",en="english" 有时，页面也可写成<html lang="zh">,顾名思义，zh代表告诉浏览器以中文模式解析页面。但是，一般我们都用英文模式写页面，很少用zh。 <head>……</hea
2021-08-16 10:55:56
422
原创 亲爱的老狼-display的使用
学习css的过程中，用行内元素写链接时，有错误，不规范。 display就登场了，但是注意：重要的事情说三遍！！！（必须是行内元素设置宽高时），才会用它。 一般我们用行内元素链接时写属性，是没问题的。 ...
2021-08-15 21:09:03
107
原创 亲爱的老狼-快速消除a标签间距的4种方法
html中a标签的使用大家经常会和li联合使用，但是可能会遇到一种情况：a标签之间有间距，难以消除。下面是我的解决方法 1、a标签不要换行，直接连续排列 eg：<a href="#" ></a><a href="#"></a> 2、大盒子font-size=“0”，小盒子font-size=“字体字号” eg：.dd{font-size:0:} .dd a{font-size:font-size;} 3、浮动 4、eg:letter-spacin
2021-08-12 23:06:46
899
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人