怎样用css使背景有立体感

html-css020

怎样用css使背景有立体感,第1张

教你如何制作具有立体感效果的我们详细的解释与说明CSS代码,看它是如何控制这个UL LI打造CSS横向菜单的:* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}首先我们进行了整体布局声明,声明了文字大小及居中的对齐方式。需要说明的是,在ff中,我们设置margin:0 auto。即可实现容器的居中了,但在IE中,这还不够,还需要在父容器中声明text-align:center。这一点我们要记得,不然容易出错。声明UL无序列表的宽度为520ox,下边框一象素的实现,颜色为#06f。我们设置了nav这个UL,距离顶部为20px、距离底部为零,左右的距离为auto。这就实现了nav在水平方向内是居中的,垂直方面上距离浏览器窗口20px。声明LI列表项为内联(行内)显示,列表预设标记为无。我们重点需要理解#nav li a:link,#nav li a:visited的定义,设置链接的样式。向左浮动,并且右边距为5px。这是设置链接元素从左向右排行,并且元素之间的右部间隔5px。设置填充,顶5px、右10px、下5px、左8px。这一设置可以使我们的链接文字处于合适的位置。取消链接文字的下划线,并设置链接文字的颜色为#000。链接元素的背景色为#ffe67d。左边框五象素的实线,颜色为#fc0。这一句话形成了我们的小竖条。我们通过下面#nav li a:hover形成鼠标激活的样式。链接文字的颜色变为#060。左边框五象素的实线,颜色为#f60。这样我们会动的小竖条菜单就制作完成了。看最终的代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" /><title>免费模板</title><style type="text/css">* {font-size:12px text-align:center}#nav {width:520px border-bottom:1px solid #06f margin:20px auto 0 auto}#nav li {display: inline list-style-type: none}#nav li a:link,#nav li a:visited {float:left margin-right:5px padding:5px 10px 5px 8px text-decoration: none color:#000 background:#ffe67d border-left: 5px solid #fc0}#nav li a:hover {color:#060 border-left: 5px solid #f60}</style></head><body><ul id="nav"> <li><a href="#">图象设计</a></li> <li><a href="#">网站运营</a></li> <li><a href="#">网络编程</a></li> <li><a href="#">创业指南</a></li> <li><a href="#">网站欣赏</a></li></ul></body></html>

随着前端技术的发展,安全问题已经从服务器悄然来到了每一个用户的的面前,盗取用户数据, 制造恶意的可以自我复制的蠕虫代码,让病毒在用户间传播,使服务器当掉. 更有甚者可能会在用户不知觉得情况下,让用户成为攻击者,这绝对不是骇人听闻。富客户端的应用越来越广,前端的安全问题也随之增多,今天就简单介绍下一些常见的攻击方式和预防攻击办法。

常见攻击

XSS (Cross Site Script) ,跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入的恶意html代码会被执行,从而达到恶意用户的特殊目的。XSS属于被动式的攻击,因为其被动且不好利用,所以许多人常呼略其危害性。但是随着前端技术的不断进步富客户端的应用越来越多,这方面的问题越来越受关注。举个简单例子 : 假如你现在是sns站点上一个用户,发布信息的功能存在漏洞可以执行js 你在 此刻输入一个 恶意脚本,那么当前所有看到你新信息的人的浏览器都会执行这个脚本弹出提示框 (很爽吧 弹出广告 :)),如果你做一些更为激进行为呢 后果难以想象。

CSRF(Cross Site Request Forgery),跨站点伪造请求。顾名思义就是 通过伪造连接请求在用户不知情的情况下,让用户以自己的身份来完成攻击者需要达到的一些目的。csrf 的攻击不同于xss csrf 需要被攻击者的主动行为触发。这样听来似乎是有“被钓鱼”的嫌疑哈哈。

多窗口浏览器这这方面似乎是有助纣为虐的嫌疑,因为打开的新窗口是具有当前所有会话的,如果是单浏览器窗口类似ie6 就不会存在这样的问题,因为每个窗口都是一个独立的进程。举个简单例子 : 你正在玩白社会, 看到有人发了一个连接,你点击过去,然后这个连接里面伪造了一个送礼物的表单,这仅仅是一个简单的例子,问题可见一般。

cookie劫持,通过获取页面的权限,在页面中写一个简单的到恶意站点的请求,并携带用户的cookie 获取cookie后通过cookie 就可以直以被盗用户的身份登录站点。这就是cookie 劫持。举个简单例子: 某人写了一篇很有意思的日志,然后分享给大家,很多人都点击查看并且分享了该日志,一切似乎都很正常,然而写日志的人却另有用心,在日志中偷偷隐藏了一个对站外的请求,那么所有看过这片日志的人都会在不知情的情况下把自己的cookie 发送给了 某人,那么他可以通过任意一个人的cookie 来登录这个人的账户。

我们该怎么做?

大致可以分为两类 1 一般用户 2网站开发人员。

首先我们来说说做为一个一般的web产品使用者,很多时候我们是被动的,是在不知情的情况下被利用的。那么我们可以:

1 对于安全级别较高的web应用访问 需要打开一个独立浏览器窗口。

2 对于陌生人发布的链接最好也是复制然后在新开的窗口中打开,当然最好的办法就是无视 – -。

对于开发人员来说我们得从相对详细的一些角度来分析:

对于xss 攻击 特点是攻击者的代码必须能获取用户浏览器端的执行权限,那么代码是从哪里来的呢,想要杜绝此类攻击出现 其实可以在入口 和出口 进行严格的过滤,这样的双保险应当说99% 的类似问题就被我们解决掉了,另外的1% 是那些蹩脚的浏览器带来的后遗症,相信在未来这种问题会越来越少的。

这里我对xss漏洞的形式作了一些整理

恶意代码值被作为某一标签的内容显示 (如果输入的是html 则html会被解析)例如你输入用户名 更新后用户名会显示到页面中的某一个标签内 如果你输入的是

popper.w<script src="hack.js" type="text/javajscript"></script>

那么如果不做过滤直接显示到页面, 会引进一个第三方的js 代码并且会执行。

策略:在不需要html输入的地方对html 标签 及一些特殊字符( ” < > &等等 )做过滤,将其转化为不被浏览器解释执行的字符

恶意代码被作为某一标签的属性显示(通过用 “ 将属性截断来开辟新的属性 或恶意方法) 这种情况往往是是开发人员为了实现功能可能会在某些dom标签上记录一些用户输入的信息例如你输入的用户名 会在页面中的标签中以 title 的形式出现 这时候 如果 你输入的是精心设计的内容 那么 看看 这个

<a title="popper.w" onclick="alert(1)">popper.w" onclick="alert(1)</a>

这里我实际上输入的内容是“popper.w” onclick=”alert(1)”,当然你可以在上边写更多的内容。

策略:对属性中可能存在截断的一些字符进行过滤 属性本身存在的 单引号和双引号都需要进行转码。

恶意代码被作为html代码本身显示 (常见的html编辑器) 这种情况存在的问题最多,不再这里举例子了。

策略:最好对用户输入的html 标签及标签属性做白名单过滤,也可以对一些存在漏洞的标签和属性进行专门过滤。

恶意代码被作为一段json字符串显示 (通过 变量截断 创造新的 恶意的js 变量 甚至是可执行的代码) 这个问题的关键是用户输入的信息可能会成为页面中js 代码的一部分。

策略:对属性中可能存在截断的一些字符进行过滤 属性本身存在的 单引号和双引号都需要进行转码。

对于crsf 和cookie 劫持

特点 隐蔽性比较高 有些时候是先利用xss 漏洞 然后再做 欺骗的

策略

通过 referer、token 或者 验证码 来检测用户提交。

尽量不要在页面的链接中暴漏任何与用户唯一号(用户id)有关的信息。

对于用户修改 删除 提交的操作最好都使用post 操作 。

避免全站通用的cookie 严格的设置cookie的域。

ok 就写到这里~

上边讲的都是一些比较常见的安全问题,主要是从js hack 方面来讲的,随着前端技术的不断发展进步,更多的安全问题可能会展现在我们面,对于开发者来说大多数的问题是可以在开发阶段避免的,所以可怕的不是hack 可怕的是我们对自己的产品安全的松懈

1.CCS是一个通过业界高素质的安装人员来协调、控制和确保布线各方面质量的程序项目,包括系统设计、安装和在工业领域里通过合格安装者的测试以及后期的维修

2.CSS即Cascading Style Sheet(级联样式单)的缩写,我们又常称这为风格样式单Style Sheet,顾名思义,是用来进行网页风格设计的。