HTML5CSS3
html和css3基本功
碼德浮樂
萬行代碼迷人眼,沒有代碼別賽臉
展开
-
HTML5CSS3_day01
day01 - 移动web开发_H5C3 HTML5 学习目标: 了解 H5 新变化 掌握 H5 新增语义化标签 掌握 H5 新增多媒体标签 掌握 H5 新增 input 表单、表单属性 1.1. 语义化标签 了解 使用语义化标签的好处是增强了代码的可阅读性,也方便了网站的seo(Search Engine Optimization,搜索引擎优化)。 header 头部标签...原创 2019-09-23 11:33:00 · 145 阅读 · 0 评论 -
HTML5CSS3_day02
day02 - 移动web开发_H5C3 1.1. 2D转换(变换)transform 2d转换是改变标签在2维平面上的位置和形状的一种技术,先来学习2维坐标系 1.1.1. 2维坐标系 2维坐标系其实就是指布局的时候的坐标系 如图 1.1.2. 2d移动 translate 2d移动是2d转换里面的一种功能,可以改变元素在页面中的位置,类似 定位 使用2d移动的步骤: 给元素添加 转换属性 ...原创 2019-09-23 11:39:18 · 114 阅读 · 0 评论 -
HTML5CSS3_day03
day02 - 移动web开发_H5C3 1.1. 学习目标 理解 3d转换的中的3d移动,3d旋转 动画属性的设置和使用 animate.css动画库的使用 应用 实现3d立方体 实现3d轮播图 无缝滚动 正在等待图标的制作 自己实现animate.css 1.1. 3D转换(变换) 3d转换是改变标签在3坐标系上的位置和形状的一种技术 以下知识点最好结合 3d模型工具来理解...原创 2019-09-23 11:54:31 · 128 阅读 · 0 评论 -
移动web开发_流式布局
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主...原创 2019-09-23 11:58:46 · 138 阅读 · 0 评论 -
移动web开发_flex布局
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 f...原创 2019-09-23 12:00:38 · 145 阅读 · 0 评论 -
移动web开发_rem布局
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px;...原创 2019-09-23 12:04:01 · 113 阅读 · 0 评论 -
移动web开发之响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子...原创 2019-09-23 12:05:10 · 149 阅读 · 0 评论