成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 843人閱讀

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

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

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

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

附上效果圖

 

初級(jí)的代碼如下：

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

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

 

中級(jí)代碼去掉了左邊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)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，
 為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
 報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
 400-0000000。 /p 
 /div 
 /div

 

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

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

.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用絕對(duì)定位 */
.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)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，
 為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
 報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
 400-810-6736。 /p 
 /div

 

個(gè)人感覺(jué)，三種方法從初級(jí)到高級(jí)逐漸簡(jiǎn)化，減少對(duì)DIV的使用，盡可能地使用語(yǔ)義化標(biāo)簽（本例并沒(méi)有）。

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

第一篇筆記 get

(●?●)

 

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/803.html

相關(guān)文章

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

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

    番茄西紅柿 評(píng)論0 收藏0

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

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

    Flands 評(píng)論0 收藏0

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

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

    CoorChice 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<