关于宠物简易网页前端 HTML+CSS+JS小狗汪汪网期末设计

第1章 网站总体设计

1.1网站设计主题

网站设计主要来源于小狗，而且因为小狗只能看到蓝色和黄色，所以我的网站主色调是由蓝色和黄色构成。主题也是围绕着小狗图片，小狗品种，小狗视频等方面构成。

1.2.网站功能要求

1.2.1网站功能结构图

设计一个关于小狗的网站。改网站将完成狗狗种类、狗狗图片、狗狗视频、狗狗新闻和加入我们的功能板块图如下图所示。

图1-1 功能模块图

1.2.2 网站首页布局图

图1-2 首页布局图

1.2.3 网站扩展功能

1.增加一个流浪小狗收养板块。

2.增加一个小狗的喜好和禁忌物品。

3.增加一个狗友交流社交板块。

第2章 CSS样式设计

2.1 CSS介绍

我运用CSS对表格，字体和文本样式，主页面和其他页面等进行美化设计。设置了背景图片。

2.2 CSS详细设计

2.2.1首页CSS设计style.css

1. 样式功能

1. 使图片如手风琴样式，当鼠标移动到图片时，图片会放大。
2. 图片自动轮播，当图片到最后一张时会自动跳转到第一张图片继续自动轮播。
3. 用户注册页面，形成表格。

1. 样式关键代码

 

第3章 网站页面实现

3.1DreamWear介绍

3.2网站页面设计

3.2.1 首页index.html

1. 页面功能

图片如手风琴样式，当鼠标移动到图片时，图片会放大。

1. 页面效果图

图3-1 主界面运行效果

3.2.2次页gougouzhonglei.html

1. 页面功能

有多种狗狗的种类，鼠标点击“详细”将跳转百度百科更加详细的页面。

1. 页面效果图

图3-2 次界面运行效果

3.2.3次页gougoutupian.html

1. 页面功能

图片自动轮播，当图片到最后一张时会自动跳转到第一张图片继续自动轮播。

1. 页面效果图

图3-3 次界面运行效果

3.2.4次页gougoushipin.html

1. 页面功能

视频自动播放小狗相关视频。

1. 页面效果图

图3-4 次界面运行效果

3.2.5次页gougouxinwen.html

1. 页面功能

当鼠标点击感兴趣的新闻，将跳转该新闻的详细内容。

1. 页面效果图

图3-5 次界面运行效果

3.2.6次页jiaruwomeng.html

1. 页面功能

可以注册加入，每个表单将会提示需要填写的内容，如果填写错误，将会报错，直到填写正确为止。

1. 页面效果图

图3-6 次界面运行效果

1. Js技术

可以注册加入，每个表单将会提示需要填写的内容，如果填写错误，将会报错，直到填写正确为止。

1. 部分核心代码

@charset "utf-8";
/* CSS Document */
/*水平导航菜单*/
*{padding: 0px; margin: 0px;}
body{font:62.5%/1.4"微软雅黑",Verdana,Arial,Helvetica,sans-serif;
background-image:url(../images/bg.gif)
}
.zhuti{ width: 1000px;margin: 0 auto;}
h1,h2,h3,h4,h5 {font-weight:bold; color:#333;}
h6{font-weight:bold; color:#FF0}
h1 { font-size: 34px; line-height:1.3em;}
h2 { font-size: 30px; line-height:1.2em;}
h3 { font-size: 26px; line-height:1.6em;}
h4 { font-size: 22px; line-height:1.25em;}
h5 { font-size: 18px; line-height:1.6em;}
h6 { font-size: 14px; line-height:1.5em;}
p { line-height:160%;}
hr{ border:1px solid #ddd; border-width:0 0 1px 0; height:1px; font-size:0; margin:25px 0; clear:both;}
ul{list-style-type: none;}
footer{
	text-align:center;
	color:#69F;
       }
header{
	height:150px;
    width:auto;
    position: relative;
	background-image:url(../images/001.jpeg);
}
#nav{
	background-image:url(../images/003.jpg);
	height: 30px;
	}
nav ul li{display: inline-block;}
nav ul a{
    display: inline-block;
    line-height: 30px; width: 100px;text-align: center;
    border-right: solid 1px #0CF;
    color: #000;text-decoration: none;font-size:1.8em;
    transition:background 0.5s linear;
}
nav ul a:hover{background-color: #0FF;}
/*多级菜单*/
#nav nav ul li{position: relative;}
#nav nav ul ul li{background-image:url(../images/003.jpg);}
#nav nav ul ul li a{border-left: solid 1px #834524;border-right: solid 1px #0FF;border-bottom: solid 1px #0FF;}
#nav nav ul ul{visibility: hidden;position: absolute;left:-1px;background-image:url(../images/003.jpg);}
#nav nav ul li:hover ul{visibility: visible; z-index: 100;}

#search{position:absolute;top:111px;left:730px;text-align:right;}
#search input[type="search"]{ height:30px;width: 200px;padding-left:5px;display: inline-block;vertical-align: top;}
#search input[type="submit"]{ height:30px;display:inline-block;vertical-align:top;padding: 0 10px;}
#logo{
	position:absolute;
	top:25px;
	left:90px;
	}
#logo a{font-size:2.5em;color:#FF0;text-decoration:none;}
#logo a h1{font-weight: normal;}
audio{display: none;}

        .shell{
            width: 100%;
            height: 500px;
            display: flex;
        }
        .box1{
            flex: 1;
            overflow: hidden;
            transition: .5s;
            margin: 0 20px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
            border-radius: 20px;
            border: 10px solid #39F;
            background-color: #FF3;
        }
        .box1>img{
            width: 200%;
            height: 85%;
            object-fit: cover;
            transition: .5s;
        }
        .box1>span{
            font: 200 45px '优设标题黑';
            text-align: center;
            height: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1:hover{
            flex-basis: 40%;
        }
        .box1:hover>img{
            width: 100%;
            height: 100%;
        }

   input[type]{
            border: 1px solid dark #69F;
            background: white;
        }
        #button{
            border: 10px solid #69F;
            width: 200px;
            box-shadow:0px 4px 5px #666;
            background: #69F;        
            color: white;    
        }

.border{text-align:center margin: 10px 0px;}
.border img{width: 370px;}

.banner {
				width: 1000px;
				height: 500px;
				overflow: hidden;
			}
 
			.box {
				width: 400%;
				height: 400px;
				animation: banner 5s infinite;
			}
 
			.box img {
				width: 25%;
				height: 400px;
				float: top;
			}
 
			@keyframes banner {
				0% {
					margin-left: 0px;
				}
 
				33.3% {
					margin-left: -100%;
				}
 
				66.6% {
					margin-left: -200%;
				}
 
				100% {
					margin-left: -300%;
				}

第4章 技术总结

4.1设计难点

1.图片如手风琴样式，当鼠标移动到图片时，图片会放大。运用CSS完成。

2.图片自动轮播，当图片到最后一张时会自动跳转到第一张图片继续自动轮播。运用CSS完成。

3.可以注册加入，每个表单将会提示需要填写的内容，如果填写错误，将会报错，直到填写正确为止。运用CSS和JS共同完成。

4.2技术扩展

1.自动播放背景音乐。

2.自动播放视频。

3.设置注册登录页面

第五章 点赞收藏评论

看完觉得有用的话希望你能点赞收藏评论！！！感谢！！！