![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小问题
坚持的faye413
积懒成笨,加油!
展开
-
免费的inconfont的用法
html5的时代,用fontface,就是允许你加载第三方字体。建议:图标尽量用inconfont字体库。pc端或移动端或响应式,都可以用inconfont。可以用设计师给的图自己切小图标呀雪碧图呀,也可以跟设计师商量让他改成inconfont里的样子,或者让设计师给你svg格式的小图标。使用步骤:1.百度搜inconfont,选择官网iconfont-阿里巴巴矢量图标库,搜索 你需要的图标名称 加入购物车。然后在购物车数字那里点一下,选择 添加至项目(做自己项目或公司项目的话推荐加到项..原创 2021-12-17 16:20:17 · 3044 阅读 · 0 评论 -
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 · 270 阅读 · 0 评论 -
什么是响应式?
响应式的布局是在变得,在移动端呈现一种样式,在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 · 937 阅读 · 0 评论 -
浮动的小技巧
注意:一般会用左中右结构,但是推荐用左右中结构,因为中间宽度自适应。代码如下:<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 阅读 · 0 评论 -
切图小心思
1.图标大小不一样,如何保证位置一样呢?答:自己切图的时候,最好把它们都切一样,最好是跟父级的高度一样。未完待续原创 2021-12-16 13:41:36 · 44 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 349 阅读 · 0 评论 -
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 阅读 · 0 评论 -
圆角的小技术
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 阅读 · 0 评论 -
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 · 572 阅读 · 0 评论 -
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 · 329 阅读 · 0 评论 -
移动端小技巧
移动端: 要看手机的:操作系统、哪个版本的、看内置浏览器。。。。。温馨提示: 1.要用手机内置浏览器测试你写的移动端页面。 2.内置浏览器版本一点都比较低,尽量要加--webkit--前缀...原创 2021-12-15 08:57:38 · 172 阅读 · 0 评论 -
移动端的那些事
1.屏幕尺寸:指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。2.屏幕分辨率:指在横纵向的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率。如1960*1080。(这里的1像素指的是物理设备的1个像素点) 苹果系列手机的屏幕分辨率: 型号 屏幕分辨率 PPI 设备独立像素 DPR(像素比)3GS...原创 2021-12-14 14:59:36 · 177 阅读 · 0 评论 -
有关浏览器(上)
pc端主要五大浏览器:谷歌(Chrome浏览器)、火狐 (Firefox浏览器)、IE(IE浏览器)、欧朋(opera浏览器)、苹果(Safari浏览器)(做pc端兼容时,只需要考虑IE的版本,其他默认都是最高版本浏览器,不需要考虑版本。)移动端有五大类:(注意:写的webApp测试都是用内置浏览器测试。不要用uc浏览器测试哦!QQ浏览器可能是需要考虑的。)一、内置浏览器(缺点:更新慢,它移植在了操作系统中)----渲染引擎存在于本地! 安卓操作系统: 1.安卓 webk...原创 2021-12-14 12:27:39 · 347 阅读 · 0 评论 -
盒模型的计算公式
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 · 1075 阅读 · 0 评论 -
关于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 · 687 阅读 · 0 评论 -
关于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 · 552 阅读 · 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 · 726 阅读 · 0 评论 -
该如何写响应式页面呢?
响应式布局的实现方法有1.媒体查询(media)2.bootstrap框架3.js+rem公司项目用2和3比较多哦原创 2021-12-07 16:30:14 · 312 阅读 · 0 评论 -
为了适配移动端,项目中必写的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 阅读 · 0 评论 -
网页标题上的图片怎么弄呢?
代码如下:<!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 · 806 阅读 · 0 评论 -
怎么能免费制作出网页标题前的图标呢?
1.百度搜索:ico2.点击链接:在线生成透明ICO图标——ICO图标制作3.选择文件,上传需要的图片,选择尺寸(32*32),点击生成。4.下载打开就可以免费用了哦!原创 2021-12-07 15:30:17 · 79 阅读 · 0 评论