CSS 实用实例(推荐)

Background 背景 设置背景颜色

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

This is header 1

This is header 2

This is a paragraph

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

设置一张图片做为背景

body
{
background-image:
url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg')
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

垂直重复背景图片

body
{
background-image:
url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg');
background-repeat: repeat
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

水平重复背景图片

body
{
background-image:
url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg');
background-repeat: repeat-x
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

怎样放置背景图片(位置摆放)

body
{
background-image:
url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg');
background-repeat:
no-repeat;
background-position:
center;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

背景不滚动

body
{
background-image:
url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

The image will not scroll with the rest of the page

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

背景属性一行解决(用一行文字定义背景属性)

body
{
background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center;
}

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

This is some text

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • CSS 实用实例(推荐)

    Background 背景 设置背景颜色 body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} This is header 1 This is header 2 This is a paragraph [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 设置一张图片做为背景

  • 基于JS递归函数细化认识及实用实例(推荐)

    程序调用自身的编程技巧称为递归( recursion). 一个过程或函数在其定义或说明中又直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.用递归思想写出的程序往往十分简洁易懂. 一般来说,递归需要有边界条件.递归前进段和递归返回段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回. 注意: (1)

  • 使用JQuery实现图片轮播效果的实例(推荐)

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

  • RequireJS 依赖关系的实例(推荐)

    现在看看RequireJS带来的整洁的特点: 下面有个html页面: <html> <head> <title>configuration</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" href="../master/plu

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

  • php 人员权限管理(RBAC)实例(推荐)

    php-人员权限管理(RBAC) 权限管理可以想做vip的功能,普通用户和vip用户的功能是不一样的,大致会用到五张表:用户表.角色表.功能表,还有他们之间互相关联的表:用户与角色表.角色与功能表 我用到的五张表如下: 一. 首先写的是管理员页面 1.用下拉列表显示用户名 <div> <select id="user"> <?php require"../DBDA.class.php"; $db = new DBDA(); $sql =

  • PHP 读取大文件并显示的简单实例(推荐)

    使用PHP读取日志文件,当文件比较大的时候,会报内存不足,因此应该部分读取,读取指定的行数的数据 PHP代码: <?php class Test{ //日志路径 const LOG_PATH="E:\phpServer\Apache\logs\error.log"; const NGINX_LOG_PATH="E:\phpServer\\nginx\logs\error.log"; //显示的行数 const PAGES=50; public static f

  • Ajax的简单实用实例代码

    我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在UsersAction类中的checkUser方法中接收并验证前台的表单数据,针对不同情况,返回一个状态码code给jsp页面,然后在ajax1.jsp中通过$.post方法接受后台传递过来的状态码 做出不同的响应. 具体代码如下: 1.实体类 package com.bean; import java.io.Serializable; public class Users implements Serial

  • js原生日历的实例(推荐)

    突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript  的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *

  • 基于hover的用法实例(推荐)

    //hover,鼠标移入移出的另一种用法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=U

随机推荐