- 博客(26)
- 收藏
- 关注
RSS订阅原创 免费的inconfont的用法
html5的时代，用fontface，就是允许你加载第三方字体。建议：图标尽量用inconfont字体库。pc端或移动端或响应式，都可以用inconfont。可以用设计师给的图自己切小图标呀雪碧图呀，也可以跟设计师商量让他改成inconfont里的样子，或者让设计师给你svg格式的小图标。使用步骤：1.百度搜inconfont，选择官网iconfont-阿里巴巴矢量图标库，搜索 你需要的图标名称 加入购物车。然后在购物车数字那里点一下，选择 添加至项目（做自己项目或公司项目的话推荐加到项..
2021-12-17 16:20:17
3017
原创 Retina适配
Retina适配，就是视网膜屏的适配。在苹果手机上，从iphome4开始就叫视网膜屏。视网膜屏就是把2像素的缩放到1像素的地方去显示，更加清晰了。从iphome6开始是视网膜屏3倍的，就更加清晰了。注意：为视网膜屏做适配。需要准备3种尺寸的图片。如：100*100、200*200、300*300的，3种图标都加到一个元素上去。两种写法： 1.背景适配 image-set控制 1x表示1倍，2x表示2倍。(效果是1陪的图模糊，2倍的图清晰) 写法：...
2021-12-17 14:16:20
258
原创 重置css中要写的东西
pc端时候：移动端时：.html{ -webkit-text-size-adjust:none; } /*禁用iPhone中Safari的字号自动调整*/a{ -webkit-tap-highlight-color:transparent;} /*A点击有黑色背景*/（注意：transparent与前面的：之间，不允许有空格。切忌切忌，不要加空格。）...
2021-12-17 13:14:29
93
原创 什么是响应式？
响应式的布局是在变得，在移动端呈现一种样式，在pc端呈现另一种样式。css基础功很重要。媒体查询的几个概念： 1.最小600 min-width:600 就是 >=600 就是最小的宽是600 2.最大1000 max-width:1000 就是<=1000 就是最大的宽是1000 3.介于600和1000之间 min-width:6...
2021-12-17 09:31:03
928
原创 浮动的小技巧
注意：一般会用左中右结构，但是推荐用左右中结构，因为中间宽度自适应。代码如下：<style> .page{ height: 40px; background-color: yellow; } .prev,.next{ width: 30px; height: 30px; background-color: red; margin-top:5px; } .prev{ ...
2021-12-16 14:10:39
542
原创 border 和 三角 的工作中用法
1.工作中会用到的效果(原理：其实只是个视觉上的效果)<style> .box{ width: 100px; height: 30px; margin: 300px auto; border-radius: 5px; border: 1px solid #666; position: relative; } .tip{ position: absolute;...
2021-12-16 13:14:37
616
原创 border 和 三角
初始代码：<style> .box{ width:100px; height:100px; background-color: pink; margin: 30px auto; }</style></head><body> <div class="box"></div></body>1.四条边框都不一样 ....
2021-12-16 12:51:15
348
原创 margin负值
如果父级的宽度变宽，仍然是自适应的。（可以改变.box的宽度试试，也可以加许多文字测试。）注意：不需要给右侧加任何宽度，因为margin-left把左侧的图像+边距都加到一起了呢，就能永远保持自适应了，修改图片什么的比较方便哦。代码如下：<style> *{ margin:0; padding:0;} li{ list-style: none;} .clearfix:after,.clearfix:before{ content: ''; ...
2021-12-16 12:01:32
333
原创 圆角的小技术
1.工作中常用的方法 border-radius: 20px;2.实现1px圆角(不推荐使用，可以多套几层div效果更明显，比较麻烦哦)<style> .box{ width: 60px; height: 20px; padding: 1px 0; background-color: #ccc; } .cont{ margin: 0 -1px; height:20p...
2021-12-16 10:35:02
468
原创 margin:-1px的用法
<style> *{margin:0; padding:0;} li{list-style:none;} .clearfix:after{ display: block; clear: both; content: ''; } .box{ width: 1000px; margin: 30px auto; background: #C77778; ...
2021-12-16 09:57:47
570
原创 box-sizing的简单用法
初始代码：<style> *{ margin: 0; padding: 0; } li{ list-style: none; } .clearfix::after{ display: block; content: ''; clear: both; } .box{ width: 1000px; margi...
2021-12-15 09:16:09
326
原创 移动端小技巧
移动端： 要看手机的：操作系统、哪个版本的、看内置浏览器。。。。。温馨提示： 1.要用手机内置浏览器测试你写的移动端页面。 2.内置浏览器版本一点都比较低，尽量要加--webkit--前缀...
2021-12-15 08:57:38
172
原创 移动端的那些事
1.屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。2.屏幕分辨率：指在横纵向的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率。如1960*1080。（这里的1像素指的是物理设备的1个像素点） 苹果系列手机的屏幕分辨率： 型号 屏幕分辨率 PPI 设备独立像素 DPR（像素比）3GS...
2021-12-14 14:59:36
175
原创 有关浏览器（下）
移动端： 要看手机的：操作系统、哪个版本的、看内置浏览器。。。。。温馨提示： 1.要用手机内置浏览器测试你写的移动端页面。 2.内置浏览器版本一点都比较低，尽量要加--webkit--前缀...
2021-12-14 13:35:27
189
原创 有关浏览器（上）
pc端主要五大浏览器：谷歌（Chrome浏览器）、火狐 （Firefox浏览器）、IE（IE浏览器）、欧朋（opera浏览器）、苹果（Safari浏览器）（做pc端兼容时，只需要考虑IE的版本，其他默认都是最高版本浏览器，不需要考虑版本。）移动端有五大类：（注意：写的webApp测试都是用内置浏览器测试。不要用uc浏览器测试哦！QQ浏览器可能是需要考虑的。）一、内置浏览器（缺点：更新慢，它移植在了操作系统中）----渲染引擎存在于本地！ 安卓操作系统: 1.安卓 webk...
2021-12-14 12:27:39
345
原创 盒模型的计算公式
1.公式：实际所占位置（大小）：宽度或高度+padding+border+margin （ 即w/h + p + b + m） 元素的实际宽高：宽度或高度+padding+border （即w/h + p + b ）注意： 实际所占位置（大小）： 有宽度的元素：w/h + p + b + m； 没有宽度的元素：盒模型永远保持和父级相同的大小。 ...
2021-12-13 11:11:06
1043
原创 关于margin解决每行最后多出的右间距---最优方法
解决方法3-2:更改下布局，再多包一层div，减去多余的距离。推荐指数：????????????????解决方法3-2:(但是这也不是最优方法哦，不计算宽度了，而是再减回去距离。不过工作中可以用)<style> .box{ width: 705px; margin: 30px auto; background-color: beige; overflow: hidden; } .item{ width: 16...
2021-12-13 10:59:07
677
原创 关于margin解决每行最后多出的右间距
初始代码：<!doctype html><html><head><meta charset="UTF-8"><title>test</title><style> .box{ width: 705px; margin: 30px auto; background-color: beige; } .item{ width: 16...
2021-12-13 10:49:42
542
1
原创 编辑代码的快捷键
ul>li*4>a[href="javascript:;"] 然后按tab键 直接就生成下面的代码：<ul> <li><a href="javascript:;"></a></li> <li><a href="javascript:;"></a></li> ...
2021-12-10 09:26:48
724
原创 媒体查询响应式常见的head里写的
<!doctype html><html><head><meta charset="UTF-8"><title>fayeMeta</title><!--适配移动端--><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
2021-12-08 08:37:41
114
原创 用媒体查询写响应式布局
<!--移动端生效--><link rel="stylesheet" href="css/iphone.css" media="screen and (max-width:768px)" ><!--ipad端生效--><link rel="stylesheet" href="css/ipad.css" media="screen and (max-width:992px) and (min-width:768px)"><!--pc端生效-->
2021-12-08 08:34:39
86
原创 为了适配移动端，项目中必写的meat头部
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />当然还有其他的meat头部，但是通常主要写这个！...
2021-12-07 16:21:32
159
原创 网页标题上的图片怎么弄呢？
代码如下：<!doctype html><html><head><meta charset="UTF-8"><title>图标在这前面显示</title><link rel="icon" type="image/x-icon" href="favicon .ico" /></head><body></body></html>关键代码：<li
2021-12-07 16:01:09
796
原创 怎么能免费制作出网页标题前的图标呢？
1.百度搜索：ico2.点击链接：在线生成透明ICO图标——ICO图标制作3.选择文件，上传需要的图片，选择尺寸（32*32），点击生成。4.下载打开就可以免费用了哦！
2021-12-07 15:30:17
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人