理论与实践相结合---HTML+CSS实践项目一 |
实践项目一:摄影图片分享网站;
效果展示:http://zerored.3vhost.net/travel/index.html
【项目前提】
- 掌握HTML语义化标签;
- 掌握css基本语法;
- 掌握css选择器的使用;
- 掌握css盒子模型;
- 掌握css浮动;
【项目说明】
随着人们的收入水平也越来越高,物质水平也相应的提升,大家都有更多的时间和收入去做一些自己喜欢的事情,摄影作为一门艺术受到了很多人的喜爱,照片也成为了人们分享生活,保存美好的一种方式。本网站的开发主要适用于摄影店的网站开发,可以通过网站让顾客对本店有所了解。
本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等5大页面组成。每个页面都包含了导航栏、主要界面及底部联系信息。
网页结构图:
【开发内容】
- 导航栏:包含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代码ÿ