文章目录 4.5. Photoshop制作雪碧图技巧 Photoshop制作雪碧图技巧 4.5. Photoshop制作雪碧图技巧 Photoshop制作雪碧图技巧 雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。 步骤： 1、使用Photoshop新建一张背景透明的图片 2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小 3、按照所有小图片的范围裁剪图片，存为透明背景的pn...

文章目录 5. 前端页面开发流程 前端页面开发流程 5. 前端页面开发流程 前端页面开发流程 1、创建页面项目目录 2、使用Photoshop对效果图切图，切出网页制作中需要的小图片 3、将装饰类图像合并，制作成雪碧图 4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

文章目录 6. HTML5与CSS3 课程介绍 6. HTML5与CSS3 课程介绍 学习html5和CSS3的新增功能，了解html5和css3的应用场景。

文章目录 6.1. CSS权重 CSS权重 权重的等级 权重的计算实例 6.1. CSS权重 CSS权重 CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级，按照等级来计算权重 1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如：style=””，权重值为1000 3、ID选择器，如：#content，权重...

文章目录 6.2. CSS3新增选择器 CSS3新增选择器 6.2. CSS3新增选择器 CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 <style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ...... <div class="list"> ...

文章目录 6.3. CSS3圆角、rgba CSS3圆角、rgba CSS3圆角 rgba（新的颜色值表示法） 6.3. CSS3圆角、rgba CSS3圆角、rgba CSS3圆角 设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px; 同时分别设置四个角： border-radius:30px 60px 120px 150px; 设置四个圆角相同： border-radius:50%; rgba（新的颜色...

文章目录 6.4. CSS3 transition动画 CSS3 transition动画 综合练习： 6.4. CSS3 transition动画 CSS3 transition动画 1、transition-property 设置过渡的属性，比如：width height background-color 2、transition-duration 设置过渡的时间，比如：1s 500ms 3、transition-timing-function 设置过渡的运动方式，常用有 lin...

文章目录 6.5. CSS3 transform变换 CSS3 transform变换 举例：（翻面效果） 6.5. CSS3 transform变换 CSS3 transform变换 1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4、skew(x-angle,y-angle) 设置盒子斜切 5、perspective 设置透视距离 6、transform-style flat | preserve-...

文章目录 6.6. CSS3 animation动画 CSS3 animation动画 6.6. CSS3 animation动画 CSS3 animation动画 1、@keyframes 定义关键帧动画 2、animation-name 动画名称 3、animation-duration 动画时间 4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数) 5、animation-delay 动画延迟 6、animation-iteration-count 动画...

文章目录 6.7. CSS3浏览器前缀 CSS3 浏览器前缀 浏览器样式前缀 自动添加浏览器前缀 Autoprefixer在Sublime text中的设置： 6.7. CSS3浏览器前缀 CSS3 浏览器前缀 浏览器样式前缀 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀： -ms- 兼容IE浏览器 -moz- 兼容firefox -o- 兼容opera -webkit- 兼容chrome 和 s...

文章目录 6.8. HTML5新增标签 HTML5新增标签 6.8. HTML5新增标签 HTML5新增标签 ## HTML5新增标签 **新增语义标签** 1、<header> 页面头部、页眉 2、<nav> 页面导航 3、<article> 一篇文章 4、<section> 文章中的章节 5、<aside> 侧边栏 6、<footer> 页面底部、页脚 **音频视频** 1、<audio> 2、<video> PC端兼容h5...

文章目录 6.9. HTML5 新增表单控件 HTML5 新增表单控件 6.9. HTML5 新增表单控件 HTML5 新增表单控件 新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索 <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="e...

文章目录 7. 移动端页面开发 移动端页面开发 7. 移动端页面开发 移动端页面开发 了解移动端页面与PC端页面开发的区别，学习移动端页面的开发流程。

文章目录 7.1. 移动端与PC端页面布局区别 移动端与PC端页面布局区别 视口 视网膜屏幕（retina屏幕）清晰度解决方案 7.1. 移动端与PC端页面布局区别 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 me...