css背景精华所在+前端页面开发流程
background属性
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
a、background-color 设置背景色
b、background-image 设置背景图片地址
c、background-repeat 设置背景如何重复平铺
d、background-position 设置背景图片的位置
e、background-attachment 设置背景图片是固定还是随着滚动条滚动
实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这样做,这样性能更高,而且兼容性更好。
比如:background:#f00 url(bg.png) no-repeat left center fixed
background:#f00 url(bg.png) no-repeat 10px 25px fixed
前端页面开发流程
a、创建页面项目目录。
b、使用Photoshop对效果图切图,切出网页制作中需要的小图片。
c、将装饰类图像合并,制作雪碧图。
d、结合Photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面。
css背景精华所在+前端页面开发流程的更多相关文章
- 前端页面开发,最低兼容IE 8的多设备跨平台问题解决!
项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...
- vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03
目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...
- CSS 背景图像 填充整个页面示例
background-image 属性可以设置背景图像. 背景图像可以填充整个页面的,也可以填写一部分. background-image 属性的使用很简单:background-image:url( ...
- 我的前端页面开发js简易有效环境
前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task ...
- flask实战-留言板-Web程序开发流程
Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...
- X5的UI部分和传统Web页面开发的差异
http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...
- 自适应 or 移动前端页面布局的问题?
说出来,还请各位看官不要笑 - -.哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 .有幸哪位看官清楚这些的话,希望能不吝赐教 .A.meta <meta name=& ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 0016 CSS 背景:background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
随机推荐
- c#基础学习(0630)之面向对象总习
面向对象总习 1.封装.继承.多态 ****字段:存储数据,访问修饰符应该设置为private私有的 ****属性:保护字段,对字段的取值和赋值的限定 ****new关键字: 1.在堆中开辟空间(引用 ...
- JavaScript pop()函数弹出数组最后数据
改变数组中数据的另一种方法是用 .pop() 函数. .pop() 函数用来“抛出”一个数组末尾的值.我们可以把这个“抛出”的值赋给一个变量存储起来. 数组中任何类型的数据条目(数值,字符串,甚至是数 ...
- [IDE]快捷键整理
VS Resharper eclipse 备注 运行 Ctrl+F5 - Ctrl+F11 调试 F5 - F11 逐语句执行 F11 - F5 IE.FF: F11 逐过程执行 F10 ...
- 高并发第十单:J.U.C AQS(AbstractQueuedSynchronizer) 组件:CountDownLatch. CyclicBarrier .Semaphore
这里有一篇介绍AQS的文章 非常好: Java并发之AQS详解 AQS全名:AbstractQueuedSynchronizer,是并发容器J.U.C(java.lang.concurrent)下lo ...
- align-items (适用于父类容器上)
align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式. 语法 align-items: flex-start | flex-end | center | ...
- hello Groovy
Groovy [rocky@www ~]$ curl -s get.sdkman.io 1. 下载 [rocky@www Downloads]$ wget https://dl.bintray.com ...
- 【PyQt5 学习记录】007:改变窗口样式之一
class MainWindow(QMainWindow): 2 def __init__(self, parent=None): 3 super(MainWindow, self).__init__ ...
- JS计算字符串长度(兼容后端PHP)
/*** 计算字符串长度* 参数是要计算的字符串* 返回值当前字符串的长度*/function charactersLen (words) { let tempMapWordNum = {} let ...
- hihocoder [Offer收割]编程练习赛12 [1494] ---- 一面砖墙
原题链接 一面砖墙 算法分析 设墙的宽度为 range,则需要统计横坐标为 1,2,3,4,...,range-1 处的墙缝数,取最大的墙缝数(记为maxCrevices),从该处划一道竖线,竖线穿过 ...
- 612.1.003 ALGS4 | Stacks and Queues
Algorithm | Coursera - by Robert Sedgewick Type the code one by one! 不要拜读--只写最有感触的!而不是仅仅做一个笔记摘录员,那样毫 ...