css3书写UI的css3样式

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="wr_apper">

<h1>css3书写UI的css3样式</h1>

<div class="ds_post_main">

<div class="ds_avatar">

<a><img src="images/zzzzsc.jpg"></a>

</div>

<div class="ds_comment_b0dy">

<a class="user_name">css3书写UI的css3样式</a>

css3书写UI的css3样式

</div>

</div>

</div>

4、初始化css代码。

<style>

body {font-family:Arial;font-size:12px;background:#E5E6D0 url(images/bg.jpg) repeat 0 0;}

a {text-decoration:none;}

a img {border:0;}

a:hover {text-decoration:underline;}

.user-name { font-size:14px; font-weight:bold;color:#DE4C1C }

.wrapper {width:600px;margin:0 auto;}

h1 {font-size:18px;line-height:30px;text-align:center;margin:100px 0;}

h1 span {font-size:12px;color:#696A52;}

</style>

5、书写css代码。css代码看图片

6、代码整体结构。

7、查看效果。