1.被点击时的效果可以用div:active{
css
}
2.鼠标覆盖在上面的时候可以用div：hover{
css}
3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：
a.先给div添加一个选中的样式比如on{css}；
b.然后在js中$('div').click(function{
$('div').toggleClass('
','on')
})
这是jquery自带的一个方法，点击div切换2个class,
1、打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。
2、在body标签内输入：<div class="one">最喜欢玩游戏</div>；这是图形框的代码，以及要居中的文本内容。
3、在body标签前面位置，输入：
<style>
.one{
width:400pxheight:220pxborder:red solid 1px
}
</style>
5、输入完保存，摁F12键弹出页面，可以看到图框中的文字没有居中。
6、要想文本文字居中，先加上些代码内容。
7、然后增加内容后保存，恩F12键，跳转到页面看效果，即可看到文本居中。
