php第三次2
阿新 • • 發佈：2022-03-16
設計下面的網頁，用div+css，參考給出的例項實現。
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin:0;padding:0;}/*去掉頁面樣式*/ body{color:#3333FF;} .content{ background-color:#FFFF99; left:0; width:100%; height:400px; margin-top:0px; overflow:hidden;/*隱藏滾動條*/ } .main{ text-align:center;/*文字居中*/ max-width:600px; height:400px; padding:100px 0px;/*上下80px,左右為0*/ /*background:yellow;*//*驗證div的位置*/ margin:0 auto;/*設定上右下左,居中顯示*/ } .main h1{ font-family:"楷體";/*設定字型*/ border:1px solid #FF9999; display:block; margin:0px auto 20px auto;/*上 右 下 左*/ padding:20px; width:520px; border-radius:50px;/*H5設定圓角邊框*/ font-size:70px;/*設定字型大小*/ font-weight:2px;/*調整字型粗細*/ text-align:center; } form{ padding:20px 0; } form input{ border:1px solid white; display:block; margin:0px auto 10px auto;/*上 右 下 左*/ padding:10px; width:220px; border-radius:30px;/*H5設定圓角邊框*/ font-size:18px; font-weight:300; text-align:center; } form input:hover{ background-color:#FFFF99; } form button{ background-color:#CCFFCC; border-radius:10px; border:0; height:30px; width:50px; padding:5px 10px; } form button:hover{ background-color:red; } </style> <head> <meta charset="UTF-8"> <title>****</title> </head> <body> <div class="content"> <div class="main"> <h1 style="background-color: #FF9999;">資訊學院</h1> <form> <input type="text" name="useid" placeholder="請輸入賬號"/> <input type="password" name="pw" placeholder="請輸入密碼"> <button type="submit">登 錄</button> <button type="submit">注 冊</button> </form> </div> </div> </body> </html>