H5+C3
关注
分享
扫一扫
学而不思则罔，思而不学则殆
一切都是为了务实基础
HTML5新增
CSS3新增
Kong_十六
慢慢来，才是快。
展开
-
Swiper插件 实现轮播图
写在前面js插件：简单说就是别人写好封装好的代码，我们可以直接拿过来用的。之前我们写的代码都是用纯js也就是原生js写的，使用js插件来实现一些常见的功能块，是很快就能实现的，同时还缩减了我们的代码量。哈哈哈哈哈哈哈看了一天的专业课，还是来写写放松放松。 emmmmmm 我还是那么水。。。。。。。好了好了，先看看是怎么用的吧。1.要想使用这个插件，首先得去官网下载需要得材料...原创 2020-03-30 21:31:57 · 11780 阅读 · 0 评论 -
rem基础知识
rem：全称root em，是一种相对单位。与em类似，em也是相对单位，em相对的是元素的父级元素字体大小来说的。rem是相对与html元素字体大小来说的，这也就很好理解为什么是root em了，因为html是跟元素啊，这也就好理解了。使用rem跟媒体查询结合的话，可以实现设备屏幕变化，页面显示也随着变化，从而达到适配不同手机屏幕的效果。那知道了相对于谁，接下来该考虑如何计算元素的rem...原创 2020-03-27 18:27:18 · 2444 阅读 · 1 评论 -
flex布局的应用 —— 模仿携程移动端的首页
写在前面昨天已经过去，未来还未到来，所以当下是上天给的最好的恩赐，好好把握。昨天又很仔细的看了看flex布局，今天下午动手用flex布局做了一个练习，就是模仿携程移动端首页。有一段时间没写html和css了，今天就是使用纯html和css搭建的一个首页，没有用到js。不过页面中确实有一个点可以用js做比较轻松，就是可以使用循环来生成精灵图，因为今天想写样式了，就没有用js写，下次再用js写...原创 2020-03-26 20:02:09 · 2730 阅读 · 6 评论 -
常用开发布局之flex布局 —— 常用属性
在之前我也写过一篇flex布局的一篇文章，flex新增属性。可以看下，刚开始第一次接触flex布局时写的，现在看看感觉有一点笼统，不是很清晰。但是里面解释了很多基础知识，还是值得看的。今天再来缕缕常用的父项属性和子项属性。父项常用属性代码上来，里面有详细的解释flex-deriction:控制主轴的正方向row：主轴是x轴,默认值row-reve...原创 2020-03-25 22:06:15 · 593 阅读 · 0 评论 -
百分比布局得应用 —— 模仿京东移动端首页
写在前面我想，我要更多的去练习，去搭建页面结构，去分析页面结构。emmmmmm，一个下午就画了小半个页面。我想我应该反思(面壁思过)。好了好了，开始撸思路了。夜里再来个flex布局。移动端开发的布局方式流式百分比布局、flex弹性布局、rem+媒体查询。主要就是这三种吧，今天简单说下流式百分比布局，它的主要核心就是宽度用百分比表示，利用百分比进行布局。一般在移动开发时，需...原创 2020-03-25 18:02:34 · 543 阅读 · 0 评论 -
如何解决图片在移动端清晰显示的问题
写在前面天气不错，风景不错，人也不错。日常生活的情趣则是人间烟火。安心在家呆着，不再焦虑、惆怅，静候佳音。该有的仪式感还是要有的。PC端中的图片直接放到移动端显示不清晰图片在PC端显示正常，同样的图片，直接放到移动端页面时，会出现模糊的状态，图片显示不清楚。为什么同样尺寸的图片在PC端和移动端清晰度不同，这里涉及的问题的是物理像素比，物理像素比就涉及到多倍图了。...原创 2020-03-24 21:15:42 · 4315 阅读 · 1 评论 -
CSS3动画 热点图
先看效果图动态的喔看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-23 22:13:29 · 311 阅读 · 0 评论 -
一个简单的3D旋转木马相册
3d旋转木马相册算是H5和C3的一个简单的综合案例，主要是使用3d转换实现的。3d中最重要的核心点：就是透视、3d呈现—— perspective 和 transform-style：preserve-3d。案例的主要核心技术点：3d转换+动画案例制作分析这个旋转木马的相册其实就是一个多面立方图，简单点的话可以把它看成一个正方体来分析。相册中不同的照片都放在一个容器中，所以...原创 2020-03-23 08:55:38 · 1136 阅读 · 0 评论 -
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是，2d是二维坐标系，是平面的，而3d是三维坐标系，具有空间感、立体感。在3d转换中，有两个特别重要的属性perspective、transform - style。perspective：透视，也叫视距，就是人眼距离屏幕的距离。距离屏幕越近(透视越小)物体越大，距离屏幕越远(透视越大)物体越小。1. 透视是写在父级元素上的2. 透视单位 ：pxtra...原创 2020-03-22 22:28:59 · 1005 阅读 · 1 评论 -
动画实例 —— 奔跑的熊大
emmmmmm，这是今天的第一个案例。这个案例，有一个亮点，巧用steps()实现动画。steps()是animation-timing-function属性的属性值，意思是分为几步完成动画的。在这个例子中，这个熊有8种状态，如果再使用常规的动画速度ease、ease-in等就达不到效果了。这里使用steps()是最好的，分8步完成，连贯起来就完成了一次的奔跑。看下代码<!...原创 2020-03-22 22:08:26 · 2784 阅读 · 0 评论