前端项目练习(一) ---美食美客网页制作

项目名称：美食美客网页制作
技术栈：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">更多菜单&nbsp;&nbsp;&nbsp;></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="#">更多食材&nbsp;&nbsp;&nbsp;></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 }
复制代码

 

 

 
posted @   窄小的空间  阅读(133)  评论(0)  编辑  收藏  举报
相关博文：
·  谷歌账号尚未与设备关联的解决办法
·  前端简易练习
·  胡学乱想----前端知识点（css）
·  08HTML+CSS
·  移动换页面布局实战项目
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae