今天記錄學習的設計網站首頁的咖啡菜單，綜合運用所學習的html，css背景，文本，字體，鏈接，表格，盒子，選擇器，定位，以及css3的陰影，圓角邊框，2d變換等內容。
㈠咖啡菜單整體樣式
運用html和css知識做出來的整體效果圖，如下圖所示：
⑴左側的小咖啡圖片是廣告位，不隨頁面變動而變動；
⑵表頭部分右下角采用層定位放置四個小圖標；
⑶導航欄部分放置五個鏈接，采用偽類鏈接方式，鼠標懸停在鏈接上顏色為黃；
⑷主體部分分為左右兩欄，在左側邊欄設計了一個表格，上面放置價格表；
⑸下面采用2d變換，陰影效果，圓角邊框設置四個圖片，第一張和第三張順時針旋轉7度，第二張那個和第四張逆時針旋轉7度；
⑹這個旋轉方式也可以采用奇偶選擇器進行設計；
⑺在右側主體部分采用浮動定位進行圖片的位置設定和文字設定，圖片邊框采用虛線設計；
⑻在頁腳部分采用清除兩側浮動進行設計；
⑼以上就是這個咖啡菜單網頁的主要設計。
㈡html代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>icafe咖啡館</title> 6 <link rel="stylesheet" href="css/style.css" /> 7 </head> 8 <body> 9 10 <div id="container"> 11 12 <div id="header"> 13 <p> <img src="images/banner.jpg"></p> 14 <div id="icon-list"> 15 <img src="images/1.bmp"> 16 <img src="images/2.bmp"> 17 <img src="images/3.bmp"> 18 <img src="images/4.bmp"> 19 </div> 20 </div> 21 22 <div id="nav"> 23 <p> 24 <a href="#">咖啡MENU</a>| 25 <a href="cook.html">咖啡COOK</a>| 26 <a href="#">咖啡STORY</a>| 27 <a href="#">咖啡NEWS</a>| 28 <a href="#">咖啡PARTY</a> 29 </p> 30 </div> 31 32 <div id="main"> 33 <div id="aside"> 34 <h2>咖啡MENU</h2> 35 <table > 36 <tr> 37 <th ></th> 38 <th >拿鐵<br />Latte</th> 39 <th >卡布奇諾<br />Cappuccino</th> 40 <th >摩卡<br />Mocha</th> 41 <th >濃縮咖啡<br />Espresso</th> 42 </tr> 43 <tr> 44 <th scope="row" >大杯</th> 45 <td>35</td> 46 <td>35</td> 47 <td>35</td> 48 <td>30</td> 49 </tr> 50 <tr> 51 <th scope="row" >中杯</th> 52 <td>30</td> 53 <td>30</td> 54 <td>30</td> 55 <td >25</td> 56 </tr> 57 <tr> 58 <th scope="row" >小杯</th> 59 <td>25</td> 60 <td>25</td> 61 <td>25</td> 62 <td>20</td> 63 </tr> 64 </table> 65 <div id="imglist"> 66 <div class="polaroid rotate_left"> 67 <img src="images/Mocha.jpg" /> 68 </div> 69 70 <div class="polaroid rotate_right"> 71 <img src="images/Latte.jpg" /> 72 </div> 73 <div class="polaroid rotate_left"> 74 <img src="images/Espresso.jpg" /> 75 </div> 76 77 <div class="polaroid rotate_right"> 78 <img src="images/Cappuccino.jpg" /> 79 </div> 80 </div> 81 </div> 82 83 <div id="content"> 84 <div class="subcont"> 85 <img src="images/Latte.jpg" alt=""> 86 <div class="subtext"> 87 <h2>拿鐵Caffè Latte</h2> 88 <p>這是一種傳統的經典飲料——濃縮咖啡調入熱牛奶，其上覆蓋一層輕盈的奶沫。<br>品嘗此款咖啡時，您可以選擇特別加入某種口味（如香草，焦糖或杏仁口味）的糖漿。</p> 89 </div> 90 </div> 91 <div class="subcont"> 92 <img src="images/Cappuccino.jpg" alt=""> 93 <div class="subtext"> 94 <h2>卡布奇諾Cappuccino</h2> 95 <p>這款咖啡沿襲傳統技法，由我們技藝嫻熟的咖啡吧員將手工制作的熱奶與細膩奶泡輕柔地澆在濃縮咖啡之上制作而成。</p> 96 </div> 97 </div> 98 <div class="subcont"> 99 <img src="images/Mocha.jpg" alt=""> 100 <div class="subtext"> 101 <h2>摩卡Caffè Mocha</h2> 102 <p>這款咖啡由醇香的摩卡醬，濃縮咖啡和蒸奶相融相合，上面覆以攪打奶油。<br>寒冷的日子里，憂傷的時光中,任何人都無法抵抗她的誘惑。</p> 103 </div> 104 </div> 105 <div class="subcont"> 106 <img src="images/Espresso.jpg" alt=""> 107 <div class="subtext"> 108 <h2>濃縮咖啡Espresso</h2> 109 <p>這是咖啡的精粹，以最濃縮的方式顯現。濃縮咖啡帶點焦糖味道，濃厚馥郁。</p> 110 </div> 111 </div> 112 </div> 113 </div> 114 115 <div id="footer"> 116 <p>咖啡菜單小設計</p> 117 </div> 118 </div> 119 120 <div id="l-fix"> 121 <p> <img src="images/Latte.jpg"></p> 122 </div> 123 124 </body> 125 </html>
㈢css樣式部分的代碼
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 font-family:"微軟雅黑"; 7 font-size:16px; 8 color: #673929; 9 } 10 #container { 11 margin:0 auto; 12 width:900px; 13 } 14 #header { 15 height:220px;/*必須添加，否則header下面有10px而不是5px空白*/ 16 margin-bottom:5px; 17 position:relative; /*父層定位*/ 18 } 19 20 #icon-list{ 21 position:absolute;/*子層定位*/ 22 top:170px; 23 right: 30px; 24 width: 130px; 25 height: 30px; 26 font-size: 0px; 27 /*background: white;*/ 28 } 29 #icon-list img{ 30 margin-left:5px; 31 } 32 #nav{ 33 height:30px; 34 margin-bottom:5px; 35 background:#09c; 36 font: 18px/30px 微軟雅黑; 37 color: #fff; 38 letter-spacing: 2px; 39 text-align: center; 40 } 41 a:link{ 42 color: #fff; 43 text-decoration: none; 44 } 45 a:visited{ 46 color: #fff; 47 text-decoration: none; 48 } 49 a:hover{ 50 color: yellow; 51 text-decoration: none; 52 } 53 a:active{ 54 color: #fff; 55 text-decoration: none; 56 } 57 #main{ 58 background:red; 59 /*margin-bottom:5px;已經坍縮為0,放在子容器內設置*/ 60 } 61 #aside { 62 float:left; 63 width:300px; 64 background:#6cf; 65 text-align: center; 66 font-size: 14px; 67 color: #000; 68 } 69 #aside h2{ 70 margin: 20px; 71 } 72 #imglist{ 73 width: 130px; 74 margin: 0 auto; 75 } 76 .polaroid 77 { 78 width:85px; 79 padding: 10px; 80 background-color: #eee; 81 border:1px solid #BFBFBF; 82 box-shadow:2px 2px 4px #aaa; 83 border-radius: 5px; 84 } 85 86 .rotate_left 87 { 88 -ms-transform:rotate(7deg); /* IE 9 */ 89 -moz-transform:rotate(7deg); /* Firefox */ 90 -webkit-transform:rotate(7deg); /* Safari and Chrome */ 91 -o-transform:rotate(7deg); /* Opera */ 92 transform:rotate(7deg); 93 } 94 95 .rotate_right 96 { 97 -ms-transform:rotate(-8deg); /* IE 9 */ 98 -moz-transform:rotate(-8deg); /* Firefox */ 99 -webkit-transform:rotate(-8deg); /* Safari and Chrome */ 100 -o-transform:rotate(-8deg); /* Opera */ 101 transform:rotate(-8deg); 102 } 103 #imglist img{ 104 height: 95px; 105 width: 85px; 106 margin: 0 auto; 107 font-size: 0; 108 } 109 #imglist img:hover{ 110 -webkit-transform: scale(1.2); 111 -moz-transform: scale(1.2); 112 -ms-transform: scale(1.2); 113 -o-transform: scale(1.2); 114 transform: scale(1.2); 115 } 116 #content{ 117 float:right; 118 width:595px; 119 margin-bottom:5px; 120 background:#cff; 121 } 122 .subcont{ 123 width: 570px; 124 margin: 10px auto; 125 clear: both; 126 } 127 .subcont img{ 128 margin: 5px; 129 padding: 5px; 130 float: left; 131 border: 1px dashed #000; 132 } 133 .subcont .subtext{ 134 width: 60%; 135 float: left; 136 margin: 5px; 137 } 138 .subcont h2{ 139 margin: 5px; 140 } 141 .subcont p{ 142 font:16px/2em 微軟雅黑; 143 } 144 #footer { 145 height:60px; 146 line-height: 60px; 147 background:#6cf; 148 clear:both; /*新加代碼*/ 149 margin-top: 5px; 150 text-align: center; 151 } 152 153 #l-fix{ 154 position: fixed; 155 top:100px; 156 left:5px; 157 } 158 #l-fix img{ 159 height: 100px; 160 width: 100px; 161 }
以上就是咖啡菜單網頁的全部代碼和效果圖了，希望有所幫助。