清爽背景图片

篇一：带有小图标的清爽CSS表单设计

看下面的效果：

首页我们进行整体的规划：

建立一个容器main将表单元素及其它相关元素一起扔进去。

设置标签h1，放置User Login。

设置标签h2，放置“请输入您的用户名和密码”。

设置“Username”与“Password”表单提示文字的容器。

设置表单输入框。

设置密码找回的文字链接。

最终我们设置提交表单的按钮图片。

我们形成如下的xhtml代码：

Example Source Code

<div id="main">

<h1 id="title">User Login</h1>

<h2 id="login">请输入您的用户名和密码</h2>

<p class="formt">Username</p>

<p><input name="Username" type="text" class="username"></p>

<p class="formt">Password</p>

<p><input name="Password" type="password" class="password"></p>

<p id="forget"><a href="/" target="_blank">ForGet Password ? </a></p> <p id="button"><input type="image" src="loginin.gif" class="imgbutton" /></p>

</div>

下面我们开始进行CSS代码的编写，实现这一款表单效果。

我们发现h2元素title与表单提示文字的类formt，除了背景色不同，其它的属性是相同的，我们将它们合并起来编写，在后面我们单独定义类formt与title的不同之处，进一步简化代码。

Example Source Code

#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}

.formt { display:block; font-weight:800; background:#fff;}

title与的formt共同属性：

高度与宽度为208px、26px。

行高26px，文字缩进5px。

定义了字体及文字大小。

设置背景色为#ddd浅灰色。

类.formt进行单独定义：

设置为块元素，文字加粗。

由于title是h1标签，浏览器默认为加粗，所以不必再单独定义。

设置formt的背景色为#fff白色。

接下来我们设置h2“请输入您的用户名和密码”

Example Source Code

#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}

高度与宽度为208px、24px。进行上填充的调整，设置背景图片，文字缩进，以及字体加粗为100等。

同上面的情况类似，表单输入框类.username和类.password除了小图标的不同，其它的属性是相同的，进一步简化代码我们也将它们合并编写。

Example Source Code

.username,.password {

background:#fff;

border:1px solid #ccc;

color:#000;

font-family:verdana, tahoma, sans-serif;

font-size:12px;

width:196px;

height:22px;

margin-left:6px;

padding-left:20px;

line-height:20px;

}

背景色为#fff白色，边框1px、实线、#ccc灰色。

设置文字颜色，字体及大小。

设置输入框的高度与宽度196px、22px。

由于想要与提示文字左对齐，我们设置左边距为6px。

为了给小图标留下足够的空间，我们内容左填充为20px。

输入框input内的文字可能与小图标不能水平对齐，我们预调行高为20px。

Example Source Code

.username { background:url(username.gif) no-repeat 2px 2px;}

.password { background:url(password.gif) no-repeat 2px 2px;}

上面的代码分别给类.username和类.password定义小图标。需要你注意的是背景图片为不重复，定位在距左、距顶均为2px的地方。由于我们在上面的代码中，已定义了左填充为20px，小图标有足够的空间显示出来，而不用担心输入表单的文字会遮盖它。

下面我们定义忘记密码的链接与表单的按钮图片。

Example Source Code

#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}

#button { width:208px; height:28px; }

.imgbutton {margin-top:7px; margin-left:132px; }

关于忘记密码的链接，进行简单的定义就可以了，当然，你也可以完善它，定义链接的hover属性。我们设置按钮图片的容器button宽度和高度208px、28px。

表单提交按钮我们在xhtml中，是这样编写的：input type="image" src="loginin.gif"

这样编写的好处在于，我们输入完用户名和密码以后，除了可以用鼠标点击提交，直接按回车就可以提交表单。增强用户的易用性。

类imgbutton对表单按钮进行了设置，让它处在合适的位置，顶边距与左边距设置一下就可以了。

我们来看完整的CSS代码：

Example Source Code

* { margin:0; padding:0;}

#main { width:208px; margin:50px;}

#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}

#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}

.formt { display:block; font-weight:800; background:#fff;}

.username,.password {

background:#fff;

border:1px solid #ccc;

color:#000;

font-family:verdana, tahoma, sans-serif;

font-size:12px;

width:196px;

height:22px;

margin-left:6px;

padding-left:20px;

line-height:20px;

}

.username { background:url(username.gif) no-repeat 2px 2px;}

.password { background:url(password.gif) no-repeat 2px 2px;}

#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}

#button { width:208px; height:28px; }

.imgbutton {margin-top:7px; margin-left:132px; }

我们完成了这个表单的xhtml与css代码的编写。从这个小实例中，你应该能够掌握背景图片的灵活运用，这种应用的方式在CSS网页布局中是非常重要的，有很多效果是通过这种方式来实现的。

篇二：上百种设计_不同风格电视背景墙效果图

不同风格电视背景墙效果图

对于家装来说，客厅的装修尤为重要，它所体现的是整个房间的装修风格、档次和品位，而电视背景墙却是客厅装修的点睛之笔，这一笔尤其重要，能将客厅的神韵表现出来，也是体现主人个性化的一个特殊空间。那么装饰背景墙该如何选材？所选材料又能体现什么样的风格呢？下面笔者介绍一下装修中正流行的六类电视背景墙。

相关文章：风格各异 不同背景墙如何选择最搭电视

经济实惠的木质材料

对木质饰面板大家都不会陌生，在装修过程中应用的非常广泛，比如门窗，橱柜，家具等等，都有可能用到饰面板。目前，将它用作电视背景墙的人也越来越多了，因为它花色品种繁多，价格经济实惠，选用饰面板做背景墙，不易与居室内其它木质材料发生冲突，可更好地搭配形成统一的装修风格，清洁起来也非常的方便。

1

电视两边的白色造型都是木材材质

用饰面板做电视背景墙，可选择的花色很多，完全不用担心与居室无法搭配的问题，一般只需六七十元一张。

朴实自然的天然人造石

生活在嘈杂的大城市中，越来越多的人向往平静而惬意的田园生活，所以简约、自然的家居风格受到很多人的青睐。那么，选用一些朴实，天然的材料，能让整个家有一种轻松自然的感觉，电视背景墙作为体现客厅风格的重要元素之一，选用具有天然纹理的石材，可达到非常理想的效果。在简约、自然的客厅，用文化石点缀显得别具一格。

2

电视背后的材料是人造石

人造石带雕刻工艺

人造文化石是种新型材料，是用天然石头加工而成，色彩天然，更有隔音、环城公路、阻燃等特点，非常适合做电视背景墙，不过这种材料成本较高，根据石材的珍稀程度，价格在60-400元/m2间。

3

现代感强的玻璃、金属

采用玻璃与木材混搭

4

具有金属质感的背景墙

还是有很多人喜欢简约、现代的装修风格，采用玻璃与金属材料做电视背景墙，能给居室带来很强的现代感，所以它也是人们常用的背景墙材料，虽然其成本相对不是很高，不过施工难度较高。适当地镶嵌一些金属线，效果也不错。也有些消费者爱用烤漆玻璃做背景墙，对于光线不太好的房间还有增强采光的作用。

多姿多彩的墙纸、壁布

这几年，无论是墙纸还是壁布，加工工艺都有很大进步，不仅更加环保，还有遮盖力强的优点。用它们做电视背景墙，能起到很好的点缀效果，而且施工简单，如果你是个容易“喜新厌旧”的人，用墙纸，壁布做电视背景墙更换起来非常方便，由于品种繁多，它们价格差距很大，低的几元/平方米，高的几百元。 5

篇三：添加文件夹背景图片

添加文件夹背景图片

摘自互联网

大家都知道桌面有漂亮的壁纸，但是硬盘和文件夹却是白白的，感觉很枯燥。那么有什么方法让文件夹也有能像桌面一样有漂亮的背景呢？答案是肯定的 ，无须借助第三方软件，只要利用windows的desktop文件就搞定了。

一、在硬盘的分区下（比如说e盘）使用漂亮的背景，方法:

新建一个文本文档输入以下内容

[ExtShellFolderViews]

{BE098140-A513-11D0-A3A4-00C04FD706EC}={BE098140-A513-11D0-A3A4-00C04FD706EC}

[{BE098140-A513-11D0-A3A4-00C04FD706EC}]

Attributes=1

IconArea_Image=E:\图片\xxxxx.jpg★这里写图片地址

IconArea_Text=0x00000000

[.ShellClassInfo]

ConfirmFileOp=0

[Ctrl+A Select All]

红色部分分别是你要显示的图片所在的路径和字体颜色代码.

然后把它的扩展名.txt改为desktop.ini,放在c、d、e盘根下，然后你可以选择它的属性，把它隐藏起来更加清爽。这样就可以像桌面一样，有美丽的图片当背景了 注意：最好选择个颜色较浅的图片做背景，不然恐怕连文件夹的名字也看不清楚了

二、文件夹也像硬盘一样使用漂亮的背景。

首先要做的就是让你的文件夹下生成一个desktop.ini文件，（直接拷贝一个desktop.ini进去是没有效果的，我的文档是可以的）下面就以e盘下MP3文件夹更换背景为例介绍下方法：

（1）、右键点mp3文件夹，选择“属性”，“自定义”，最下面的“更改文件夹图标”，这时你可以为你的文件夹选择个好看的图标（如果觉的系统里的不好看的话可以到网上下载漂亮的ico文件）。选择好确定。此时你的文件夹图标已经更换，desktop.ini文件也已经生成，不过是隐藏的，要修改他先把他显示出来才行。别告诉我你不会查看隐藏的文件...（工具--文件夹选项--查看，把隐藏受系统保护的文件夹前的勾去掉、选中显示所有的文件和文件夹）

（2）、然后到e:\mp3下找到哪个生成的desktop.ini文件，双击打开就会发现他已经有了一些代码：

[.ShellClassInfo]

IconFile=图标文件路径及文件

IconIndex=3

解释下：

其中“iconindex=n”表示使用的图标是指定文件中的第几个图标，“iconfile=图标文件路径及文件名”表示文件夹使用的图标文件的路径及文件名，如：“iconindex=1，iconfile=C:\windows\regedit.exe”。保存文件后按F5键刷新，目标文件夹就变成了注册表文件的图标。

在以有的代码下加上下列代码：

[ExtShellFolderViews]

{BE098140-A513-11D0-A3A4-00C04FD706EC}={BE098140-A513-11D0-

A3A4-00C04FD706EC}

[{BE098140-A513-11D0-A3A4-00C04FD706EC}]

Attributes=1

IconArea_Image=E:\图片\xxxxx.jpg

IconArea_Text=0x00000000

保存就ok了。

三、给文件夹添加注释

还是打开desktop.ini文件，加入下面的代码：

[.ShellClassInfo]

InfoTip=你想显示的文字

保存后，将该文件夹的属性设为“只读”。以后当你用鼠标指向这个文件夹的时候，就会显示出你加入的注释

其实desktop.ini文件还有很多其他的用处，比如隐藏文件夹里的内容等等，和本文提及的内容关系不是很大，我就不再介绍了，最后祝大家玩的开心。

如果要改变文件夹中图标标识文字的颜色，则需要更多的技巧。如果需要按钮标识文字为黑色，什么都不用做; 如果要设定为白色，输入“IconArea_Text=0x00FFFFFF”(请确认x为小写字母)，然后敲击“Enter”键; 设定为红色，把上面命令“=”号之后的数字字母替换为“0x000000FF”; 设定为黄色，替换为“0x0000FFFF”; 设定为蓝色，替换为“0x00FF0000”; 设定为灰色，替换为“0x00808080”。这些代码代表着24位颜色配置表中不同的值，将红蓝绿色综合后得出: 0x00bbggrr(这个值从十进制的0或者十六进制00，到十进制的255或者十六进制的FF作为色深范围)

本文来源：https://www.bwwdw.com/article/ncsb.html