第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 样式功能 使图片如手风琴样式，当鼠标移动到图片时，图片会放大。图片自动轮播，当图片到最后一张时会自动跳转到第一张图片继续自动轮播。用户注册页面，形成表格。 样式关键代码
第3章 网站页面实现
3.1DreamWear介绍
3.2网站页面设计
3.2.1 首页index.html 页面功能图片如手风琴样式，当鼠标移动到图片时，图片会放大。
页面效果图
图3-1 主界面运行效果
3.2.2次页gougouzhonglei.html 页面功能有多种狗狗的种类，鼠标点击“详细”将跳转百度百科更加详细的页面。
页面效果图
图3-2 次界面运行效果
图片自动轮播，当图片到最后一张时会自动跳转到第一张图片继续自动轮播。
页面效果图
图3-3 次界面运行效果
视频自动播放小狗相关视频。
页面效果图
图3-4 次界面运行效果
当鼠标点击感兴趣的新闻，将跳转该新闻的详细内容。
页面效果图
图3-5 次界面运行效果
可以注册加入，每个表单将会提示需要填写的内容，如果填写错误，将会报错，直到填写正确为止。
页面效果图
图3-6 次界面运行效果
可以注册加入，每个表单将会提示需要填写的内容，如果填写错误，将会报错，直到填写正确为止。
部分核心代码@charset "utf-8";
*{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.设置注册登录页面
第五章 点赞收藏评论
看完觉得有用的话希望你能点赞收藏评论！！！感谢！！！
