一木知夏-优快云博客

原创移动端适配与less的使用

移动端最大的问题应该是不同的手机物理像素不同直接影响理想视口的布局,所以pc端的pc单位就变得不太适用.所以引入新的单位rem.rem单位是相对单位rem单位是相对于HTML标签的字号计算结果.1rem = 1HTML字号大小.目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10.这样不同大小的手机也能按照我们的布局等比例缩放,类似于百分比布局 <style> /* rem是一个相对单位 ,相对于我们的html的字体大小 */

2022-05-16 21:25:49 549 1

原创简单的3D翻转效果

使用css可以实现如下的翻转效果

2022-05-13 14:34:53 304 1

原创 css实现走马灯效果

可以使用css实现简单的走马灯效果如下图首先定义html部分使用 .box>li>a的结构.注意:由于后面显示会出现空白,需要把前三个图片加在后面,形成闭环实现一直轮播的效果. <div class="box"> <ul> <li><a href="#"><img src="../images/images/1.jpg" alt=""></a></li&gt.

2022-05-12 21:12:15 6886 5

原创使用css实现3D导航

使用css可以实现如下图的3D导航效果首先创建如下结构,三个首页与index并列的span标签<body> <div class="nav"> <ul> <li> <a href=""> <span>首页</span> <span>inde.

2022-05-12 20:52:35 720 1

原创使用css平面转换实现开门效果

使用css的平移属性可以实现如下图的开门效果首先html结构为一个大的div包裹两个等高等宽的小div<body> <div class="box"> <div class="left"></div> <div class="right"></div> </div></body>给大盒子设置宽高,插入背景图片,并将盒子居中 .

2022-05-11 22:07:48 794

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

原创 移动端适配与less的使用

原创 简单的3D翻转效果

原创 css实现走马灯效果

原创 使用css实现3D导航

原创 使用css平面转换实现开门效果

空空如也

空空如也

原创移动端适配与less的使用

原创简单的3D翻转效果

原创使用css实现3D导航

原创使用css平面转换实现开门效果