标签：back level 部分 set doctype 二次元 styles 分享 char
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搬运园：一个专注搬运的车库地址的网站---博主首页</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="upper_area"> <div id="face"><img src="头像.png" alt="" id="face_img"></div> <div id="introduce"> <p id="name">我不是鸡哥</p> <p id="autograph">|我从不自己找车库，车库地址都是别人告诉我的......|</p> <p id="level">璀璨的钻石搬运工</p> <p id="label">#二次元   #岛国</p> </div> <div id="qr_code"><img src="微信二维码.png" alt=""></div> </div> <div id="lower_area_c"> <div class="div_cas"><img src="ccc.png" alt=""></div> <span class="span_cas">可以公共场合观看</span> <div class="link_list_div"> <ul> <li><a href="">日剧TV</a>---车速50：日剧，普通岛国电影，普通岛国综艺。</li> <li><a href="">动漫之家</a>---车速50：全年龄动漫及漫画。</li> <li><a href="">樱花动漫</a>---车速60：全年龄动漫及部分泡面番。</li> </ul> </div> </div> <div id="lower_area_a"> <div class="div_cas"><img src="aaa.png" alt=""></div> <span class="span_cas">可与好基友分享</span> <div class="link_list_div"> <ul> <li><a href="">滴滴漫画</a>---车速80：表番，里番都有。</li> <li><a href="">MyGalgame</a>---车速80：由一位良心大佬所整理，都是汉化硬盘版的。</li> <li><a href="">爱弹幕</a>---车速100：同人资源很多。</li> </ul> </div> </div> <div id="lower_area_s"> <div class="div_cas"><img src="sss.png" alt=""></div> <span class="span_cas">建议独自欣赏</span> <div class="link_list_div"> <ul> <li><a href="">小靓绅士社区</a>---车速130：中日韩欧美的绅士漫画都有。</li> <li><a href="">千璃社区</a>---车速160：福利姬分享平台。</li> <li><a href="">天天番号</a>---车速???：不能再说了。</li> </ul> </div> </div> </body> </html>
/*博客首页*/ /*通用样式*/ body { margin: 0; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } a:hover { color: red; font-size: 24px; } li { margin-top: 15px; } /*上方区域样式*/ #upper_area { float: top; width: 100%; height: 200px; background: darkgrey; position: relative; } #face { width: 150px; height: 150px; border-radius: 50%; border: black 6px solid; display: inline-block; overflow: hidden; position: absolute; left: 40px; top: 20px; } #face_img { width: 100%; } #introduce { width: 1000px; height: 200px; position: absolute; left: 240px; /*border: 5px orange solid;*/ } #qr_code { width: 180px; height: 180px; position: absolute; right: 40px; top: 10px; } #name { font-weight: 600; font-size: 24px; } #level { color: gold; } #label { color: pink; } /*下方区域样式*/ #lower_area_c { float: top; width: 100%; height: 210px; background: cyan; position: relative; } #lower_area_a { float: top; width: 100%; height: 210px; background: deepskyblue; position: relative; } #lower_area_s { float: top; width: 100%; height: 210px; background: dodgerblue ; position: relative; } .div_cas { width: 70px; height: 70px; position: absolute; left: 40px; top: 20px; } .span_cas { position: absolute; left: 40px; top: 120px; color: rgba(134, 6, 144, 0.78); border: #fcfbf9 3px dashed; font-size: 22px; } .link_list_div { width: 800px; height: 130px; position: absolute; left: 300px; top: 20px; /*border: 5px orange solid;*/ }
标签：back level 部分 set doctype 二次元 styles 分享 char
原文地址：https://www.cnblogs.com/caoyu080202201/p/12892628.html
