亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

慕課網(wǎng)筆記--不同開發(fā)人員制作用戶發(fā)言列表的不同思路

番茄西紅柿 / 861人閱讀

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

章節(jié) 2-1 微博用戶發(fā)言列表

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

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

附上效果圖

 

初級的代碼如下：

主要是用DIV布局，左邊圖像進(jìn)行浮動。

.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月批準(zhǔn)立項(xiàng)試點(diǎn)，
 2005年4月正式批準(zhǔn)運(yùn)營的遠(yuǎn)程教育公共服務(wù)體系，
 為遍布全國的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
 報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
 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月批準(zhǔn)立項(xiàng)試點(diǎn)，
 2005年4月正式批準(zhǔn)運(yùn)營的遠(yuǎn)程教育公共服務(wù)體系，
 為遍布全國的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
 報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
 400-0000000。 /p 
 /div 
 /div

 

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

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

.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月批準(zhǔn)立項(xiàng)試點(diǎn)，
 2005年4月正式批準(zhǔn)運(yùn)營的遠(yuǎn)程教育公共服務(wù)體系，
 為遍布全國的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
 報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
 400-810-6736。 /p 
 /div

 

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

css有各種不同的實(shí)現(xiàn)方法，可以多嘗試，打開思路。

第一篇筆記 get

(●?●)

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/803.html

相關(guān)文章

  • 慕課網(wǎng)筆記--不同開發(fā)人員制作用戶發(fā)言列表的不同思路

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

    番茄西紅柿 評論0 收藏0

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

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

    Flands 評論0 收藏0

  • 慕課網(wǎng)_《Docker入門》學(xué)習(xí)總結(jié)

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

    CoorChice 評論0 收藏0

發(fā)表評論

0條評論

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