前端学习之利用Dreamweaver（3）

在HTML标签中，属性和属性可选的值非常多，对于新手来说不容易记忆，这时我们可以使用Dreamweaver来帮助自己。
在我用的Dreamweaver CC这个版本中，左下角的CSS设计器有属性一栏，它包含了大多数我们平时经常用到的CSS属性，它们不仅有对应的中文解释，还给出了可选择的值的提示，在刚刚开始接触HTML的时候，我们可以利用它来帮我们更快的上手。当然，当我们更加熟悉之后，直接敲代码或许会更快一年。下面是对CSS设计器中属性的一些总结。
-Dreamweaver的属性可以分为下面几种

• 布局：大小，边距，填充，定位等；
• 边框-border：大小，颜色，样式等；
• 文本-font：颜色，样式，阴影等；
• 背景-background：设置图像和阴影等。
• 其他：设置列表。

下面我们就来试着点击一下，看看代码会有什么不同。
首先建好一个有着基本内容的网页。然后我们点击源为style。再点击选择器点右上加号，输入原先HTML里有的几个类名，块名等。最后选择一个选择器之后，就可以点击属性里面的值来设置边框，字体，布局，背景等等。现在发现原先网页开始发生了一些变化。

这是设置前

这是设置后//感觉更丑了哈哈

这是代码新增的部分

<style>
.architect {
    color: green;
    border: 5px solid #CCFFFF;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
li:first-child{color:red;}
a:hover{color:green;}
body ol {
    float: right;
    font-variant: normal;
    font-weight: 300;
    font-size: large;
    -webkit-box-shadow: 5px 5px 5px;
    box-shadow: 5px 5px 5px;
    background-position: 0% 0%;
    border-color: #CCCCFF;
    border-width: 3px;
}
</style>

怎么样？代码很多，属性很复杂，不过使用Dreamweaver点一点就可以了。
不过我觉的熟悉后，还是直接敲代码会更快，更系统。
另外，这些代码是出现在head中的，当我们外联CSS文件时，只需要在源处点CSS的文件名就可以直接将属性添加到外联的文件中，保存或预览后即可看见变化。