- 博客(10)
- 收藏
- 关注
RSS订阅原创 前端让页面元素居中的方法
前端让页面元素居中的方法一、水平居中（text-align：center;）这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。<div> <img src="a.jpg">;</div>div { border: 1px solid
2021-10-27 14:47:21
5896
原创 移动端技术解决方案
移动端技术解决问题1. 移动端浏览器移动端浏览器基本以webit内核为主，因此我们就考虑webit兼容性问题我们可以放心使用H5标签和CSS3样式同时我们浏览器的私有前缀我们只需要考虑添加webit即可2. CSS初始化 normalize.css移动端CSS初始化推荐使用normalize.css/Normalize.css：保护了有价值的默认值Normalize.css：修复了浏览器的bugNormalize.css：是模块化的Normalize.css：拥有详细的文档官网地址
2021-10-03 09:36:04
116
原创 移动端常见布局
移动端常见布局移动端技术选型移动端布局和以前我们学习的PC端有所区别1. 单独制作移动端页面(主流)流式布局(百分比布局)flex弹性布局(强烈推荐)less+rem+媒体查询布局混合布局2. 响应式页面兼容移动端(其次)媒体查询bootstrap一. 流式布局(百分比布局)流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式max-wi
2021-10-03 09:33:35
227
原创 移动端-视口
视口视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口1. 布局视口 layout viewport一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。ios，Android基本都将这个视口分辨率设为980px，所以PC上的网页大都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面。2. 视觉视口 visual viewport字面意思，它是用户正在看到的网站的区域。注意：是网站的区域我
2021-10-03 09:33:02
125
原创 移动端-二倍图
二倍图1. 物理像素&物理像素比物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的，比如苹果6\7\8 是750*1334我们开发时候的1px不是一定等于一个物理像素点PC端页面，1个px等于1个物理像素点，但是移动端就不尽相同一个px点能显示的物理像素点的个数，称为物理像素比或屏幕像素比PC端和早前的手机屏幕/普通手机屏幕：1CSS像素 = 1物理像素的Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分
2021-10-03 09:32:12
305
原创 pc端-伪元素选择器(重点)
伪元素选择器(重点)伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTMl标签，从而简化HTML结构。选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意：before和after创建一个元素，但是属于行内元素新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法：element::before {}before和after必须有content属性before在父元素内容的前面创建元素，after在
2021-10-02 15:27:51
83
原创 pc端-外边距合并
外边距合并使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。主要有两种情况：相邻块元素垂直外边距的合并当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom,下面1的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方案：尽量只给一个盒子添加margin值。嵌套块元素垂直外边距的塌陷对于两个嵌套关系（父子
2021-10-02 15:27:02
58
原创 pc端-动画
动画动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。动画的制作制作动画分为两步：先定义动画再使用调用动画1.用keyframes定义动画（类似定义选择器）@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; }}动画序列0%是动画的开始，100%是动画的完成。这
2021-10-02 12:47:04
96
原创 pc端-3D转换
3D转换1. 三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴：水平向右 注意：x右边是正值，左边是负值y轴：垂直向下 注意：y下面是正值，上面是负值z轴：垂直屏幕 注意：往外面是正值，往里面负值2. 3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。transform:translateX(100px) : 仅仅是在X轴上移动transform:translateY(100px) : 仅仅是在Y轴上移
2021-10-02 12:46:27
90
原创 pc端-2D转换
2D转换2D转换之移动tanslate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1.语法transform: translate(x, y); 或者分开写transform: translateX(n);transform: translateY(n);2.重点定义2D转换中的移动，沿着X和Y轴移动位置translate最大的优点：不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%
2021-10-02 12:45:04
69
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人