個人模板001
阿新 • • 發佈：2021-07-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } body { height: 3000px; background: rgb(233, 188, 188); } .w { width: 1700px; margin: auto; } .header { height: 100px; background: rgb(176, 216, 29); } .container { height: 450px; background: rgb(148, 250, 194); padding-top: 50px; margin-top: 10px; } .container .pic { height: 400px; width: 300px; background: rgb(172, 64, 64); margin-left: 50px; border-radius: 10px; float: left; } .container .pic img { height: 400px; width: 300px; border-radius: 10px; } .container .box { height: 380px; width: 800px; background-color: rgb(149, 149, 245); margin-left: 20px; float: left; padding-top: 20px; padding-left: 20px; line-height: 40px; } .container .box2 { height: 380px; width: 400px; background-color: rgb(250, 169, 230); margin-left: 20px; float: left; padding-top: 20px; padding-left: 20px; line-height: 30px; } .container2 { height: 450px; background: rgb(148, 250, 194); padding-top: 10px; margin-top: 10px; } .container2 .tit { color: #333; font-size: 6mm; font-weight: 100; margin-left: 50px; } .container2 .end { color: #333; font-size: 3mm; font-weight: 100; float: right; margin-right: 50px; } .container2 img { height: 400px; width: 300px; border-radius: 10px; margin-right: 20px; float: left; } .container2 img:first-child { margin-left: 50px; } </style> </head> <body> <div class="header w"> </div> <div class="container w"> <div class="pic"> <img src="#" alt=""> </div> <div class="box"> <h3>個人資訊</h3> <p>姓名：</p> <p>年齡：</p> <p>公司：</p> <p>身高：</p> <p>體重：</p> <p>簡介：</p> </div> <div class="box2"> <h3>作品集</h3> <p>1.</p> <p>2.</p> <p>3.</p> <p>4.</p> <p>5.</p> <p>6.</p> </div> </div> <div class="container2 w"> <div><span class="tit"> zuop</span> <span class="end">More>></span> </div> <div> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> </div> </div> <div class="container2 w"> <div><span class="tit"> zuop</span> <span class="end">More>></span> </div> <div> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> </div> </div> <div class="container2 w"> <div><span class="tit"> zuop</span> <span class="end">More>></span> </div> <div> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> <img src="#" alt=""> </div> </div> </body> </html>