jquery /css3 全屏的渐变背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>全屏的渐变背景</title>
</head>
<style>
*{margin: 0;padding: 0;}
.test{
width:100%;
height: 500px;
background:-webkit-linear-gradient(top,#3048b6,#ffcdd6);
background:-webkit-gradient(linear, 0 0, 100% 100%, from(#ffcdd6),to(#3048b6));
background:-webkit-linear-gradient(-135deg, #e87715, #fba860);
}
</style>
<body>
<div class="test"></div>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$('.test').css('height',$(window).height());
</script>
</body>
</html>
jquery /css3 全屏的渐变背景的更多相关文章
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- AnimatedModal.js – CSS3 全屏模态窗口
AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...
- jQuery/CSS3大屏下拉菜单 自定义子菜单内容
这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- 第161天：CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- 一款基于jQuery的全屏广告图片焦点图
之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览 源码下载 实现 ...
- jQuery 扩展 全屏切换
(function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...
- css3全屏背景显示
background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...
- jquery.fullpage 全屏滚动
参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...
随机推荐
- regular expression 在线检测的网站
http://regexone.com/ 学习网站 http://regexone.com/lesson/optional_characters? http://regexone.com/less ...
- YTU 2411: 谁去参加竞赛？【简单循环】
2411: 谁去参加竞赛?[简单循环] 时间限制: 1 Sec 内存限制: 64 MB 提交: 461 解决: 261 题目描述 学校要举办大学生程序设计竞赛,老师要求期末考试成绩在平均成绩以上的 ...
- AutoIT: FileReadLine可以对文件进行读行操作
$fHandle= ) Then $line= FileReadLine($fHandle) Then ExitLoop Wend EndIf FileClose($fHandle)
- AutoIT: 对Windows桌面的一些操作
$handle= WinGetHandle("Program Manager") $ctrl= ControlGetHandle("ProgramManager" ...
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- 《10 minutes to pandas》（转）
原文出处:http://pandas.pydata.org/pandas-docs/stable/10min.html 10 Minutes to pandas This is a short int ...
- glyphicon 图标的使用
基本用法<span class="glyphicon glyphicon-search"></span>可以将图标放于按钮于链接中,一个大按钮,按钮的内容是 ...
- Linux 常用命令十 which cal date
一.which命令 查找一个目录所在的路径: wang@wang:~/workpalce/python$ which ls /bin/ls 二.cal命令 wang@wang:~/workpalce/ ...
- P4357 [CQOI2016]K远点对（KDTree）
传送门 又一次产生了KDTree本质就是爆搜的感觉-- 大概就类似于p4169,只不过是从最近点对变成了第\(k\)远点对 我们开一个小根堆,里面放\(k\)个元素,起初全为\(0\),然后每一次都把 ...
- html语义化与前端页面排版规则
1.使用div进行布局,不要用div进行无意义的包裹 span行内常见元素 2.可以使用div和p的情况下,尽量用p.p有默认上下间隔字体加粗等,可以对终端有适配 3.需要强调的文本,可以包含在st ...