HTML+CSS小實戰案例
登錄界面的美化，綜合最近所學進行練習
網頁設計先布局，搭建好大框架，然后進行填充，完成頁面布局
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>實驗</title> 5 <style type="text/css"> 6 *{margin:0;padding:0;}/*去掉頁面樣式*/ 7 body{color:white;} 8 .content{ 9 background-color:pink; 10 position:absolute;/*絕對定位*/ 11 top:50%; 12 left:0; 13 width:100%; 14 height:400px; 15 margin-top:-200px; 16 overflow:hidden;/*隱藏滾動條*/ 17 } 18 .main{ 19 text-align:center;/*文本居中*/ 20 max-width:600px; 21 height:400px; 22 padding:100px 0px;/*上下80px,左右為0*/ 23 /*background:yellow;*//*驗證div的位置*/ 24 margin:0 auto;/*設置上右下左,居中顯示*/ 25 } 26 .main h1{ 27 font-family:"楷體";/*設置字體*/ 28 font-size:70px;/*設置字體大小*/ 29 font-weight:2px;/*調整字體粗細*/ 30 } 31 form{ 32 padding:20px 0; 33 } 34 form input{ 35 border:1px solid white; 36 display:block; 37 margin:0px auto 10px auto;/*上 右 下 左*/ 38 padding:10px; 39 width:220px; 40 border-radius:30px;/*H5設置圓角邊框*/ 41 font-size:18px; 42 font-weight:300; 43 text-align:center; 44 } 45 form input:hover{ 46 background-color:pink; 47 } 48 form button{ 49 background-color:yellow; 50 border-radius:10px; 51 border:0; 52 height:30px; 53 width:50px; 54 padding:5px 10px; 55 } 56 form button:hover{ 57 background-color:red; 58 } 59 </style> 60 </head> 61 <body> 62 <div class="content"> 63 <div class="main"> 64 <h1>Welcome</h1> 65 <form> 66 <input type="text" name="useid" placeholder="請輸入賬號"/> 67 <input type="password" name="pw" placeholder="請輸入密碼"> 68 <button type="submit">登 錄</button> 69 </form> 70 </div> 71 </div> 72 73 </body> 74 </html>
登錄界面實戰運行結果如下
自己動手豐衣足食
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>檸檬學院</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .content{ 9 background-color:yellow;/*設置背景顏色*/ 10 position:absolute;/*設置絕對定位*/ 11 width:100%;/*設置div的寬度*/ 12 height:400px;/*設置div的高度*/ 13 top:50%;/*距離上面的距離是一半*/ 14 margin-top:-200px;/*向上距頂端的距離減200像素*/ 15 overflow:hidden;/*隱藏滾動條*/ 16 } 17 .container{ 18 /*background-color:pink;*//*背景顏色*/ 19 text-align:center;/*文字居中*/ 20 padding:80px 0px;/*設置上下和左右*/ 21 max-width:600px;/*設置最大寬度*/ 22 height:400px;/*設置div的高度*/ 23 margin:-10 auto 0 auto;/*上 右 下 左*/ 24 } 25 .container h1{ 26 background-color:pink; 27 font-size:80px; 28 border-radius:30px; 29 color:blue; 30 height:80px; 31 width:600px; 32 text-align:center; 33 font-family:"楷體"; 34 } 35 form input{ 36 font-size:30px; 37 display:block; 38 border-radius:30px; 39 padding:10px 5px;/*上下 左右*/ 40 text-align:center; 41 margin:25 auto 15 auto;/*上 右 下 左*/ 42 font-weight:300px; 43 } 44 form input:hover{ 45 background-color:gold; 46 } 47 form button{ 48 background-color:grad; 49 height:50px; 50 width:100px; 51 border-radius:20px; 52 font-family:"楷體"; 53 font-size:30px; 54 } 55 form button:hover{ 56 background-color:pink; 57 } 58 </style> 59 </head> 60 <body> 61 <div class="content"> 62 <div class="container"> 63 <h1>檸檬學院</h1> 64 <form> 65 <input type="text" name="useid" placeholder="請輸入賬號"/> 66 <input type="password" name="pw" placeholder="請輸入密碼"/> 67 <button type="submit">登錄</button> 68 <button type="submit">注冊</button> 69 </form> 70 </div> 71 </div> 72 </body> 73 </html>
先布局，后填充，網頁設計的規范格式
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>檸檬學院</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px;/*設置距頂點的距離設置為0*/ 10 } 11 .header{ 12 background-color:pink; 13 color:blue; 14 height:80px; 15 width:100%; 16 text-align:center; 17 font-size:60px; 18 } 19 .main{ 20 margin:0 auto 0 auto; 21 background-color:yellow; 22 text-align:center; 23 font-size:60px; 24 width:80%; 25 height:600px; 26 } 27 .foot{ 28 background-color:gray; 29 width:80%; 30 margin:0 auto 0 auto; 31 height:200px; 32 text-align:center; 33 font-size:60px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="header"> 39 頁面頭部信息 40 </div> 41 <div class="main"> 42 頁面的主要內容 43 </div> 44 <div class="foot"> 45 頁面的版權信息 46 </div> 47 </body> 48 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>檸檬學院</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px;/*設置距頂點的距離設置為0*/ 10 text-align:center; 11 } 12 .header{ 13 background-color:yellow; 14 height:100px; 15 width:100%; 16 font-size:80px; 17 font-family:"楷體"; 18 19 } 20 .main{ 21 width:80%; 22 margin:0 auto 0 auto; 23 } 24 .left{ 25 background-color:brown; 26 float:left;/*改變位置*/ 27 height:200px; 28 width:20%; 29 font-size:60px; 30 color:yellow; 31 } 32 .right{ 33 background-color:peachpuff; 34 height:200px; 35 width:80%; 36 float:right; 37 font-size:60px; 38 color:blue; 39 } 40 .main1{ 41 margin:0 auto 0 auto; 42 background-color:yellow; 43 text-align:center; 44 font-size:60px; 45 width:80%; 46 height:600px; 47 } 48 .foot{ 49 background-color:gray; 50 width:80%; 51 margin:0 auto 0 auto; 52 height:200px; 53 text-align:center; 54 font-size:60px; 55 } 56 </style> 57 </head> 58 <body> 59 <div> 60 <div class="header"> 61 頁面頭部信息 62 </div> 63 <div class="main"> 64 <div class="left"> 65 LOGO 66 </div> 67 <div class="right"> 68 頁面導航 69 </div> 70 </div> 71 <div class="main1"> 72 頁面的主要內容 73 </div> 74 <div class="foot"> 75 頁面的版權信息 76 </div> 77 </div> 78 </body> 79 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>檸檬學院</title> 6 <style type="text/css"> 7 *{ 8 margin:0px; 9 padding:0px;/*設置距頂點的距離設置為0*/ 10 text-align:center; 11 } 12 .header{ 13 background-color:yellow; 14 height:100px; 15 width:100%; 16 font-size:80px; 17 font-family:"楷體"; 18 19 } 20 .main{ 21 width:80%; 22 margin:0 auto 0 auto; 23 height:200px; 24 } 25 .left{ 26 background-color:brown; 27 float:left;/*改變位置*/ 28 height:200px; 29 width:20%; 30 font-size:60px; 31 color:yellow; 32 } 33 .right{ 34 background-color:peachpuff; 35 height:200px; 36 width:80%; 37 float:right; 38 font-size:60px; 39 color:blue; 40 } 41 ad{ 42 height:480px; 43 width:100%; 44 margin:auto 0 0 auto; 45 } 46 .ad1{ 47 width:10%; 48 height:550px; 49 margin:0 auto auto auto; 50 background-color:blue; 51 float:left; 52 font-size:60px; 53 } 54 .main1{ 55 margin:0 auto 0 auto; 56 background-color:yellow; 57 text-align:center; 58 font-size:60px; 59 width:80%; 60 height:480px; 61 float:left; 62 } 63 .ad2{ 64 width:10%; 65 height:550px; 66 margin:0 auto auto auto; 67 background-color:blue; 68 float:right; 69 font-size:60px; 70 } 71 .foot{ 72 background-color:gray; 73 width:80%; 74 margin:0 auto 0 auto; 75 height:200px; 76 text-align:center; 77 font-size:60px; 78 } 79 </style> 80 </head> 81 <body> 82 <div> 83 <div class="header"> 84 頁面頭部信息 85 </div> 86 <div class="main"> 87 <div class="left"> 88 LOGO 89 </div> 90 <div class="right"> 91 頁面導航 92 </div> 93 </div> 94 <div class="ad"> 95 <div class="ad1"> 96 廣告投放 97 </div> 98 <div class="main1"> 99 頁面的主要內容 100 </div> 101 <div class="ad2"> 102 廣告投放 103 </div> 104 </div> 105 <div class="foot"> 106 頁面的版權信息 107 </div> 108 </div> 109 </body> 110 </html>
