摄影分享网站开发

理论与实践相结合---HTML+CSS实践项目一

实践项目一：摄影图片分享网站；

效果展示：http://zerored.3vhost.net/travel/index.html

【项目前提】

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

【项目说明】

随着人们的收入水平也越来越高，物质水平也相应的提升，大家都有更多的时间和收入去做一些自己喜欢的事情，摄影作为一门艺术受到了很多人的喜爱，照片也成为了人们分享生活，保存美好的一种方式。本网站的开发主要适用于摄影店的网站开发，可以通过网站让顾客对本店有所了解。

本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等5大页面组成。每个页面都包含了导航栏、主要界面及底部联系信息。

网页结构图：

 

【开发内容】

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

技术点：列表标签，图片标签，表单元素，浮动。

列表标签：

1、包含logo：插入图片

 <!-- logo部分 -->
        <div class="logo">
            <img src="image/img/logo.png" alt="">
        </div>

2、搜索框、搜索按钮

  <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入搜索内容">
            <button>搜索</button>
        </div>

3、导航列表部分： 使用无序列表

<ul>
                <li>
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="scenery.html">风景篇</a>
                </li>
                <li>
                    <a href="food.html">美食篇</a>
                </li>
                <li>
                    <a href="people.html">人物篇</a>
                </li>
                <li>
                    <a href="content.html">联系我们</a>
                </li>
            </ul>

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

技术点：标题标签，图片标签，文字标签，伪类，浮动。

风景篇标题：

 <!-- 字体区域开始 -->
    <div class="font w">
        <h1>BEAUTY SHOW</h1>
        <P>"I want give good things to recore down,<br/> after the recall will be very beautiful."</P>
    </div>
    <!-- 字体区域结束 -->

文字的隐藏展示效果、图片展示等。 

 <!-- 图片区域开始 -->
    <div class="bodyimg">
        <div class="img1">
            <img src="image/img/3.jpeg" alt="">
            <h4>Record The Picture</h4>
        </div>
        <div class="img2">
            <img src="image/img/4.jpg" alt="">
            <h4>Record The Picture</h4>
        </div>
        <div class="img3">

            <img src="image/img/5.jpeg" alt="">
            <h4>Record The Picture</h4>

        </div>
    </div>
    <!-- 图片区域结束 -->
  <!-- 图片2区域开始 -->
    <div class="body2img w">
        <h3>FROM THE PHOTO ALBUM</h3>
        <div class="img4">
            <img src="image/img/5.jpeg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Enim dicta unde laudantium atque odio at, seape omnis laboriosam hurum, evente maxime, sunt ab assumenda.lpsa distimctio molestias prasesentium aperiam debitis.
            </p>
        </div>
        <div class="img5">
            <img src="image/img/6.jpeg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Velit sit vel.magnam porro magni dolorum minima under nostrum ducimus optio neno deserunt quod iusto corrupti et voluptates maxime,qperiam vitae.
            </p>
        </div>
    </div>
    <!-- 图片2区域结束 -->

CSS代码：

.bodyimg {
    background-color: #fff;
    height: 280px;
    margin: 0 auto;