CSS之咖啡菜单网页设计
今天记录学习的设计网站首页的咖啡菜单，综合运用所学习的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 }
以上就是咖啡菜单网页的全部代码和效果图了，希望有所帮助。
