編碼的世界 / 優質文選 / 生涯

簡單html,用CSS設計一個留言板

2022年5月16日
-   

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="imageleonardo1.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="imageleonardo02.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="imageleonardo06.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="imageleonardo04.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="imageleonardo05.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="imageleonardo06.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>

代碼整體還是比較簡單的，沒有複雜的設計。 歡迎各位指正、補充
謝謝瀏覽，祝早日成為大牛

熱門文章