移动WEB开发之flex布局 flex 布局体验传统布局与flex布局传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 初体验 1. 搭建HTM 2021-01-09 HTML5&CSS3 HTML5&CSS3 移动端布局
移动WEB开发之流式布局 移动端基础浏览器现状PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于An 2020-12-18 HTML5&CSS3 HTML5&CSS3 移动端布局
CSS3 CSS3 2D转换转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。 移动：translate 旋转：rotate 缩放：scale 转换(transform)你可以简单理解为变形。 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。 2D 转换之移动 translate2D移动是2D转换里面的一种功能，可以改变 2020-12-15 HTML5&CSS3 HTML5&CSS3 移动端布局
PC端品优购项目(下) 品优购列表页制作品优购列表页制作准备工作1.列表页面是新的页面，我们需要新建页面文件list.html 。2.因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。3.头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。4.需要新的 list.css 样式文件，这是列表页专门的样式文件。 头部HTML引入： 12345678910111 2020-12-08 HTML5&CSS3 HTML5&CSS3 移动端布局
PC端品优购项目(上) 品优购项目规划网站制作流程网页美工会制作原型图和psd效果图 品优购项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作 品优购项目的学习目的 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。 品优购项目能复习、总结、提高基础班所学布局技术。 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整 2020-12-08 HTML5&CSS3 HTML5&CSS3 移动端布局
HTML5 和 CSS3 提高 HTML5 的新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 HTML5 新增的语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。 1234<div class=“header”> & 2020-11-26 HTML5&CSS3 HTML5&CSS3 移动端布局
CSS 高级技巧 精灵图为什么需要精灵图？ 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。 核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请 2020-11-26 HTML5&CSS3 HTML5&CSS3 移动端布局
CSS定位 CSS定位为什么需要定位提问： 以下情况使用标准流或者浮动能实现吗？ 1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 提问： 以下情况使用标准流或者浮动能实现吗？2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由 2020-11-23 HTML5&CSS3 HTML5&CSS3 移动端布局
CSS_5 PS 切图PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。 常见的图片格式1.jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的2.gif图像格式：GF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果实际经常用于一些图片小动画效果3.png图像格式是一种新兴的网络图形格式，结合了GIF和J 2020-11-21 HTML5&CSS3 HTML5&CSS3 移动端布局
CSS_4 圆角边框在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。语法： 1border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：bo 2020-11-20 HTML5&CSS3 HTML5&CSS3 移动端布局