国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

慕課網筆記--不同開發人員制作用戶發言列表的不同思路

番茄西紅柿 / 780人閱讀

摘要：章節微博用戶發言列表視頻中提供了初級中級高級開發人員可能的不同布局方式。對整個用戶發言區域進行整體布局，隨后用浮動吧用戶頭像叉出去。這里視頻中給右上角發布時間用的是絕對定位。有各種不同的實現方法，可以多嘗試，打開思路。

章節 2-1 微博用戶發言列表

視頻中提供了初級中級高級開發人員可能的不同布局方式。個人覺得，最大的區別是，初級布局方法是div+浮動，高級方法偏向于使用語義化標簽。

以下是看完視頻后自己寫的，與課程提供代碼不同。

附上效果圖

 

初級的代碼如下：

主要是用DIV布局，左邊圖像進行浮動。

.div1{
 margin:20px;
.left1 img{
 float: left;
 border: 1px solid gray;
 padding: 5px;
 margin-left:20px;
.right1{
 width: 500px;
 background-color: rgb(177, 216, 243);
 border: 1px solid gray;
 margin-left:100px;
 padding: 10px;
.right1 h6{
 padding: 10px;
.right1 span{
 float: right;
 color: gray;
 margin-top: -5px;
}

 


 div 
 div 
 img src="images/head02.jpg" alt="pthoto" 
 /div 
 div 
 span 10分鐘前 /span 
 h6 櫻桃小丸子 /h6 
 p 奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
 2005年4月正式批準運營的遠程教育公共服務體系，
 為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
 報名、學習輔導、課程考試、交費等7X24小時學習支持服務
 400-00000000。 /p 
 /div 
 /div

 

中級代碼去掉了左邊div，直接修改img屬性。

.div2{
 margin:20px;
.div2 img{
 float: left;
 border: 1px solid gray;
 padding: 5px;
 margin-left:20px;
.right2{
 width: 500px;
 background-color: rgb(177, 216, 243);
 border: 1px solid gray;
 margin-left:100px;
 padding: 10px;
.right2 h6{
 padding: 10px;
.right2 span{
 float: right;
 color: gray;
 margin-top: -5px;
}

 

 div 
 img src="images/head02.jpg" alt="pthoto" 
 div 
 span 10分鐘前 /span 
 h6 櫻桃小丸子 /h6 
 p 奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
 2005年4月正式批準運營的遠程教育公共服務體系，
 為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
 報名、學習輔導、課程考試、交費等7X24小時學習支持服務
 400-0000000。 /p 
 /div 
 /div

 

高級的代碼是去掉左邊，右邊div。對整個用戶發言區域進行整體布局，隨后用浮動吧img（用戶頭像）叉出去。

這里視頻中給右上角發布時間用的是絕對定位。我用的還是修改盒子的方法。

.div3{
 margin:20px;
 width: 520px;
 background-color: rgb(177, 216, 243);
 border: 1px solid gray;
 margin-left:120px;
.div3 img{
 float: left;
 border: 1px solid gray;
 margin-left:-80px;
 padding: 5px;
.div3 h6{
 padding: 10px;
.div3 span{
 float: right;
 color: gray;
 margin-top: 5px;
/* 也可以給span用絕對定位 */
.div3 p{
 padding: 10px;
}

 

 

 div 
 img src="images/head02.jpg" alt="pthoto" 
 span 10分鐘前 /span 
 h6 櫻桃小丸子 /h6 
 p 奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
 2005年4月正式批準運營的遠程教育公共服務體系，
 為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
 報名、學習輔導、課程考試、交費等7X24小時學習支持服務
 400-810-6736。 /p 
 /div

 

個人感覺，三種方法從初級到高級逐漸簡化，減少對DIV的使用，盡可能地使用語義化標簽（本例并沒有）。

css有各種不同的實現方法，可以多嘗試，打開思路。

第一篇筆記 get

(●?●)

 

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/803.html

相關文章

  • 慕課網筆記--不同開發人員制作用戶發言列表的不同思路

    摘要：課程鏈接章節微博用戶發言列表視頻中提供了初級中級高級開發人員可能的不同布局方式。對整個用戶發言區域進行整體布局，隨后用浮動吧用戶頭像叉出去。這里視頻中給右上角發布時間用的是絕對定位。有各種不同的實現方法，可以多嘗試，打開思路。課程鏈接 https://www.imooc.com/learn/20 章節 2-1 微博用戶發言列表 視頻中提供了初級中級高級開發人員可能的不同布局方式。個人覺得，最...

    番茄西紅柿 評論0 收藏0

  • 入門級前端開發可能需要的安利列表

    摘要：開發篇版本管理工具，無腦的視圖操作，功能強大并且支持多賬號點我跳轉網站篇學習最重要的是經常百度，要始終堅信著你的水平能遇到的坑，別人都幫你踩過了。另外就是開發過程多看文檔，很多問題文檔都會有相關的解決方案，多看幾次就能想到解決方法。 IDE篇 程序員最重要的的就是IDE了，一個好的IDE可以幫你省略大量的時間，以及少生很多悶氣，下面開始前端的IDE推薦： VSCode 最推薦的IDE...

    Flands 評論0 收藏0

  • 慕課網_《Docker入門》學習總結

    摘要：時間年月日星期六說明本文部分內容均來自慕課網。必填用于執行命令，當執行完畢后，將產生一個新的文件層。可選指定此鏡像啟動時默認執行命令。可選用于指定需要暴露的網絡端口號。可選向鏡像中掛載一個卷組。 時間：2017年09月16日星期六說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com 教學源碼：無 學習源碼：無 第一章：課程簡介 1-1 課程介紹 Docke...

    CoorChice 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<