作品介绍

1.网页作品简介方面 :HTML网站模板。主要有:首页 家乡简介 风景名胜 特色美食 站长介绍 在线调查 等总共 6 个页面html下载。

2.网页作品编辑:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、表单、二级三级页面等,视频、 音频元素 、Flash,基本期末作业所需的知识点全覆盖。

文章目录

一、设计说明

1.LOGO、导航栏、页尾

2.首页

3.家乡简介

4.风景名胜

5.特色美食

6.站长介绍

7.在线调查

二、作品演示

 三、代码目录

 四、代码演示

一、设计说明

1.LOGO、导航栏、页尾

  logo由一张图片组成;导航栏是由列表,超链接组成,划过每个列表块是都会有颜色变化和底部边框的变化;页尾是由段落文字和一个图像构成,图像作为一个标志在右下角。

2.首页

主体部分:首页的主体分为上下两部分,下面在分为左右两部分。上面的部分的div为一个轮播图;下面左部分的div为一个新闻,这个部分由一张图片和一个段落文字链接组成,下右方的div又分为上下两个div,上方为一个简短的家乡介绍段落,下方为一个风景图片滚动介绍。

3.家乡简介

主体部分:左右两个部分。左边为一个简介目录的一个div,该部分的每一个标题对应的是右边简介的内容位置;右边的最上方放置了一个家乡宣传视频,下方是家乡的内容介绍用段落加图片的方式展现,可以从左边的目录直接找到相应位置。

4.风景名胜

主体部分:在一个大的div中设置了一个一列多行的表格,每个表格中都是一个风景的介绍,每个风景介绍都由一个照片、一段文字介绍和一个超链接来链接每个风景点的介绍。

5.特色美食

主体内容:分为上下两个部分,上部分中又分为左中右三个部分,下方为四个相等的div块。上方中左边的div块中为一个美食的轮播图,中间部分为一个整体的美食简介,由一个照片和一个段落文字链接组成,点击文字信息会链接到一个美食的链接;右边为一个美食排行榜的列表。下边的为四个美食的介绍,分别有一个照片和一段文字链接组成,每个链接为一个美食简介。

6.站长介绍

主体内容:分为左右两个部分组成。左边是一个一列两行表格,上边的表格内容设置了一个个性签名,还有一个时钟显示;下边为一个信息栏。右边是一个自我介绍内容,内容用列表来显现,边框设置阴影更有立体感。

7.在线调查

主体内容:一个div块中用表单来设置问题的输入,其中有单选,复选,多行文本输入。

在最下方还有两个按钮,提交和重置。

二、作品演示

首页

 家乡简介

 

 

名胜风景

  

特色美食

  

站长简介

 

在线调查

 

 三、代码目录

 四、代码演示

首页

   

   

   

    index.html

   

   

       

        前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第1张

   

   

       

       

   

   

       

       

            前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第2张

            前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第3张

            前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第4张

            前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第5张

            前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第6张

       

   

   

       

           

           

               

                   

                       

宝鸡介绍

                       


                       

                            宝鸡,古称陈仓、雍城,誉称“炎帝故里、青铜器之乡”,陕西省辖地级市,关中平原城市群副中心城市、关天经济区副中心城市。宝鸡地处关中平原西部,下辖4区8县,总面积18117平方公里。截至2021年末,宝鸡全市常住人口为328.2万。

                       

                       

                            宝鸡历史悠久,是中华文化重要支脉宝学(宝鸡之学)所在地,有2700余年建城史,出土了晚清四大国宝及石鼓、何尊等文物,存有西府社火、凤翔木版年画、泥塑等中华工艺。宝鸡是联合国人居环境奖、中国人居环境奖、中华环境奖获得城市,全国文明城市、中国优秀旅游城市、国家森林城市。宝鸡也是我国西部工业重镇、高端装备制造业基地、中国钛谷。宝鸡位于陇海、宝成、宝中铁路交汇处,是我国重要的铁路交通枢纽之一。

                       

                   

                   

                       

                       

主要风景

                       


                       

                           

                                   

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第8张
  •                                

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第9张
  •                                

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第10张
  •                                

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第11张
  •                                

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第12张
  •                                

  • 前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第13张
  •                            

                       

                       


                   

               

           

       

   

   

/*样式表文件out.css*/

* {

    /*全局选择器*/

    margin: 0px;/*外边距*/

    padding: 0px;/*内边距*/

}

body {

    /*主体*/

    color: rgb(42, 61, 79);

    font-family: 楷体;/*字体样式*/

    background-color: rgb(235, 225, 225);/*背景颜色*/

}

.header {

    /*头部*/

    width: 100%;/*宽度*/

    height: 150px;/*高度*/

}

#hi1 {

    /*头部图片*/

    width: 100%;/*宽度*/

    height: 150px;/*高度*/

}

.dh ul {

    /*导航栏*/

    width: 1539px;

    padding: 0px;/*内边距*/

    height: 30px;/*高度*/

    margin-bottom: 30px;/*外边距*/

}

.dh ul li {/*导航栏行的设置*/

    height: 30px;

    width: 16.45%;

    list-style: none;/*列表样式*/

    float: left;/*左浮动*/

    display: inline;

    font: 0.9em;

}

.dh ul li a {/*导航栏链接设置*/

    text-align: center;/*文本位置*/

    color: white;

    font-size: larger;/*字体大小*/

    font-family: 楷体;

    width: 100%;

    margin: 0px;

    text-decoration: none;/*列表样式*/

    display: block;

    background-color: rgb(87, 156, 241);

    line-height: 40px;

    border-bottom: 0px solid rgb(168, 164, 172);

}

.dh ul li a:hover {    /*鼠标划过导航栏时*/

    color: rgb(0, 0, 0);

    background-color: rgb(37, 84, 155);

    border-bottom: 3px solid rgb(16, 4, 28);

   

}

.footer {

    /*尾部*/

    margin-top: 10px;

    clear: both;/*清楚浮动*/

    width: 100%;

    height: 70px;

    background-color: rgb(87, 156, 241);

    color: rgb(99, 34, 34);

    font: italic 14px/20px 宋体;/*文字样式*/

    text-align: center;

}

.footer p{

    margin-top: 10px;

}

#fi1 {

    /*尾部图片*/

    width: 100px;

    height: 70px;

    float: right;/*右浮动*/

    padding: 0px;/*内边距*/

}

/*主体部分*/

.donghua {

    /*轮播*/

    border-radius: 5px;/*边框弧度*/

    width: 70%;

    height: 250px;

    overflow: hidden;/*图片隐藏*/

    margin: 10px 200px 0px 200px;

}

#photo {/*轮播图片的总设置*/

    display: block;/*块展示*/

    width: 6000px;

    height: 250px;

    animation: bj 8s linear infinite;/*动画设置*/

    /*动画*/

}

#photo img {

    float: left;

    width: 1200px;

    height: 100%;

    padding: 0px 0px 0px 0px;

}

@keyframes bj {/*轮播图动画*/

    0%,

    20% {

        margin-left: 0px;

    }

    25%,

    40% {

        margin-left: -1200px;

    }

    45%,

    60% {

        margin-left: -2400px;

    }

    65%,

    80% {

        margin-left: -3600px;

    }

    85%,

    100% {

        margin-left: -4800px;

    }

}

.zhuti {/*主体内容*/

    margin: 20px 100px 0px 100px;

}

#zhuti-left {/*主体左边部分*/

    float: left;

    padding: 5px;

    width: 200px;

    background-color: rgb(210, 200, 170);

}

#zhuti-left img {/*左边图片设置*/

    width: 190px;

    height: 150px;

}

#zhuti-left img:hover{

    transform: scale(1.1);

}

#zhuti-left a {/*左边超链接*/

    text-decoration: none;

    color: rgb(61, 87, 109);

}

#zhuti-left a:hover{

    color: rgb(211, 35, 35);

}

#zhuti-left p {/*左边文字设置*/

    letter-spacing: 2px;/*字间距*/

    text-indent: 2em;

    line-height: 1.5em;

}

#zhuti-right {/*右边整体设置*/

    float: left;/*左浮动*/

    width: 800px;

    height: 438px;

    padding: 5px;

    background-color: rgb(210, 200, 170);

    margin-left: 40px;

}

#zhuti-right p {/*右边文字设置*/

    letter-spacing: 2px;

    text-indent: 2em;

    line-height: 1.5em;

}

#zhuti-right img {/*右边图片设置*/

    width: 170px;

    height: 200px;

    border: 2px #cc66 ridge;

}

#zhuti-right ul {/*右边列表设置图片*/

    list-style-type: none;/*列表样式无*/

}

#zhuti-right li {

    float: left;

}

家乡简介

   

   

   

    jxjj

   

   

       

        前端 css javascript web期末作业网页设计——我的家乡(网页源码)  第1张