前端经典项目案例练习-----小伙伴们都惊呆了

前言有多少向我一样的学生，选择了计算机不知道走什么方向，校园里的学习少之又少，学完了，犹如没学一样，等到毕业的时候看着身边的人，纷纷转行，而自己热爱的专业却以自己的能力不足，把你拒之门外，今天我思考良久，决定还是走前端这个方向，希望能认识这个方向的小伙伴，我们一起努力，去追逐自己的梦想一、前端是什么？“前端，又称Web前端。是指计算机Web应用程序（网站）的前台页面，在我们打开一个网站所看到网页界

刘怼怼

5151人浏览 · 2021-11-12 10:54:36

刘怼怼 · 2021-11-12 10:54:36 发布

前言

有多少向我一样的学生，选择了计算机不知道走什么方向，校园里的学习少之又少，学完了，犹如没学一样，等到毕业的时候看着身边的人，纷纷转行，而自己热爱的专业却以自己的能力不足，把你拒之门外，今天我思考良久，决定还是走前端这个方向，希望能认识这个方向的小伙伴，我们一起努力，去追逐自己的梦想

一、前端是什么？

“前端，又称Web前端。是指计算机Web应用程序（网站）的前台页面，在我们打开一个网站所看到网页界面的内容以及交互体验，一般都是由前端工程师进行开发设计的页面，该内容属于前端部分。如：使用小程序开发者工具开发的这一部分代码，是属于前端部分。小程序开发是前后端分离的，获取动态数据是通过后端的API进行请求。”

二、主要的技术

学会以上的技术，进大场应该不是问题

三、项目案例练习

1.需求图：

2.代码：

2.1 导航栏: html 部分

    <div class="nav">
        <ul>
            <li class="logo">
                <a href="index.html"></a>
            </li>
            <li class="link">
                <a href="zuoping.html">作品</a>
            </li>
            <li class="link">
                <a href="luntan.html">论坛</a>
            </li>
            <li class="link">
                <a href="sheyingshi.html">摄影师</a>
            </li>
            <li class="link">
                <a href="camara.html">相机</a>
            </li>
            <li class="link">
                <a href="syds.html">摄影大赛</a>
            </li>
            <li class="link">
                <a href="">游学院</a>
            </li>
            <li class="search">
                <div>
                    <input type="text" placeholder="">
                </div>
            </li>
            <li class="create">
                <a href="">登录</a>
            </li>
            <li class="create">
                <a href="">注册</a>
            </li>
        </ul>
    </div>

2.2 css部分

html{
    min-height: 700px;
}
html,body{
    height: 100%;

}
input{   

    border: 0;
    outline: 0;
    background-color: rgb(0,0,0,0);
    display: block;}
.nav{
    width: 100%;
    position: fixed;
    /* 层级 */
    z-index: 1;
    background-color: #0000;
    background-color: rgb(0,0,0,0.2);
}
.nav ul{
    width: 1200px;
    height: 61px;
    margin: 0 auto;
}
.nav ul li{
    float: left;
    height: 61px;
}
.nav ul .logo a{
    display: block;
    width: 106px;
    height: 36px;
    background-image: url(../images/logo_white.png);
    background-size: 100% 100%;
    margin-top: 12px;
    margin-right: 43px;
}
.nav ul .link a{
    display: block;
    height:61px ;
    line-height: 61px;
    font-size: 16px;
    color: white;
    margin-left: 46px;
}
.nav ul .link a:hover{
    color: chartreuse;
}
.nav ul .serach{
    width: 289px;
    width: 61px;
    overflow: hidden;
    margin-left:69px;
    text-align: center;
    color: white;


}
.nav ul .search div{
    float: left;
    height: 20px;
    width:200px;
    border: 1px solid  #e7e7ec;
    margin-left: 96px;
    border-radius: 15px;
    margin-top: 19px;
    text-align: center;
    font-size: 14px;
}
.nav ul .search div input{
    height: 20px;
    /* text-align: center; */
    text-align: left;
}
.nav ul .create a{
    width: 39px;
    height:61px ;
    line-height: 61px;
    font-size: 9px;
    color: white;
    margin-left: 70px;
    text-align: center;
}
/* 顶部导航栏结束 */
.picture-liu{
    height:600px;
    background-image: url(../images/begin_top07.jpg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

2.3效果的一个展示：