CSS设计一个留言板
制作一综合应用 CSS
相关技术，留言板主要包括用户信息、留言信息，用户信息可以是用户名、用户头像等，留言信息与对应发表留言的用户信息应处于同一区域。为了使页面更加美观，可以对用户头像以及留言文本增加相应的样式
看一下效果吧
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
</head>
<body>
<div id="container">
<div class="float">
<img src="image\leonardo1.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
<div class="float">
<img src="image\leonardo02.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
<div class="float">
<img src="image\leonardo06.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
<div class="float">
<img src="image\leonardo04.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
<div class="float">
<img src="image\leonardo05.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
<div class="float">
<img src="image\leonardo06.jpg">
</div>
<div id="float">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consectetur illo excepturi quibusdam, quis nobis aut,
sed doloremque vitae praesentium odio labore deserunt
sunt temporibus sapiente obcaecati voluptas officia id amet.
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
样式设计
<style>
.container{
padding: 10px;
background-color: burlywood;
text-align: center;
margin: 0 auto;
}
img{
margin:0px -120px 20px 10px;
width: 120px;
height: 120px;
border-radius: 8px;
/* 设置图片旋转角度 */
-webkit-transform : rotate(5deg);
-webkit-transition: -webkit-transform 1s lin;
}
.content{
width: 650px;
height: 90px;
position: relative;
left: 160px;
background-color: #666;
border-radius: 25px;
padding: 15px;
margin-top: 10px;
/* 设置自动换行 */
word-wrap: break-word;
}
.float{
float: left;
}
.clear{
clear: both;
}
</style>
代码整体还是比较简单的，没有复杂的设计。
欢迎各位指正、补充