大一学生web课程实训大作业 (静态美食网页制作)

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/239950

(title-F105JP 湖南美食 4页 无js 视频音频)]

截图演示

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  
  
  
  
  



  
  

    

      

        
首页
        
湖南饮食文化
        
特色食物
        
注册
      
    
  
  

    

      

        

          

            

            
          
          

            
用户名：
            

              
            
          
          

            
密码：
            

              
            
          
          

            
 
            

          

        
      
      

        
     
      
    
  
  

    

      
美食魔方
    
    

      

      

      

      

    
    

      
口味虾
      
湖南臭豆腐
      
姊妹团子
      
剁椒鱼头
    
    

      

      

      

      

    
    

      
龙脂猪血
      
火宫殿臭豆腐
      
酱板鸭
      
乾煎鸡油八宝饭
    
  
  
  

    

      

        

          @版权仅个人所属
        
      
    
  

CSS代码

body{
    background-color: #6A1619;
    padding: 0;
    margin: 0;
}
*{
padding: 0;
}
a{
text-decoration: none;
color: #fff;
}
body,td,th {
    color: #fff;
}
.header{
background-color: #F3F3F3;
}
.header a{
color: #6A1619;
font-size: 18px;
line-height: 60px;
display: block;
}
.header td:hover{
background-color: #a57071;
}
.header td:hover a{
color: #fff;
}
.header .active{
background-color: #a57071;
}
.header .active a{
color: #fff;
}
.footer{
background: #F3F3F3;
}
.footer td{
color: #6A1619 ;
}
.video{
position: fixed;
left: 0;
bottom: 50px;
}
.title{
    font-size: 22px;
    font-weight: 600;
}
.slider{
    position: relative;
    width: 700px;
    height: 400px;
    overflow: hidden;
}
.mask{
    width: 4200px;
    position: absolute;
    left: 0;
}
.mask img{
    width: 700px;
    height: 400px;
    float: left;
}
.menu2 li{
    list-style: none;
    float: left;
    margin-right: 20px;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app