项目说明

随着人们的收入水平也越来越高，物质水平也相应的提升，大家都有更多的时间和收入去做一些自己喜欢的事情，摄影作为一门艺术受到了很多人的喜爱，照片也成为了人们分享生活，保存美好的一种方式。本网站的开发主要适用于摄影店的网站开发，可以通过网站让顾客对本店有所了解。
本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等5大页面组成。每个页面都包含了导航栏、主要界面及底部联系信息。
网页结构图如下：

项目前提

1、掌握HTML语义化标签；
2、掌握css基本语法；
3、掌握css选择器的使用；
4、掌握css盒子模型；
5、掌握css浮动；

项目内容

首页

页面展示如下：

导航栏：包含logo、搜索框、搜索按钮、以及导航列表。当用户点击导航列表时可以跳转到对应页面。当向下滑动网页时，导航栏会跟着一起向下滑动。当鼠标放置到对应的标题上是，会展示出对应的二级菜单。

技术点：列表标签，图片标签，表单元素，浮动。
部分代码如下：

<div class="box1"><img class="logo" src="data:image/img/logo.png" width="120px"><ul class="text"><li class="sousuokuang"><input class="search" placeholder="请输入搜索内容" id="data"><input type="submit" value="搜索" class="search-bottom"></li><li class="box1-1"><a href="首页.html">&nbsp;&nbsp;首页&nbsp;&nbsp;</a><a href="风景篇.html">&nbsp;&nbsp;风景篇&nbsp;&nbsp;</a><a href="美食篇.html">&nbsp;&nbsp;美食篇&nbsp;&nbsp;</a><a href="人物篇.html">&nbsp;&nbsp;人物篇&nbsp;&nbsp;</a><a href="联系我们.html">&nbsp;&nbsp;联系我们&nbsp;&nbsp;</a></li></ul>
</div>

.box1 {width: 100%;height: 100px;top: 0;background-color: rgba(255, 255, 255, 0.8);
}
.logo {height: 90px;margin-left: 150px;float: left;
}
.box1 .text {margin-right: 45px;float: right;margin-top: 30px;
}
.sousuokuang {list-style: none;float: left;margin-left: -600px;padding: 0px 20px;
}
.search {height: 35px;width: 320px;border: 1px solid gray;
}
data {display: none;
}
.search-bottom {width: 45px;height: 35px;
}
.box1 .box1-1 li {list-style: none;float: left;padding: 0px 20px;position: relative;
}
.box1 a:hover{color: darkorange;
}
.box1 a {text-decoration: none;color: black;font-size: 20px;
}

分享栏（拓展功能）：包含微博、微信、支付宝、QQ分享。位于首页的右侧，垂直排列。当向下滑动网页时，导航栏会跟着一起向下滑动。

技术点：图片标签，表单元素，定位，浮动。
部分代码如下：

<div class="share"><img src="data:image/img/share1.png" alt=""><p>分享</p><img src="data:image/img/share2.png" alt=""><p>分享</p><img src="data:image/img/share3.png" alt=""><p>分享</p><img src="data:image/img/share4.png" alt=""><p>分享</p>
</div>

.share {height: 500px;width: 60px;position: fixed;left: 100%;margin-left: -70px;bottom: 0px;z-index: 9999;
}
.share img {width: 40px;height: 40px;
}
.share p {font-size: 10px;padding-left: 5px;
}

首页：包含图片、标题、按钮、分享栏以及导航。分享栏与导航栏会跟随着页面的移动向上或者向下移动。
技术点：图片标签，伪类选择器，浮动。
部分代码如下：

<section class="box2"><div><img src="data:image/img/bc.jpg"></div><div></div><div><p>MY BEAUTIFUL LIFE</p><br><botton>LOOK MORE &nbsp;&nbsp;</botton></div>
</section>

.box2 div:nth-child(2) {width: 100%;height: 800px;background-color: #000000;opacity: 0.5;position: absolute;top: 0;left: 0;
}
.box2 div:nth-child(3) {position: absolute;width: 480px;height: 80px;top: 0;left: 0;right: 0;bottom: 0;margin: auto auto;text-align: center;
}
.box2 p {color: white;font-size: 50px;margin-top: -25px;
}
.box2 botton {height: 80px;background-color: tomato;color: white;font-size: 40px;border: tomato;
}

风景篇

页面展示如下：

风景篇：包含标题、文字的隐藏展示效果、图片展示等。鼠标移动到中间三个小图片时，会显示每张图片对应的文字标题。

技术点：标题标签，图片标签，文字标签，伪类，浮动。
部分代码如下：

<div class="middle"><div class="middle_text"><h2>Beauty show</h2><p>"I want give good things to recore down,</p><p>after the recall will be very beautiful."</p></div><div class="img-list"><div class="middle_img"><div class="img1"></div><p>Cool Image</p><p>Record The Picture</p></div>

.middle_img p {text-align: center;height: 40px;font-size: 20px;
}
.middle_text h2 {color: tomato;font-size: 52px;font-family: 'Castellar';font-weight: bold;
}
.middle_img>p:nth-of-type(1) {color: white;background-color: rgba(0,0,0,0.3);line-height: 40px;margin-top: -40px;opacity: 0;
}
.middle_img>p:nth-of-type(1):hover {color: white;background-color: rgba(0,0,0,0.3);line-height: 40px;opacity: 1;
}

美食篇

页面展示如下：

美食篇：包含图片展示，当我们鼠标移至图片上方时，相应图片会放大，鼠标移开时图片自动缩小。

技术点：标题标签，图片标签，文字标签，伪类，浮动。图片实现放大效果：transform: scale(1.5)；transition: all 2s;
部分代码如下：

<div class="text"><h2>Our Gallrey</h2><p>There are many variations of passages of Lorem Ipsum available</p></div><div class="image"><div class="image-list1"><div class="box2"><a href="#"><img src="data:image/gallery/gallery_01.jpg"></a></div></div></div><div class="image"><div class="image-list2"><div class="box2"><a href="#"><img src="data:image/gallery/gallery_02.jpg"></a></div></div></div>

.image {margin: 50px 65px;width: 90%;
}
.image-list1 .box2 {width: 66.66666667%;height: 350px;float: left;padding: 3px;box-sizing: border-box;
}
.image-list2 .box2 {width: 33.3333333%;height: 350px;float: left;padding: 3px;box-sizing: border-box;
}
.box2 {overflow: hidden;
}
.box2 img {vertical-align: baseline;width: 100%;height: 100%;transition: all 2s;
}
.box2 a:hover img {transform: scale(1.5);
}

人物篇

页面展示如下：

人物篇：包含标题，人物展示卡等。当鼠标放置在人物展示卡上面时，展示卡的边框会有阴影效果。

技术点：标题标签，图片标签，文字标签，伪类，浮动
部分代码如下：

<div class="person-gallery"><h2>Character display</h2><div class="gallery"><div class="gallery-item"><img src="data:image/person/bride-maid-1.jpg"><div class="gallery-text"><h3>Bryan Bryan</h3><p>ACTRESS</p><p>Avatar</p><div class="share"><img src="data:image/img/share1.png"><img src="data:image/img/share2.png"><img src="data:image/img/share3.png"><img src="data:image/img/share4.png"></div></div></div>

.gallery {width: 90%;margin-top: 10px;margin-left: 38px;text-align: center;
}
.gallery-item {width: 348px;height: 414px;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);float: left;margin-left: 40px;margin-top: 20px;
}
.gallery-item:hover {box-shadow: tomato 0px 0px 5px 1px;
}

联系我们

页面展示如下：

联系我们：包含标题，地标展示卡。当鼠标移入地标展示卡时，会有相应的地图出现。

技术点：标题标签，图片标签，文字标签，伪类，浮动。
部分代码如下：

底部联系信息：包括联系信息、二维码、以及留言板

技术点：标题标签，文字标签，表单及表单元素。
部分代码如下：

<div class="box3"><hr class="hr1"><div class="box3-left"><h1>联系我们</h1><hr class="hr2" strle><p>摄影是指使用某种专门设备进行影像记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。有时摄影也会被称为照相，也就是通过物体所发射或反射的光线使感光介质曝光的过程。</p><p>地址：重庆市合川区学府路09号</p><p>电话：18225353790</p><p>邮箱：yanghongling@wedutech.com</p><div class="lianxi"><div class="ewm"><p>关注我们</p><img src="data:image/img/ewm.png"></div><div class="wx"><p>微信联系</p><img src="data:image/img/wx.jpg"></div></div></div><div class="box3-right"><h3>在线留言</h3><ul><li><span>您的称呼</span><div class="box3-input"><input type="text" name="name" id="name" placeholder="您的称呼"></div></li><li><span>您的电话</span><div class="box3-input"><input type="text" name="tel" id="tel" placeholder="您的电话"></div></li><li><span>需求和建议</span><div class="box3-input"><textarea name="content" placeholder="请输入您的需求和建议"></textarea></div></li></ul><div class="btn"><input type="submit" value="提交" id="tijiao"></div></div><div class="copy"><p>Copyright © 2020.Company name All rights reserved.</p></div></div>

注意事项

1、首先弄清楚页面的组成部分，弄清楚每个模块内容，开发过程中请可以参照页面的三大组成部分，头部，身体，底部的思想进行，每一个部分的开发结合盒子模型的思想进行布局。
2、在开发过程中应用W3Cshool文档进行查询。W3Cshool查询链接：https://www.w3school.com.cn/html/index.asp
3、注意命名（文件名，class类名，id名，注释等），请严格遵循开发中严格命名规则完成项目。
4、在开发过程中，遇到不会调色的颜色，可使用QQ截图工具，进行RGB值的获取。

总结

以上就是今天分享的内容，本文主要介绍了摄影网站案例总结分享，有需要改进的地方，欢迎各位小伙伴们留言交流，大家一起共同进步吖。

HTML+CSS实践项目一——摄影网站案例总结分享相关推荐

HTML+CSS实践项目之摄影图片分享网站开发自我总结
摄影图片分享网站的开发 [项目前提] 掌握HTML语义化标签: 掌握css基本语法: 掌握css选择器的使用: 掌握css盒子模型: 掌握css浮动: [项目说明] 随着人们的收入水平也越来越高,物质 ...
《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
OOAD实践之路——真实案例解析OO理论与实践（二、第一项任务：特性列表）
查看本系列全部文章: <OOA&D实践之路--真实案例解析OO理论与实践>索引贴第一份说明当这个项目开始时,我们得到的关于我们要做的系统的唯一说明是一页Word文档 ...
分布式缓存的25个优秀实践与线上案例 done
杨彪,蚂蚁金服技术专家,<分布式服务架构:原理.设计与实战>和<可伸缩服务架构:框架与中间件>作者.近10年互联网和游戏行业工作经验. 本文节选自即将出版的<可伸缩服务架 ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
HTML+CSS+前端项目
学习目标: HTML+CSS+前端项目学习内容: HTML认知 HTML基础 CSS基础 CSS进阶 CSS盒子模型 CSS浮动在线项目实战 CSS定位装饰学习时间: 周一至周五晚上 7 点-晚 ...
视频教程-数据分析快速实践：企业真实案例精讲-Python
数据分析快速实践:企业真实案例精讲本科:武汉大学软件工程博士:美国佐治亚大学地理信息系统杨威 ¥69.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
《出行即服务(MAAS)实践指南介绍与案例集》发布
出行即服务(MaaS)是一种新的出行服务理念,指"将不同方式的出行服务整合进按需出行的一体化出行服务平台中"的一种服务.在城市和国家层面发展MaaS的主要目的在于,通过整合出行服 ...
Cognitive Inference：认知推理下的常识知识库资源、常识推理测试评估与中文实践项目索引...
作者 | 刘焕勇责编 | 李雪敬出品 | CSDN博客 CognitiveInference Cognitive Inference,认知推理.常识知识库.常识推理与常识推理评估的系统项目,以现有 ...

HTML+CSS实践项目一——摄影网站案例总结分享