- 博客(14)
- 收藏
- 关注
RSS订阅原创 轮播图
<title>轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; } .swiper { width: 1226px; height: 460px; margin: 0 auto; position: relative; } .swiper .imgList { width: 100%; height: 1...
2020-06-30 20:56:40
126
原创 js辅助响应式navigator
（获取不同的客户端版本）使用navigator.userAgent来检测当前运行浏览器的是什么设备 <title>js辅助式响应</title> <style> .iphone #icon { width: 100px; height: 100px; background-image: url(./img/iphone.png); backgr
2020-06-29 23:59:23
408
原创 rem 布局
rem布局rem是相对于html的字体大小单位。不仅是字体大小，还可以适用于各种属性的大小单位。 <title>rem布局</title><!-- css --> <style> *{ margin: 0; padding: 0; } #d1 { width: 5rem; height: 5rem;
2020-06-28 23:00:19
117
原创 js数组对象和prototype
js一切皆是对象创建数组：方法一：new数组实例 var arr = new Array("1", "2", "3");方法二：数组字面量 var arr = [1,2,3]数组的属性：属性名描述length数组的长度数组的方法：方法名描述是否改变数组arr.concat()两个数组拼接否arr.join()把数组转化为字符串，默认逗号为分隔，使用参数可以自定义分隔符否arr.toString()把数组转化为字符串
2020-06-28 00:11:59
385
原创 小米官网移动端和js复习
小米官网大致完成*{ margin: 0; padding: 0; background-repeat: no-repeat;}li { list-style: none;}body { background-color: #f5f5f5;}input::-webkit-input-placeholder{ color:rgba(0,0,0,.3); }.header { width: 375px; display: flex; f
2020-06-26 00:12:15
506
原创 小米官网头部和伪元素，清除浮动
小米官网头部<style>*{ margin: 0; padding: 0;}li { list-style: none;}input::-webkit-input-placeholder{ color:rgba(0,0,0,.3); }.header { width: 375px; display: flex; flex-direction: column; background-color: #F2F2F2;}.hea
2020-06-24 22:56:31
222
原创 游戏动画与转换
在做苹果官网时，发现有些css没接触过，特别是转换和动画帧动画（ 游戏动画） <style type="text/css"> #main { border: 1px solid #000000; position: relative; width: 500px; height: 300px; } #d1{ width: 300px; height: 200px; /* border: 1px solid #00000
2020-06-23 23:28:28
100
原创 css3动画animation和loading动画
css3动画animation<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动画</title> <style type="text/css"> #donghua { width: 200px; height: 200px; background-color: #14569B; animatio
2020-06-22 23:35:51
188
原创 定位 position与过渡效果transition
transition:过渡动画效果的使用:transition-property 过渡的css属性transition-property: width, background-color; 可以多个属性过渡, 或者all全部transition-duration 过渡动画的时间transition-duration: .6s, 2s;多个属性分别过渡的时间transition-timing-function 过渡动画的形式, 速度曲线ease默认(慢速开始，然后变快，然后慢速结)c...
2020-06-19 23:57:57
3719
原创 仿apple官网
大概制作完成预览地址以为底部的很快能完成, 没想到还是花费了两个小时才感觉完善好发现了transition动画高度改变后的时候不能用百分比, 不然动画会无效 参考连接css3 transition动画宽高自适应问题...
2020-06-18 23:53:16
1873
4
原创 2仿apple 官网(做了banner)
把导航条的动画补上, 第一个banner是看着视频做, 第二个开始自己直接写, 然后复用了第一个的共同样式
2020-06-16 23:57:02
405
原创 仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条，仿做的动画，字体不一致不会CSS动画，未有学习flex掌握感觉还可以媒体查询也懂得了一小部分，不熟悉...
2020-06-15 21:51:56
904
1
原创 01.弹性布局2、响应式、移动端
6月14日1.弹性布局的单独侧轴排布，空间分布，多行的换行，子元素的排列1.1单独侧轴排布(align-self：auto(默认值)，center，flex-start，flex-end)1.2子元素空间分布：分配空间的占的份数(关键样式flex:1; flex:2)1.3元素的排列:排序由数值小到大2.继承继承:子元素继承父元素的字体样式3.响应式响应式：使用媒体查询@media，跟着分辨率改变设置样式，自适应效果CSShtml4.移动端4.1分辨率：物理分辨率，系统分辨率4.2视窗大小1.弹性布局的单
2020-06-14 23:48:58
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人