網頁模板----01
阿新 • • 發佈：2018-12-11
模板--01
1.程式碼展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>web</title> <style type="text/css"> body{ background: url(../img/1.jpg); background-size:100% 100%; background-repeat:no-repeat; } .main{ text-align: center; padding: 0 0 0 50px; background-repeat:no-repeat; } .window{ background-color:#9b59b6; height: 550px; width: 400px; padding: 0 20px ; } .top img{ padding: 15px 0 0 0; width: 20%; } .top h5{ padding: 0; color: white; } .top p{ padding: 0 0 0 0; color: whitesmoke; font-size: small; } .top{ padding: 0 0 0 30px; border-bottom: 1px solid floralwhite; } .mid{ padding: 0 50px 0 0; } .mid p{ text-align: left; font-size: 11px; } .sum{ height: 8px; width: 100%; background:#B57BCC; border-radius: 8px; } .one,.two,.three{ height: 8px; display: block; background:floralwhite; } .ji_lu{ padding: 15px 0 0 0; } .ji_lu ul{ margin: 0; padding: 0; } .ji_lu ul li{ display: inline-block; list-style-type: none; background: #fff; width: 32.9%; float: left; height: 30px; padding: 3px 0; border-right:1px solid #D6D2D2; } .ji_lu ul li a{ text-decoration: none; color: #CF9ED9; font-size: 14px; text-align: center; padding-top: 32px; display: block; height: 23px; } .ji_lu ul li a.eay{ background: url(../img/2.png) no-repeat 45px 8px; } .ji_lu ul li a.tok{ background: url(../img/2.png) no-repeat -60px 8px; } .ji_lu ul li a.hert{ background: url(../img/2.png) no-repeat -160px 8px; } .down{ padding: 45px 0 0 0; text-align: center; } .down p{ font-size: 10px; } .link ul{ margin: 0; padding: 15px ; } .link ul li { list-style-type:none; display:inline-block; margin:0 1px; } .link ul li a{ width:30px; height:30px; display:block; } .link ul li a.A{ background: url(../img/3.png) no-repeat ; } .link ul li a.B{ background: url(../img/3.png) no-repeat -30px ; } .link ul li a.C{ background: url(../img/3.png) no-repeat -60px; } .link ul li a.D{ background: url(../img/3.png) no-repeat -90px; } .link ul li a.E{ background: url(../img/3.png) no-repeat -120px; } .follow { width: 150px; height: 30px; text-align:center; width: 38%; background-color:#B57BCC; border: none; } </style> </head> <body> <div class="main"> <h2>MINI PROFILE WIDGET</h2> <div class="window"> <div class="top"> <img src="../img/1.png"/> <h5>Kimberly Thompson</h5> <p>Web Designer</p> </div> <div class="mid"> <p>UX/UX</p> <div class="sum"> <div class="one" style="width: 100%;border-radius: 8px;"> </div> </div> <p>HTML / CSS3 / SASS</p> <div class="sum"> <div class="two" style="width: 80%;border-radius: 8px;"> </div> </div> <p>JAVASCRIPT</p> <div class="sum"> <div class="three" style="width: 70%;border-radius: 8px;"> </div> </div> </div> <div class="ji_lu"> <ul> <li><a class="eay" href="#"></a></li> <li><a class="tok" href="#"></a></li> <li><a class="hert" href="#"></a></li> </ul> </div> <div class="down"> <p>Nemo enim ipsam volup sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p> <div class="link"> <ul> <li><a class="A" href="#"></a></li> <li><a class="B" href="#"></a></li> <li><a class="C" href="#"></a></li> <li><a class="D" href="#"></a></li> <li><a class="E" href="#"></a></li> </ul> </div> <button class="follow"> FOLLOW </button> </div> </div> </div> <br /><br /><br /><br /><br /><br /> </body> </html>
