技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要…

阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很简单,只需要对文字居中,对背景元素设置从中心发散的放射渐变即可,代码如下: // HTML代码 <div class="box">赞</div> // CSS代码: .box{ width: 200px; height: 200px; font-size: 80px…

相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐. 如设计师设计了一张背景图片作为标题背景,如图5.18所示.对于用电脑浏览网页的用户来说,标题基本不存在折行现象,布局也基本是固定宽度的,因此直接使用设计师给出的背景图即可.但是这个页面主要是在手机上显示,标题根据长度不同可能占1行,也可能占3行,如果采用图片就必须根据不同的情况放不同的背景图,实现起来很复杂. 图5.18  设计师给出的背景 好在这张背景图实际是从左到右由深紫蓝色渐变至…

CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开. 例如下面的代码: background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.…

线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear-gradient(red, blue); } 上述代码的效果如图5.9所示. 图5.9  最简单的线性渐变效果 如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: .test { background:-webkit-linear-gradient(red,…

<Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图3 通过前面的配置和编码过程,读者应该已经迫不及待地想检验一下网站效果了.查看网站效果首先需要通过manage.py启动Web服务器,代码如下: #cd djangosite #python manage.py runserver 0.0.0.0:8001 Performing system checks..…

在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立一个路由响应函数: from django.http import HttpResponse def welcome(request): returnHttpResponse("<h1>Welcome to my tiny twitter!</h1>") 该代码定义…

为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp 应用名称 其中的manage.py是建立项目时在项目目录中产生的命令行工具,startapp是命令关键字,举例如下: #cd djangosite #python manage.py startapp 命令完成后会在项目目录中建立如下目录及文件结构: app/ __init__.py admin.…

8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目根目录下创建package.json文件,命令如下: npm init 根据引导配置项目信息.然后安装Gulp依赖包,命令如下: npm install gulp –save-dev 在项目根目录下,创建gulpfile.js文件,内容如下: var gulp = require("gulp&quo…

Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1.基础语法都觉得很好入门,当然,也的确很好入门,但一些例子要动手,不要做伸手党. 2.一些框架要熟练应用,开发起来能事半功倍. 3.一些关键的技术,如less,sass等,要有所了解,这个我觉得还是有一定难度的,看完了,我没有很具体的实践. 4.看这些书,学学别人的实践方法,站在巨人的肩膀上,我想我们…