html - 好友列表 - 頭像為名字最後一個字
阿新 • • 發佈：2018-12-30
DATE: 2018-12-30
result:
File 01: test02.html
<!DOCTYPE html> <html> <head lang="en"> <title> 網路小說 </title> <meta charset="utf-8"> <link rel="stylesheet" href="./test02.css"/> </head> <body> <div> <ul class="NameList"> <li> <span class="NameIcon">恩</span> <span class="name">布萊恩</span> <span class="address">大魔王</span> </li> <li> <span class="NameIcon girl">東</span> <span class="name">張衛東</span> <span class="address">修真老師生活錄</span> </li> <li> <p>楓</p> <span class="name">古楓</span> <span class="address">天生神醫</span> </li> <li> <img src="./walle.jpg"/> <span class="name">陳瀟</span> <span class="address">重生貴公子</span> </li> <li> <img src="./dian.jpg"/> <span class="name">阿克蒙德 李察</span> <span class="address">罪惡之城</span> </li> </ul> </div> </body> </html>
File 02: test02.css
/* CSS區分大小寫 */ /* 通用樣式 */ *{ margin:0; padding:0; } .NameList{ margin:6px 0 0 6px; /* 上右下左 */ background-color:#f3f3f3; } .NameList li{ list-style:none; /* 去除列表項前的標號 */ width:300px; height:50px; line-height:50px; background-color:white; /* border:1px solid #ededf5; */ /* 線寬 樣式 顏色 */ margin-top:1px; padding:5px 0; /* 上下、左右 */ } .NameList span.NameIcon{ width:50px; height:50px; line-height:50px; background: blue; color:white; font-size:35px; text-align:center; /* 文字居中 */ float:left; } .NameList span.girl { background:#ff07fa; } .NameList img{ width:50px; height:50px; float:left; } .NameList p{ width:50px; height:50px; line-height:50px; background: blue; color:white; font-size:35px; text-align:center; float:left; } .NameList span.name{ float:left; width:110px; height:100%; margin-left:5px; font-size: 20px; overflow:hidden; /* 溢位時隱藏溢位部分 */ } .NameList span.address{ float:left; font-size:10px; }