使用CSS如何实现鼠标点击元素后向该元素添加样式

html-css08

使用CSS如何实现鼠标点击元素后向该元素添加样式,第1张

使用CSS实现鼠标点击元素后向该元素添加样式，首先需要理解这个点击事件，通过单独的css或者是html是无法实现的，一般都需要结合Js来做，需要获取到这个元素，然后在通过js来改变元素的样式，在html中需要添加一个点击事件，也就是onclick，然后就是可以来实现，具体看下代码：

<html>

<head>

<style>

#round{

width:300px

height:200px

}

</style>

</head>

<script>

function iLeft(){

var oDiv = document.getElementById('round')

oDiv.style.left = 400+'px' //通过js改变这个div的left值

}

</script>

<body>

<div id='round'>

<p><a href='' onclick="iLeft()" >我是测试文字</a></p>

</div>

</body>

</html>

.portal-layout-cell-banner{

background: url(images/banner2.jpg) no-repeat 100% 100%

border:none

width:100%

height:100%

}

如果不需要兼容ie7一下的话，搞定

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使开发和部署非常地直截了当。

应用场景

HTTP诞生之初主要是应用于WEB端内容获取，那时候内容还不像现在这样丰富，排版也没那么精美，用户交互的场景几乎没有。对于这种简单的获取网页内容的场景，HTTP表现得还算不错。

但随着互联网的发展和WEB2.0的诞生，更多的内容开始被展示（更多的图片文件），排版变得更精美（更多的CSS），更复杂的交互也被引入（更多的JS）。用户打开一个网站首页所加载的数据总量和请求的个数也在不断增加。