- 博客(26)
- 收藏
- 关注
原创 免费的inconfont的用法
html5的时代,用fontface,就是允许你加载第三方字体。建议:图标尽量用inconfont字体库。pc端或移动端或响应式,都可以用inconfont。可以用设计师给的图自己切小图标呀雪碧图呀,也可以跟设计师商量让他改成inconfont里的样子,或者让设计师给你svg格式的小图标。使用步骤:1.百度搜inconfont,选择官网iconfont-阿里巴巴矢量图标库,搜索 你需要的图标名称 加入购物车。然后在购物车数字那里点一下,选择 添加至项目(做自己项目或公司项目的话推荐加到项..
2021-12-17 16:20:17
3076
原创 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
280
原创 重置css中要写的东西
pc端时候:移动端时:.html{ -webkit-text-size-adjust:none; } /*禁用iPhone中Safari的字号自动调整*/a{ -webkit-tap-highlight-color:transparent;} /*A点击有黑色背景*/(注意:transparent与前面的:之间,不允许有空格。切忌切忌,不要加空格。)...
2021-12-17 13:14:29
100
原创 什么是响应式?
响应式的布局是在变得,在移动端呈现一种样式,在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
951
原创 浮动的小技巧
注意:一般会用左中右结构,但是推荐用左右中结构,因为中间宽度自适应。代码如下:<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
543
原创 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
623
原创 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
359
原创 margin负值
如果父级的宽度变宽,仍然是自适应的。(可以改变.box的宽度试试,也可以加许多文字测试。)注意:不需要给右侧加任何宽度,因为margin-left把左侧的图像+边距都加到一起了呢,就能永远保持自适应了,修改图片什么的比较方便哦。代码如下:<style> *{ margin:0; padding:0;} li{ list-style: none;} .clearfix:after,.clearfix:before{ content: ''; ...
2021-12-16 12:01:32
337
原创 圆角的小技术
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
471
原创 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
578
原创 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
331
原创 移动端小技巧
移动端: 要看手机的:操作系统、哪个版本的、看内置浏览器。。。。。温馨提示: 1.要用手机内置浏览器测试你写的移动端页面。 2.内置浏览器版本一点都比较低,尽量要加--webkit--前缀...
2021-12-15 08:57:38
177
原创 移动端的那些事
1.屏幕尺寸:指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。2.屏幕分辨率:指在横纵向的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率。如1960*1080。(这里的1像素指的是物理设备的1个像素点) 苹果系列手机的屏幕分辨率: 型号 屏幕分辨率 PPI 设备独立像素 DPR(像素比)3GS...
2021-12-14 14:59:36
181
原创 有关浏览器(下)
移动端: 要看手机的:操作系统、哪个版本的、看内置浏览器。。。。。温馨提示: 1.要用手机内置浏览器测试你写的移动端页面。 2.内置浏览器版本一点都比较低,尽量要加--webkit--前缀...
2021-12-14 13:35:27
194
原创 有关浏览器(上)
pc端主要五大浏览器:谷歌(Chrome浏览器)、火狐 (Firefox浏览器)、IE(IE浏览器)、欧朋(opera浏览器)、苹果(Safari浏览器)(做pc端兼容时,只需要考虑IE的版本,其他默认都是最高版本浏览器,不需要考虑版本。)移动端有五大类:(注意:写的webApp测试都是用内置浏览器测试。不要用uc浏览器测试哦!QQ浏览器可能是需要考虑的。)一、内置浏览器(缺点:更新慢,它移植在了操作系统中)----渲染引擎存在于本地! 安卓操作系统: 1.安卓 webk...
2021-12-14 12:27:39
352
原创 盒模型的计算公式
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
1094
原创 关于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
693
原创 关于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
564
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
731
原创 媒体查询响应式常见的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
119
原创 用媒体查询写响应式布局
<!--移动端生效--><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
91
原创 为了适配移动端,项目中必写的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
167
原创 网页标题上的图片怎么弄呢?
代码如下:<!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
826
原创 怎么能免费制作出网页标题前的图标呢?
1.百度搜索:ico2.点击链接:在线生成透明ICO图标——ICO图标制作3.选择文件,上传需要的图片,选择尺寸(32*32),点击生成。4.下载打开就可以免费用了哦!
2021-12-07 15:30:17
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人