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

最新推荐文章于 2024-04-30 14:21:01 发布

三秋吖

最新推荐文章于 2024-04-30 14:21:01 发布

阅读量1.2k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_55002082/article/details/126094313

版权

项目说明

随着人们的收入水平也越来越高，物质水平也相应的提升，大家都有更多的时间和收入去做一些自己喜欢的事情，摄影作为一门艺术受到了很多人的喜爱，照片也成为了人们分享生活，保存美好的一种方式。本网站的开发主要适用于摄影店的网站开发，可以通过网站让顾客对本店有所了解。
本网站开发包含首页、风景篇、美食篇、人物篇、联系我们等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">&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 {