一、元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离，如果两元素都设置了margin属性，浏览器只 对较大值有效。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>div{ width:100px;height:50px;padding:20px;margin:20px;background-color:#ccc...
背景颜色（background-color） CSS可以用纯色来作为背景，也可以将背景设置为透明,background相当于xhtml中的bgcolor。它的两个值： transparent（默认值，透明） color(指定的颜色，和文本颜色的设置方法相同)示例： body {background-color: black;} h1 {background-color: #00ff00;} h2 {background-color: transparent;} p {background-color: rgb(0,0,255);}背景图片（background-image） 用一张图片作...
CSS样式可以精确控制HTML元素的背景、边框的样式和外观，也可以精确控制边框的线型和形状。其中，背景相关属性可以用于控制背景色、背景图片等属性。在控制背景图片的同时还可以控制背景图片的排列方式。 常用的背景相关属性如下：background：设置对象的背景样式，是一个复合属性，可以用于同时设置背景色、背景图片、背景重复模式等属性。 该复合属性可以分开写为以下几个属性：background-color：设置背景色。如果同时设置...
1，Li列表 通过ul 和 li 的方式，我们可以构造出一些无序列表。通过ul+li，我们不仅可以做出一些漂亮的菜单，也可以做出一些完美的树形结构。 ul+li默认样式在前面有个小黑点，实际项目中我们可以通过背景来代替这个小黑点。下面我们看2个实例：http://demo.jb51.net/html/cssbackground/a1/demo1.htmlhttp://demo.jb51.net/html/cssbackground/a1/demo2.html2,文本替换 文本替换也是项目中比较常见的技术。实际开发中经常需要使用...
在Web开发中我们经常要碰到这样的问题：在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示。通常水平居中显示在Css中是很容易做到的，而垂直居中就需要使用一些Css的技巧：1. 首先为了能使得网站能够根据浏览器大小自适应，我们需要将页面的body元素height值设为100%，而在这之前，我们需要将xhtml验证从网站头删除。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...
input{ background-color:expression(this.readOnly==true?"#EEEEEE":"#FFFFFF"); } input[readonly]{ background-color:#EEEEEE; }原文：http://www.cnblogs.com/superJF/p/4398770.html
CSS中背景的使用 CSS中列表的使用 15.1 CSS中背景的使用 属性名称 属性值 说明 background-attachment scroll 设置背景图像会随视窗滚动 条的移动而移动。 fixed 设置背景图像不会随视窗滚动条 的移动而移动。 background-color 十六...
background-size与背景图片填满div在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求background-size的取值及解释background-size共有三种属性，分别为background-size: coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn‘t get squished). The ima...
<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%"/></div>原文：http://www.cnblogs.com/yutaoyao/p/4164415.html
CSS Filter 是 IE 特有的技术，其他浏览器均不支持，所以为了最大的兼容性及标准化，应尽量避免为 IE 单独使用 Filter，如需要其某些特效，应同时考虑其他浏览器， 图片渐变 复制代码代码如下:<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)"> 表格渐变 复制代码代码如下:<table style="FILTER: Alpha( style=1,opacity=25,finis...
1、 背景颜色background-color:后面跟颜色属性2、 背景图片background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复的话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。参数none：无背景（默认）url：使用绝对或相对地址指定背景图像3、 背景平铺即所选背景图片是否填充整个样式区域语法background-repeat : repeat | no-repe...
网格 html {background: #58a;background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);background-size: 50px 50px, 50px 50px,10px 10px, 10px 10px;}具体效果见链接波点可以用如下代码来实现background: #655; background-image:...
1.设置页面的背景颜色body{margin:0px;background-color:lightskyblue;}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我的CSS</title></head><body><h1>我的CSS web页！</h1><p>Hello World！</p></body></html>2.设置不同元素的背景颜色1h1{ 2 background-color:roy...
本文属于 CSS 绘图技巧其中一篇，系列文章：在 CSS 中使用三角函数绘制曲线图形及展示动画CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧...
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */ 2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */ 3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */ 4 background...