<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                **問題:** 今天想寫點前端布局方面的小東東,來來,咱們來整個小的留言板吧,如果是你你會怎么寫呢?先去抄個效果圖 ![](https://box.kancloud.cn/b0008eec6dc3502a86d901d7d6225661_501x536.png =300x400) **解決方案:** **1)html代碼部分如下** ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入css樣式--> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="container"> <form> <h2>來 , 說說你在做什么 , 想什么</h2> <div> <input id="userName" class="f-text" value="" /> <p id="face"><img src="img/face1.gif" class="current" /><img src="img/face2.gif" /><img src="img/face3.gif" /><img src="img/face4.gif" /><img src="img/face5.gif" /><img src="img/face6.gif" /><img src="img/face7.gif" /><img src="img/face8.gif" /></p> </div> <div><textarea id="conBox" class="f-text"></textarea></div> <div class="tr"> <p> <span class="countTxt">還能輸入</span><strong class="maxNum">140</strong><span>個字</span> <input id="sendBtn" type="button" value="" title="快捷鍵 Ctrl+Enter" /> </p> </div> </form> <div class="list"> <h3><span>大家在說</span></h3> <ul> <li> <div class="userPic"><img src="img/face.gif" /></div> <div class="content"> <div class="userName"><a href="javascript:;">freecode</a>:</div> <div class="msgInfo">每天堅持寫一點點代碼,解決一個個小問題,日積月累你會發現,原來堅持下去就可以成為一個牛逼的程序猿!</div> <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">刪除</a></div> </div> </li> <li> <div class="userPic"><img src="img/face2.gif" /></div> <div class="content"> <div class="userName"><a href="javascript:;">設計師</a>:</div> <div class="msgInfo">不要以為程序猿很牛逼,沒有我們設計師,你們做出來的東西在用戶眼里全都是垃圾,我是設計師,我驕傲!</div> <div class="times"><span>07月04日 15:05</span><a class="del" href="javascript:;">刪除</a></div> </div> </li> <li> <div class="userPic"><img src="img/face4.gif" /></div> <div class="content"> <div class="userName"><a href="javascript:;">IOS攻城獅</a>:</div> <div class="msgInfo">以后能不能不要總是拿著安卓手機來問我,為什么我的app無法卸載,無法登錄,記住我是ios攻城獅!</div> <div class="times"><span>07月04日 15:05</span><a class="del" href="javascript:;">刪除</a></div> </div> </li> </ul> </div> </div> </body> </html> ~~~ **2)css代碼部分如下** ~~~ body,div,h2,h3,ul,li,p{margin:0;padding:0;} a{text-decoration:none;} a:hover{text-decoration:underline;} ul{list-style-type:none;} body{color:#333;background:#a7ab8c;font:12px/1.5 \5b8b\4f53;} #container{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;} #container form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;} #container form{/**background:url(img/boxBG.jpg) repeat-x 0 bottom;**/padding:0 20px 15px;} #userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff;padding:3px 5px;font:14px/1.5 arial;} #userName.active,#conBox.active{border:1px solid #7abb2c;} #userName{height:20px;} #conBox{width:448px;resize:none;height:65px;overflow:auto;} #container form div{position:relative;color:#999;margin-top:10px;} #container img{border-radius:3px;} #face{position:absolute;top:0;left:172px;} #face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);} #face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);} #sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;} #sendBtn.hover{background-position:0 -30px;} #container form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;} #container .list{padding:10px;} #container .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;} #container .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;} #container .list ul{overflow:hidden;zoom:1;} #container .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;} #container .list ul li.hover{background:#f5f5f5;} #container .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;} #container .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;} #container .list .userName{display:inline;padding-right:5px;} #container .list .userName a{color:#2b4a78;} #container .list .msgInfo{display:inline;word-wrap:break-word;} #container .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;} #container .list .times span{float:left;} #container .list .times a{float:right;color:#889db6;display:none;} .tr{overflow:hidden;zoom:1;} .tr p{float:right;line-height:30px;} .tr *{float:left;} ~~~ **后續我會把代碼統一匯總發布到git上,有興趣的小伙伴可以從那里下載。** 這就是我今天整的一個留言板,如果是你你會怎么寫呢?歡迎給我提問題,進行思考和交流。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看