摄影分享网站开发

理论与实践相结合---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代码ÿ

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值