留下美好瞬间，欣赏大千世界—– 摄影图片分享网站

admin • • 前端

前言

随着人们的收入水平也越来越高，物质水平也相应的提升，大家都有更多的时间和收入去做一些自己喜欢的事情，摄影作为一门艺术受到了很多人的喜爱，照片也成为了人们分享生活，保存美好的一种方式 。

一、项目前提--知识掌握点

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

二、网站简介

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

每个人页面基本上都有导航栏和底部联系信息， 所以  今日主要分享一下导航栏、底部联系信息和首页里的一个分享栏。

    1、导航栏

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

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

 HTML代码如下：

<body>
    <div  >
        <!-- 导航栏 -->
        <div class="nav">
            <img src="images/img/logo.png">
            <ul class="nav_text">
                <li class="search-li">
                    <input class="search" value="请输入搜索内容"  >
                     <button  class="seaech_btn">搜索</button>
                   
                    <!-- <input type="submit" value="搜索" class="seaech_btn"> -->
                </li>
                <li><a href="index.html">首页</a></li>
                <li><a href="scenery.html">风景篇</a>
                    <ul class="nav_list">
                        <li><a href="tibetan.html">藏区</a></li>
                        <li><a href="sea.html">大海</a></li>
                        <li><a href="mountain.html">高山</a></li>
                        <li><a href="snow.html">雪地</a></li>
                    </ul>
                </li>
                <li><a href="food.html">美食篇</a>
                    <ul class="nav_list">
                        <li><a href="#">川菜</a></li>
                        <li><a href="#">粤菜</a></li>
                        <li><a href="#">徽菜</a></li>
                        <li><a href="#">浙菜</a></li>
                    </ul>
                </li>
                <li><a href="perple.html">人物篇</a>
                    <ul class="nav_list">
                        <li><a href="#">球星</a></li>
                        <li><a href="#">歌星</a></li>
                        <li><a href="#">演员</a></li>
                        <li><a href="#">名人</a></li>
                    </ul>
                </li>
                <li><a href="content.html">联系我们</a></li>
            </ul>
        </div>

css样式界面：

* {
    padding: 0px;
    margin: 0px;
}

body {
    /* width: 1200px; */
    font-family: "微软雅黑";
    margin: 20px auto;
    /* background-color:rgba(255, 250, 205,0.5) ; */
}

.nav {
    position: sticky;
    width: 100%;
    height: 100px;
    /* position: sticky; */
    top: 0;
    z-index:9999;
    background-color:rgba(255,255,255,0.8);
}

.nav img {
    height: 90px;
    margin-left: 150px;
    float: left;

}
.nav .nav_text {
    margin-right: 45px;
    float: right;
    margin-top: 30px;
}

.nav .nav_text li {
    list-style: none;
    float: left;
    padding:0px 20px;
    position: relative;
}
.nav_text>li:hover .nav_list{
    /* display: block; */
  opacity: 0.8;
  
}
.nav_list a:hover{
    color: skyblue;
}
.nav a {
    text-decoration: none;
    color: black;
    font-size: 20px;
}
.nav_text>li>a:hover{
    color: red;
}
.nav_list{
    border-radius: 5px;
    width: 90px;
    position: absolute;
    top: 30px;
    background-color: tomato;
    z-index: 9999;
    margin-left: -10px;
    opacity: 0;
    /* 设置一个div元素的透明度级别： */
    /* display: none; */
}
.nav_list li{
    float: left;
    margin: 10px 0;
    /* padding: 2px 10px; */
    text-align: center;
}
.search-li{
    margin-right: 40px;
}
 
.search{
    height: 35px;
    width: 320px;
    border: 1px solid grey;
}
.seaech_btn{
    width: 45px;
    height: 35px;
}

2、分享栏

包含微博、微信、支付宝、QQ分享。位于首页的右侧，垂直排列。当向下滑动网页时，导航栏会跟着一起向下滑动。

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

                                                                                  

 HTML代码如下：

  <!-- 分享 -->
        <div class="share">
            <img src="images/img/share1.png" alt="">
            <p>分享</p>
            <img src="images/img/share2.png" alt="">
            <p>分享</p>
            <img src="images/img/share3.png" alt="">
            <p>分享</p>
            <img src="images/img/share4.png" alt="">
            <p>分享</p>
        </div>

css样式界面：

 .share {
            height: 500px;
            width: 60px;
            position: fixed;
            left: 100%;
            margin-left: -50px;
            bottom: 0px;
            z-index: 100;
          
        }

        .share img {
            width: 40px;
            height: 40px;
        }

        .share p {
            font-size: 10px;
            padding-left: 5px;
        }

3、底部信息联系：

       包括联系信息、二维码、以及留言板

技术点：标题标签，文字标签，表单及表单元素

<div class="footer">
            <!-- 使用 <hr> 标签进行分隔： -->
            <hr class="hr1">
            <div class="footer-left">
                <h1>联系我们</h1>
                <hr class="hr2" style=>
                <p>摄影是指使用某种专门设备进行影像记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。
                    有时摄影也会被称为照相，也就是通过物体所发射或反射的光线使感光介质曝光的过程。</p>
                <p>地址：重庆市合川区学府路09号</p>
                <p>电话：18225353790</p>
                <p>邮箱：[email protected]</p>
                <div class="lx">
                    <div class="ewm">
                        <p>关注我们:</p>
                        <img src="images/img/ewm.png">
                    </div>
                    <div class="wx">
                        <p>微信联系:</p>
                        <img src="images/img/wx.jpg">
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <h3>在线留言</h3>
                <div>
                    <ul>
                        <li>
                            <span>您的称呼</span>
                            <div class="div_input">
                                <input type="text" name="name" id="name" placeholder="您的称呼">
                            </div>
                            <!--  placeholder带有占位符文本的文本区域：写内容 -->
                        </li>
                        <li>
                            <span>您的电话</span>
                            <div class="div_input">
                                <input type="text" name="tel" id="tel" value="您的电话">
                            </div>
                        </li>
                        <li class="li_last">
                            <span>需求和建议</span>
                            <div class="div_input">
                                <textarea name="content" placeholder="请写下你的需求和建议"></textarea>
                            </div>
                        </li>
                    </ul>
                    <div class="btn">
                        <input type="submit" value="提交" id="tj">
                    </div>
                </div>
            </div>
            <div class="copy">
                <p>Copyright © 2020.Company name All rights reserved.</p>
            </div>
        </div>

css样式界面：

.footer{
    clear: both;
    width: 90%;
    margin: 80px 65px;
    margin-bottom: 0px;
    position: relative;
    color:#353535;
}
.hr1{
    margin: 35px 30px;
    width: 90%;
    border: none;
    height:1px;
    background-color: pink;
}
.footer-left{
    width: 40%;
    padding-left: 40px;
}
.footer-left h1{
    font-size: 30px;
}
.hr2{
    width: 115px;
    border: solid 2px;
    margin-top: 15px;
}
.footer-left p{
    margin-top: 40px;
    
}
.footer-left>p:nth-of-type(1){
    line-height: 35px;
}
.lx{
    position: relative;
    width: 400px;
    height: 200px;
}
.lx img{
    width: 150px;
    height: 150px;
}
.wx{
    position: absolute;
    left:200px;
    bottom: 30px;
}
.footer-right{
    width: 377px;
    height: 513px;
    padding: 0px 25px;
    border: 1px solid  rgba(0, 0, 0, 0.1);
    position: absolute;
    left:713px;
    top:80px ;
}
.footer-right h3{
    text-align: center;
    font-size: 1.25rem;
    margin: 50px 0px;
}
ul {
	list-style: none;
}
.footer li{
    margin: 10px 1rem;
    width: 156px;
    height: 86px;
    float: left;

}
.footer-right span{
    display: block;
    width:156px;
    margin-bottom: 10px;
}
#name,#tel{
    width: 140px;
    height: 46px;
    padding: 0px 15px;
}
.li_last{
    width: 530px;
    height: 228px;
}
.div_input input,.div_input textarea{
    border: 1px solid  rgba(0, 0, 0, 0.2);
}
.div_input textarea{
    width: 364px;
    height: 188px;
}
.btn,#tj{
    display: inline-block;
    width: 110px;
    line-height: 34px;
    background: tomato;
    color: #fff;
    text-align: center;
    border: 0;
    position: absolute;
    top: 230px;
    left: 75px;
    margin-top: 5px;
}
.copy{
    clear: both;
    background-color: rgba(192, 192, 192, 0.6);
    border-top: 2px dotted #fff;
    text-align: center;
    padding: 20px 0px;
    text-align: center;
}

三、注意事项

  1. 首先弄清楚页面的组成部分，弄清楚每个模块内容，开发过程中请可以参照页面的三大组成部分，头部，身体，底部的思想进行，每一个部分的开发结合盒子模型的思想进行布局。
  2. 在开发过程中应用W3Cshool文档进行查询。

W3Cshool查询链接：https://www.w3school.com.cn/html/index.asp

总结 :

这就是今日的分享，希望今天的分享对你们有所帮助！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>