怎样用css实现div选中的效果

html-css018

怎样用css实现div选中的效果,第1张

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:\x0d\x0a1.被点击时的效果可以用div:active{ css }\x0d\x0a\x0d\x0a2.鼠标覆盖在上面的时候可以用div：hover{ css}\x0d\x0a\x0d\x0a3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：\x0d\x0a\x0d\x0aa.先给div添加一个选中的样式比如on{css}；\x0d\x0a\x0d\x0ab.然后在js中$('div').click(function{\x0d\x0a$('div').toggleClass(' ','on')\x0d\x0a})\x0d\x0a这是jquery自带的一个方法，点击div切换2个class,

html中，有的css样式在样式表里不起作用是设置错误造成的，解决方法为：

1、在如图网页中，我们可以看到style中的样式列表，以及所展示的效果图。

2、将style中的全部css样式选中，然后复制或者剪切。

3、然后ctrl+N新建一个CSS样式文件，如图所示，然后创建。

4、在创建的css样式文件中，将刚才复制的文件粘贴到这里。

5、在导出时，需要放到之前网页所在的同文件夹位置，可以新创建一个css文件夹，方便寻找导入。

6、然后回到html文件中，将之前的style样式全部删除即可，然后输入link链接标签，将之前保存的css样式链接进来，保存。

用css写足矣，css中有focus这个神奇的东西，难道你没有用过吗，给你个例子吧

html:

<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">

css:

.input {

border:0 

padding:10px 

font-size:1.3em 

font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI"

color:#ccc 

border:solid 1px #ccc 

margin:0 0 20px 

width:300px

-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2) 

-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2) 

box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2)

-webkit-border-radius: 3px 

-moz-border-radius: 3px 

border-radius: 3px

}

input:focus { 

    outline: none !important

    border:1px solid red

    box-shadow: 0 0 10px #719ECE

}