前端开发 | 在线支持

使用CSS3样式表，制作一个个性的留言板界面。本例将综合应用CSS3的相关技术点，包括插入信息、设置文字样式、设置自动换行、使用元素旋转效果、使用样式过渡等。通过上机实践，使读者能够熟练掌握CSS3样式应用，并对其有一个更加直观的认识。

留言板主要包括用户信息、留言信息，用户信息可以使用户名、用户头像等，留言信息与对应发表留言的用户信息应处于同一区域。为了使页面更加美观，可以对用户头像以及留言文本增加相应的样式。

【示例】

HTML

<div id="container">
    <div class="float"> <img src="img/b.jpg"/> </div>
    <div class="float">
        <div class="content"> If you buy this phone on amazon or anywhere else for the $1000+ price tag, your just a fool. This phone is great, 
            but only slightly better than the 4S which also runs ios6. The iPhone 5 has a bigger screen which is useful, 
            a slightly better processing chip, and that's about it. If you don't own an iphone, 
            getting a 4 or 4S is a better deal since will cost you like 40% less but is only like 10% inferior to the iphone 5. </div>
    </div>
    <div class="clear"></div>
    <div class="float"> <img src="img/c.jpg"/> </div>
    <div class="float">
        <div class="content"> ...... </div>
    </div>
    <div class="clear"></div>
    <div class="float"> <img src="img/d.jpg"/> </div>
    <div class="float">
        <div class="content"> ...... </div>
    </div>
    <div class="clear"></div>
    <div class="float"> <img src="img/e.jpg"/> </div>
    <div class="float">
        <div class="content"> ......</div>
    </div>
    <div class="clear"></div>
</div>

CSS

div[id="container"] { /*设置最外层容器div元素样式*/
    padding: 10px;
    background-image: url(img/bg.JPG);
}
img { /*设置页面中用户头像样式*/
    margin: 15px 0px 0px 10px;
    width: 100px;
    height: 100px;
    border-radius: 5px; /*设置边框圆角样式*/
    -webkit-transform: rotate(10deg); /*设置元素旋转*/
    transform: rotate(10deg); /*设置元素旋转*/
    -webkit-transition: -webkit-transform 1s linear;/*设置样式过渡方式*/
    transition: transform 1s linear;/*设置样式过渡方式*/
}
img:hover { /*设置鼠标悬浮时样式*/
    -webkit-transform: rotate(180deg); /*设置元素旋转*/
    transform: rotate(180deg); /*设置元素旋转*/
}
.content { /*设置页面中留言信息样式*/
    width: 650px;
    position: relative;
    left: 30px;
    background-color: #e2eff9;
    border-radius: 20px; /*设置边框圆角样式*/
    padding: 10px;
    margin-top: 10px;
    word-wrap: break-word; /*设置自动换行*/
}
.content:hover { /*设置鼠标悬浮时样式*/
    text-shadow: 1px 1px 1px gray; /*设置文字阴影样式*/
}
.content:after { /*设置插入三角图像*/
    content: "\00a0";
    display: block;
    position: absolute;
    top: 15px;
    left: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent #e2eff9 transparent transparent;
}
.float { /*设置float类样式*/
    float: left;
}
.clear { /*设置clear类样式*/
    clear: both;
}

下载源代码