Web前端期末大作业-重庆旅游景区网页设计（HTML+CSS+JS）

一、作品介绍

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

---

二、作品效果

▶️视频演示

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

(title-E85JP 重庆旅游7页 带js 带轮播)]

截图演示

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  
    
    
    
    
    
  

  
    

      
      

        
        

        
        

          
          

            
              
            
          
          
          

          
          

            
            
          
          
          

            
            
          
        
      
      

        

          
首页
          
美食
          
景点
          
酒店
          
攻略
        
      

      

        
重庆
        

          美食　 景点 特产 民族 友情链接:重庆市旅游政务网
        
        

        

          
院校
          

            

              
              

                重庆大学

                创办于1929年 

                学校占地面积5212亩
              
            
            

              
              

                重庆医科大学 

                创建于1956年 

                “211”院校
              
            

            

              
              
              

                重庆邮电大学 

                创办于1950年3月 

                开设有53个本科专业
              
            

            

              
              
              

                重庆工商大学 

                始创于1952年 

                是入选“小211工程“的高校之一
              
            
          
        
      

      

        
重庆旅游
      
    
  
  

CSS代码

@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body {  font-family: "微软雅黑";font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:url(../images/bej.jpg);}
td,th {font-family: "微软雅黑";font-size: 12px;color: #000000;}
a {color: #000000;} 
A:link {TEXT-DECORATION: none;} 
A:visited {TEXT-DECORATION: none;}

ul,li{list-style-type:none;}
.clearit{clear:both;}
#page{width:980px; margin:0 auto; background: rgba(255,255,255, 0.5 )}
.nav{width:980px; height:40px; line-height:40px; text-align:center; background:#56b2e5;}
.nav ul li{width:120px; float:left; margin-left:40px; display:inline; font-size:14px;}
.nav ul li a{color:#FFFFFF; font-size: 16px}
.nav ul li A:hover {color:#2059a6}
.zuo{width:400px; float:left;}
.you{width:540px; float:right; font-size:14px; font-family:"微软雅黑"; line-height:26px; padding:0 10px;}
.jieshao{width:960px; padding:10px; background:#FFFFFF;}
.tuce h2{font-size:14px; line-height:24px; color: #000; font-weight:bold; text-align:left; border-bottom:2px solid  #CCC; margin-bottom:20px;}
.tuce{ width:960px; padding:0 10px; overflow:hidden;}
.tuce p{padding-top:5px; font-size:14px; line-height:30px;}
.left_in{ width:410px; float:left; overflow:hidden; margin-right:15px;}
.left_in img {margin-top:10px;}
.right_in{ width:530px; float:right}
.right_in ul li{ width:240px; margin:10px; background:#FFFFFF; float:left; }
.right_in ul li img{ width:240px; border-bottom:1px solid #CCC; }
.right_in ul li p{ padding:10px; color:#666;}

.footer{background:#56b2e5; margin-top:10px;} 
.footer p{text-align:center;padding:20px 0; color:#FFFFFF;}
.xinxi{width:960px; padding:10px; background:#FFFFFF;}

.center_in{ width:980px; margin:0 auto;}
.center_in ul li{ width:220px; margin:10px; background:#FFFFFF; float:left; }
.center_in ul li img{ width:220px; border-bottom:1px solid #CCC; }
.center_in ul li p{ padding:10px; color:#666;}

.center_left{ width:500px; float:left;}
.center_right{ width:450px; float:right; line-height:30px;}


.yq{ float:right; color:#666}
h1{ font-family:"微软雅黑"; line-height:80px;}


.ao { margin-right:30px; line-height:40px; }

---

四、更多源码

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

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

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