项目名称：美食美客网页制作
技术栈：HTML + CSS
背景：熟悉使用HTML、CSS的使用
一、HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="./css/common.css"> 8 <link rel="stylesheet" href="./css/temp.css"> 9 <link rel="stylesheet" href="./css/index.css"> 10 </head> 11 <body> 12 <div class="top1"> 13 <div class="content top_c"> 14 <p>你好，欢迎来到美食美刻网</p> 15 </div> 16 </div> 17 <div class="top2"> 18 <div class="content logo"> 19 <div class="top_l fl"> 20 <h1><a href="#"></a></h1> 21 </div> 22 <div class="top2_c fl"> 23 <input class="txt fl" type="text" 24 placeholder="请输入菜谱、食材"> 25 </input> 26 <input class="btn fl" type="button" value="搜索"> 27 </input> 28 </div> 29 <div class="top2_r fr"> 30 <ul> 31 <li class="qq fl"><b></b><a href="">QQ登录</a></li> 32 <li class="wb fl"><b class="sina"></b><a href="">微博登录</a></li> 33 <li class="zc fl"><a href="">注册</a></li> 34 <li class="btn fl"><input type="button" value="登录"></li> 35 </ul> 36 </div> 37 </div> 38 </div> 39 <!-- content内容区 --> 40 <div class="nav"> 41 <div class="content nav_c "> 42 <div class="nav_u"> 43 <ul > 44 <li ><a class="cRed1" href="#">首页</a></li> 45 <li><a href="#">菜谱大全</a></li> 46 <li><a href="#">饮食健康</a></li> 47 <li><a href="#">家居馆</a></li> 48 <li><a href="#">美食达人</a></li> 49 <li><a href="#">讨论组</a></li> 50 <li><a href="#">手机版下载</a></li> 51 </ul> 52 </div> 53 54 </div> 55 </div> 56 <!-- 导航区e --> 57 <div class="banner"> 58 <h2 class="h2Title">今日早餐推荐：给心爱的TA做顿元气满满的早餐吧</h2> 59 <!-- 防止父元素高度塌陷 --> 60 <ul class="clearfix"> 61 <li> 62 <div> 63 <a href=""> 64 <img src="./imgs/caomei.png" alt=""> 65 </a> 66 </div> 67 <div class="des"> 68 <p>美味面包片</p> 69 <p>草莓面包片，营养双管齐下</p> 70 </div> 71 </li> 72 <li> 73 <div> 74 <a href=""> 75 <img src="./imgs/caomei.png" alt=""> 76 </a> 77 </div> 78 <div class="des"> 79 <p>美味面包片</p> 80 <p>草莓面包片，营养双管齐下</p> 81 </div> 82 </li> 83 <li> 84 <div> 85 <a href=""> 86 <img src="./imgs/caomei.png" alt=""> 87 </a> 88 </div> 89 <div class="des"> 90 <p>美味面包片</p> 91 <p>草莓面包片，营养双管齐下</p> 92 </div> 93 </li> 94 <li> 95 <div> 96 <a href=""> 97 <img src="./imgs/caomei.png" alt=""> 98 </a> 99 </div> 100 <div class="des"> 101 <p>美味面包片</p> 102 <p>草莓面包片，营养双管齐下</p> 103 </div> 104 </li> 105 </ul> 106 <!-- 箭头设计 --> 107 <div class="arrow"> 108 <a href="#" class="a_left"> 109 <span class="word"> 110 <span class="fz14">夜宵</span><br> 111 22：30-01：30 112 </span> 113 <span class="img"></span> 114 </a> 115 <a href="#" class="a_right"></a> 116 </div> 117 </div> 118 119 <!-- 搜索区域 --> 120 <div class="search"> 121 <div class="s_center"> 122 <input type="text" value="请输入菜谱、食材" class="txt fl"> 123 <input type="button" value="搜索" class="btn fl" > 124 </div> 125 </div> 126 <!-- 首页菜单B --> 127 <div class="arrow_pos"> 128 <div class="menu content"> 129 <h2 class="h2Title">5月，立夏需养心<a href="" class="more">更多菜单 ></a></h2> 130 <ul class="img clearfix"> 131 <li> 132 <div> 133 <a href=""> 134 <img src="./imgs/fruit.png" alt=""> 135 </a> 136 </div> 137 <div class="word"> 138 <p class="p1">四月水果当季尝</p> 139 <p class="p2">你舍得错过当季这些甜美的果实吗？</p> 140 </div> 141 </li> 142 <li> 143 <div> 144 <a href=""> 145 <img src="./imgs/fruit.png" alt=""> 146 </a> 147 </div> 148 <div class="word"> 149 <p class="p1">四月水果当季尝</p> 150 <p class="p2">你舍得错过当季这些甜美的果实吗？</p> 151 </div> 152 </li> 153 <li> 154 <div> 155 <a href=""> 156 <img src="./imgs/fruit.png" alt=""> 157 </a> 158 </div> 159 <div class="word"> 160 <p class="p1">四月水果当季尝</p> 161 <p class="p2">你舍得错过当季这些甜美的果实吗？</p> 162 </div> 163 </li> 164 </ul> 165 </div> 166 <div class="arrow2"> 167 <a href="#" class="a1"></a> 168 <a href="#" class="a2"></a> 169 </div> 170 </div> 171 <!-- 首页食材区域 --> 172 <div class="food content"> 173 <h2 class="h2Title">5月，健脾祛湿热<a class="more" href="#">更多食材 ></a></h2> 174 <ul class="f_nav clearfix"> 175 <li class="bgRed"><a class="white" href="#">水果</a></li> 176 <li><a href="#">蔬菜</a></li> 177 <li><a href="#">五谷</a></li> 178 <li><a href="#">三鲜</a></li> 179 </ul> 180 <ul class="f_img clearfix"> 181 <li> 182 <a href=""> 183 <img src="./imgs/xigua.png" alt=""> 184 <span>西瓜</span> 185 </a> 186 </li> 187 <li> 188 <a href=""> 189 <img src="./imgs/xigua.png" alt=""> 190 <span>西瓜</span> 191 </a> 192 </li> 193 <li> 194 <a href=""> 195 <img src="./imgs/xigua.png" alt=""> 196 <span>西瓜</span> 197 </a> 198 </li> 199 <li> 200 <a href=""> 201 <img src="./imgs/xigua.png" alt=""> 202 <span>西瓜</span> 203 </a> 204 </li> 205 <li> 206 <a href=""> 207 <img src="./imgs/xigua.png" alt=""> 208 <span>西瓜</span> 209 </a> 210 </li> 211 <li> 212 <a href=""> 213 <img src="./imgs/xigua.png" alt=""> 214 <span>西瓜</span> 215 </a> 216 </li> 217 </ul> 218 </div> 219 <!-- footer底部区域 --> 220 <div class="footer "> 221 <div class="f_border"> 222 <div> 223 <b class="b1"></b> 224 <b class="b2"></b> 225 <b class="b3"></b> 226 <b class="b4"></b> 227 </div> 228 <div class="footer_l fl"> 229 <ul> 230 <li>中国，最大的菜谱<span class="fz14"><span class="cRed">800000</span></span></li> 231 <li>每月，用户访问数量<span class="fz14"><span class="cRed">2000000</span></span></li> 232 <li>每年，菜谱浏览量<span class="fz14"><span class="cRed">565000</span></span></li> 233 <li>现在，这些数字还在不断的增长。</li> 234 </ul> 235 </div> 236 <div class="footer_r fr"> 237 <ul> 238 <li> 239 <a href=""> 240 <s></s> 241 <span>点击进入<br/>爱美食微博官网</span> 242 </a> 243 </li> 244 <li> 245 <a href=""> 246 <s></s> 247 <span>点击进入<br/>爱美食微博官网</span> 248 </a> 249 </li> 250 <li> 251 <a href=""> 252 <s></s> 253 <span>点击进入<br/>爱美食微博官网</span> 254 </a> 255 </li> 256 <li> 257 <a href=""> 258 <s></s> 259 <span>点击进入<br/>爱美食微博官网</span> 260 </a> 261 </li> 262 </ul> 263 </div> 264 </div> 265 266 </div> 267 </body> 268 </html>
二、CSS代码
分为三个部分分别为：common.css、temp.css、index.css
common.css
1 /* css的代码初始化 */ 2 html,body,ul,li,p,h1,h2,h3,form,img { 3 margin:0; 4 padding:0; 5 } 6 img { 7 border: none; 8 } 9 ul { 10 list-style: none; 11 } 12 input { 13 padding-top:0; 14 padding-bottom:0; 15 border: none; 16 } 17 a{ 18 text-decoration: none; 19 } 20 body{ 21 font: normal normal 12px "宋体"; 22 color: #4c4c4c; 23 background-color: #fae8c8; 24 } 25 .fl { 26 float: left; 27 } 28 .fr { 29 float: right; 30 } 31 /* 清除浮动 */ 32 .clearfix:after{ 33 content: ""; 34 height: 0; 35 line-height: 0; 36 display: block; 37 visibility: hidden; 38 clear: both; 39 } 40 /* 兼容ie6 */ 41 .clearfix { 42 zoom: 1; 43 }
temp.css
1 .content{ 2 width: 1000px; 3 margin: 0 auto; 4 } 5 .fz14{ 6 font-size: 14px; 7 } 8 .cRed{ 9 color: #FF3232; 10 } 11 .top1{ 12 height: 48px; 13 background-color: #e9e8e8; 14 } 15 .top1 .top_c{ 16 height: 47px; 17 background-color: #e9e8e8; 18 font-size: 12px; 19 color: #000000; 20 font-weight: bold; 21 padding-top: 20px; 22 } 23 .top2{ 24 height: 100px; 25 background-color: #c70202; 26 } 27 .top2 .logo{ 28 height: 100px; 29 background-color: #c70202; 30 } 31 .top2 .logo h1 a { 32 display: inline-block; 33 width: 221px; 34 height: 97px; 35 background: url(../imgs/logo.png) 36 } 37 38 .top2_c { 39 width: 297px; 40 height: 30px; 41 background-color: #ffffff; 42 margin-top: 34px; 43 margin-left: 58px; 44 border: 1px solid #ffffff; 45 border-radius: 3px; 46 } 47 .top2_c .txt{ 48 width: 236px; 49 height: 30px; 50 outline: none; 51 font-size: 12px; 52 text-indent: 3px; 53 } 54 .top2_c .btn { 55 width: 57px; 56 height: 30px; 57 background-color: #c70202; 58 color:#ffffff; 59 border-radius: 0px 3px 3px 0px; 60 } 61 .top2_r{ 62 margin-top: 35px; 63 } 64 .top2_r li{ 65 height: 30px; 66 line-height: 30px; 67 margin-left: 20px; 68 } 69 .top2_r li a{ 70 color: #ffffff; 71 } 72 .top2_r input{ 73 width: 56px; 74 height: 30px; 75 font-size: 14px; 76 } 77 .top2_r li b { 78 display: inline-block; 79 width: 24px; 80 height: 20px; 81 padding-left: 5px; 82 background:url(../imgs/sprite.png); 83 vertical-align: middle; 84 } 85 .top2_r .sina{ 86 background-position: 0 -27px; 87 } 88 /* 底部css */ 89 .footer{ 90 background-color: #2f2f2f; 91 height: 275px; 92 padding: 10px; 93 } 94 .footer .f_border{ 95 height: 275px; 96 border: 1px solid #ffd283; 97 position: relative; 98 } 99 .footer .footer_l{ 100 margin-top: 55px; 101 color: #ccc; 102 margin-left: 106px; 103 } 104 .footer .footer_l li { 105 height: 33px; 106 line-height: 33px; 107 } 108 .footer .f_border b { 109 position: absolute; 110 width: 17px; 111 height: 17px; 112 background-color: red; 113 background: url(../imgs/circle.png); 114 } 115 .footer .f_border .b1 { 116 top: -1px; 117 left: -1px; 118 background-position: right bottom; 119 } 120 .footer .f_border .b2 { 121 top: -1px; 122 right: -1px; 123 background-position: left bottom; 124 } 125 .footer .f_border .b3 { 126 bottom: -1px; 127 right: -1px; 128 background-position: left top; 129 } 130 .footer .f_border .b4 { 131 bottom: -1px; 132 left: -1px; 133 background-position: right top; 134 } 135 136 /* 底部右侧区域 */ 137 .footer_r { 138 margin-top: 34px; 139 } 140 .footer_r li { 141 float: left; 142 width: 105px; 143 height: 100px; 144 background-color: blue; 145 margin-left: 20px; 146 } 147 .footer_r li a { 148 display: inline-block; 149 color: #666666; 150 text-align: center; 151 } 152 .footer_r li s { 153 margin-bottom: 10px; 154 display: inline-block; 155 width: 105px; 156 height: 105px; 157 background: url(../imgs/sprite.png) no-repeat -327px 0; 158 } 159 160 /* 中间内容区域 */ 161 .content1 { 162 height: 800px; 163 background-color: #fae8c8; 164 } 165 .content1 .content_f { 166 margin-top: 130px; 167 position: absolute; 168 } 169 .content1 .content_f img{ 170 position: absolute; 171 width: 490px; 172 height: 470px; 173 } 174 175 .content_r { 176 width: 460px; 177 height: 620px; 178 margin-top: 102px; 179 background-color: #fff; 180 } 181 .content_r h2{ 182 font: normal 400 30px/100px "微软雅黑"; 183 height: 100px; 184 padding-left: 25px; 185 } 186 187 .uname_pwd input{ 188 width: 390px; 189 height: 58px; 190 border: 1px solid #D8D8D8; 191 font-size: 24px; 192 background: url(../imgs/sprite.png) no-repeat; 193 padding-left: 60px; 194 } 195 196 .uname_pwd .txt { 197 background-position: 10px -480px; 198 } 199 .uname_pwd .btn { 200 margin-top: 34px; 201 background-position: 10px -538px; 202 } 203 .remember { 204 height: 100px; 205 font: normal normal 24px/100px "微软雅黑"; 206 } 207 .remember input{ 208 width: 24px; 209 height: 24px; 210 vertical-align: middle; 211 } 212 .loginBtn { 213 width: 300px; 214 margin-left: 80px; 215 height: 60px; 216 background: #E60012; 217 font-size: 24px; 218 color: #fff; 219 } 220 .other{ 221 height: 130px; 222 margin-left: 5px; 223 font: normal normal 20px/130px "微软雅黑"; 224 } 225 226 .login_type li { 227 font-size: 14px; 228 background: url(../imgs/sprite.png) no-repeat; 229 height: 22px; 230 margin-left: 5px; 231 line-height: 20px; 232 padding-left: 24px; 233 width: 66px; 234 } 235 236 .login_type a { 237 color: #666; 238 } 239 .fl_l_t_c { 240 margin-left: 120px; 241 }
index.css
1 .cRed1{ 2 border-bottom: 1px solid red; 3 4 5 } 6 7 8 /* 首页导航区域 */ 9 .nav { 10 height: 77px; 11 background-color: #fff; 12 13 } 14 .nav_c { 15 height: 77px; 16 width: 1000px; 17 margin: 0 auto; 18 } 19 20 .nav_c li { 21 float: left; 22 height: 77px; 23 font: normal normal 18px/77px "微软雅黑 "; 24 margin-right: 25px; 25 26 } 27 .nav_c li a{ 28 color: #666; 29 } 30 .nav_c li a:hover{ 31 color: red; 32 } 33 34 /* 导航区e */ 35 .h2Title { 36 height: 76px; 37 font: normal 700 24px/76px "微软雅黑"; 38 text-align: center; 39 position: relative; 40 } 41 42 .banner{ 43 position: relative; 44 } 45 .banner ul{ 46 width: 1320px; 47 margin: 0 auto; 48 } 49 .banner ul li { 50 float: left; 51 width: 330px; 52 background-color: red; 53 position: relative; 54 } 55 .banner ul li img{ 56 vertical-align: middle; 57 } 58 .banner .des{ 59 width: 330px; 60 height: 63px; 61 background-color: rgba(255,255,255,.6); 62 position: absolute; 63 bottom: 0px; 64 left: 0px; 65 } 66 67 /* 箭头设计 */ 68 69 .arrow a { 70 display: inline-block; 71 width: 145px; 72 height: 77px; 73 background-color: red; 74 position: absolute; 75 top:160px; 76 background: url(../imgs/sprite.png) no-repeat; 77 } 78 .arrow .a_left{ 79 left:180px; 80 background-position: 0 -64px; 81 } 82 .arrow .a_right { 83 right: 180px; 84 background-position: 0 -164px; 85 } 86 .arrow .a_left .word { 87 display: inline-block; 88 height: 48px; 89 line-height: 24px; 90 margin: 15px 15px 0 25px; 91 text-align: right; 92 color: #fff; 93 } 94 .arrow .a_left .img{ 95 vertical-align: top; 96 display: inline-block; 97 width: 16px; 98 height: 48px; 99 margin-top: 15px; 100 background: url(../imgs/sprite.png) no-repeat 0 -264px; 101 102 } 103 .fz14 { 104 font-size: 14px; 105 } 106 /* 搜索区域 */ 107 .search { 108 height: 100px; 109 background-color: #3F3A32; 110 overflow: hidden; 111 } 112 .search .s_center { 113 width: 728px; 114 height: 77px; 115 background-color: #fff; 116 margin: 0 auto; 117 margin-top: 12px; 118 } 119 .search .s_center .txt { 120 width: 555px; 121 height: 77px; 122 outline: none; 123 font: normal normal 18px "微软雅黑"; 124 text-indent : 40px; 125 } 126 .search .s_center .btn{ 127 width: 169px; 128 height: 77px; 129 background-color: red; 130 border: none; 131 outline: none; 132 font: normal normal 18px "微软雅黑"; 133 color: #fff; 134 } 135 136 /* 首页菜单b */ 137 .menu { 138 139 overflow: hidden; 140 } 141 142 .menu .img { 143 width: 1010px; 144 145 } 146 .menu .img li { 147 float: left; 148 width: 334px; 149 150 } 151 .menu .img li img{ 152 vertical-align: middle; 153 } 154 .menu .img .word { 155 width: 334px; 156 height: 57px; 157 background-color: #fff; 158 } 159 .more { 160 position: absolute; 161 top: 0; 162 right: 0; 163 color: #666; 164 font-size: 12px; 165 } 166 167 /* 菜单b区的箭头 */ 168 .arrow_pos{ 169 width: 1200px; 170 margin: 0 auto; 171 position: relative; 172 } 173 .arrow2 a { 174 display: inline-block; 175 width: 30px; 176 height: 98px; 177 position: absolute; 178 top:145px; 179 background: url(../imgs/sprite.png) no-repeat; 180 } 181 .arrow2 .a1{ 182 left: 30px; 183 background-position: 0 -320px; 184 } 185 .arrow_pos .arrow2 .a2 { 186 right: 30px; 187 background-position: -30px -320px; 188 } 189 /* 食材区域 */ 190 /* 将子元素延伸出来部分切除 */ 191 .food { 192 overflow: hidden; 193 } 194 .food .f_nav { 195 background-color: #fff; 196 } 197 .food .f_nav li { 198 float: left; 199 height: 42px; 200 width: 103px; 201 font: normal 700 22px/42px "微软雅黑"; 202 text-align: center; 203 } 204 .food .f_nav li a{ 205 color: #666; 206 } 207 .food .f_img { 208 width: 1010px; 209 } 210 .food .f_img li { 211 float: left; 212 width: 167px; 213 height: 167px; 214 background-color: #fff; 215 text-align: center; 216 line-height: 167px; 217 position: relative; 218 } 219 .food .f_img li img { 220 vertical-align: middle; 221 } 222 .food .f_img li span { 223 position: absolute; 224 bottom: 0; 225 left: 0; 226 height: 60px; 227 width: 167px; 228 background-color: rgba(255,255,255,.6); 229 font: normal 700 18px/60px "微软雅黑"; 230 }