项目说明
随着人们的收入水平也越来越高,物质水平也相应的提升,大家都有更多的时间和收入去做一些自己喜欢的事情,摄影作为一门艺术受到了很多人的喜爱,照片也成为了人们分享生活,保存美好的一种方式。本网站的开发主要适用于摄影店的网站开发,可以通过网站让顾客对本店有所了解。
本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等5大页面组成。每个页面都包含了导航栏、主要界面及底部联系信息。
网页结构图如下:
项目前提
1、掌握HTML语义化标签;
2、掌握css基本语法;
3、掌握css选择器的使用;
4、掌握css盒子模型;
5、掌握css浮动;
项目内容
首页
页面展示如下:
导航栏:包含logo、搜索框、搜索按钮、以及导航列表。当用户点击导航列表时可以跳转到对应页面。当向下滑动网页时,导航栏会跟着一起向下滑动。当鼠标放置到对应的标题上是,会展示出对应的二级菜单。
技术点:列表标签,图片标签,表单元素,浮动。
部分代码如下:
<div class="box1">
<img class="logo" src="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"> 首页 </a>
<a href="风景篇.html"> 风景篇 </a>
<a href="美食篇.html"> 美食篇 </a>
<a href="人物篇.html"> 人物篇 </a>
<a href="联系我们.html"> 联系我们 </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 {