精华内容
下载资源
问答
  • 前端项目实战

    2018-02-10 14:21:10
    主要模仿的是一个做衣服的前端首页和购买,有图片轮播效果,有放大镜效果,还有字体位移效果!
  • 前端项目实战美团网

    2018-03-18 17:22:39
    2017前端项目实战美团网 2017前端项目实战美团网 2017前端项目实战美团网
  • 拉钩网前端项目实战 文章目录拉钩网前端项目实战拉钩网前端项目实战03一、search部分设计1.html部分2.css部分二、banner部分设计1.html部分2.css部分设计结果图 拉钩网前端项目实战03 search和banner部分设计 一...

    拉钩网前端项目实战


    拉钩网前端项目实战03

    search和banner部分设计
    

    一、search部分设计

    1.html部分

      <div class="search">
                <div class="searCon main">
                    <div class="sear">
                        <input type="text" placeholder="搜索公司,搜索职位或地点" class="searchInp fl">
                        <a href="" class="btn fl">搜索</a>
                    </div>
                    <ul class="searList clearFixed">
                        <li><a href="">热门搜索:</a></li>
                        <li><a href="">24小时极速入职</a></li>
                        <li><a href="">名企校招早班车</a></li>
                        <li><a href="">Java面试</a></li>
                        <li><a href="">架构设计</a></li>
                        <li><a href="">数据分析</a></li>
                        <li><a href="">PHP</a></li>
                        <li><a href="">C++</a></li>
                    </ul>
    
                </div>
            </div>
    

    2.css部分

    .search {
      height: 132px;
      background: #f2f5f4;
      .searCon {
        height: 102px;
        padding-top: 30px;
        .sear {
          width: 937px;
          height: 47px;
          margin-left: 133px;
          .searchInp {
            width: 794px;
            height: 45px;
            border: 1px solid #e8e8e8;
          }
          .btn {
            width: 141px;
            height: 47px;
            line-height: 47px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            background: #00b38a;
          }
        }
        .searList {
          margin-left: 133px;
          font-size: 12px;
          height: 38px;
          line-height: 38px;
          li {
            float: left;
            a {
              color: #00c1cc;
              padding: 0 11px;
            }
          }
          :first-child {
            a {
              color: #778ab9;
              padding: 0;
            }
          }
        }
      }
    }
    

    二、banner部分设计

    1.html部分

    <div class="banner">
                <div class="banCon main clearFixed">
                    <div class="banLeft fl">
                        <ul class="banList">
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            <li>
                                <a href="">技术</a>
                                <a href="">Java</a>
                                <a href="">PHP</a>
                                <a href="">区块链</a>
                                <span class="fr">&gt;</span>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="banRight fr">
                        <div class="banImgBox">
                            <img src="img/banner.JPG" alt="" class="banImg">
                        </div>
                        <span class="btnLeft">&lt;</span>
                        <span class="btnRight">&gt;</span>
                    </div>
                </div>
            </div>
    

    2.css部分

    .banner {
      .banCon {
        padding-top: 46px;
        .banLeft {
          width: 300px;
          .banList {
            font-size: 12px;
            li {
              margin-bottom: 33px;
              a {
                padding: 0 13px;
                color: #555555;
                :first-child {
                  font-size: 17px;
                  padding: 0;
                }
              }
              span {
                font-family: '宋体';
                margin-top: 5px;
                color: #555555;
              }
            }
          }
        }
        .banRight {
          position: relative;
          width: 840px;
          height: 347px;
          .banImgBox {
            width: 840px;
            height: 347px;
            .banImg{
              width: 100%;
              height: 100%;
            }
          }
    
          span{
            position: absolute;
            top:50%;
            margin-top: -17px;
            width: 22px;
            height: 34px;
            font-size: 34px;
            color: #000;
            font-family: '宋体';
            font-weight: blod;
          }
          .btnRight{
            right: 20px;
          }
          .btnLeft{
            left: 20px;
          }
        
          
        }
      }
    }
    

    设计结果图

    在这里插入图片描述

    展开全文
  • 拉钩网前端项目实战01 整体布局分析以及头部布局设计 网站整体布局分析

    拉钩网前端项目实战

    提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
    例如:第一章 Python 机器学习入门之pandas的使用


    提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档


    拉钩网前端项目实战02

    头部header设计
    

    一、header上部分设计

    1.html部分

    <div class="h_top">
    				<div class="topCon mian clearFixed">
    					<div class="conLeft fl">
    						<div class="leftTxt1 fl">
    							<a href="" class="logo">拉钩</a>
    							<a href="" class="city">全国站</a>
    							<a href="" class="city1">[切换城市]</a>
    						</div>
    						<ul class="ulList clearFixed fl">
    							<li><a href="#">首页</a></li>
    							<li><a href="#">公司</a></li>
    							<li><a href="#">校园</a></li>
    							<li><a href="#">言职</a></li>
    							<li><a href="#">课程</a></li>
    						</ul>
    					</div>
    					<div class="conRight fr">
    						<ul class="ulList clearFixed">
    							<li><a href="" class="login btn"><span></span>登录</a></li>
    							<li><a href="" class="login2"><span>|</span>注册</a></li>
    							<li><a href="" class="btn app"><span></span>拉钩APP</a></li>
    							<li><a href="demo.html" target="_blank">进入企业版</a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    

    2.css部分

      .h_top {
        height: 40px;
        background: #32373e;
        .topCon {
          height: 40px;
          // background:pink;
          .conLeft {
            height: 40px;
            // width: 400px;
            // background:blueviolet;
            .leftTxt1 {
              height: 40px;
              .logo {
                font-size: 22px;
                color: #00b38a;
                margin-right: 32px;
              }
              .city {
                font-size: 12px;
                color: #00b38a;
                margin-right: 14px;
              }
              .city1 {
                font-size: 12px;
                color: #afb5c0;
                margin-right: 36px;
              }
            }
            .ulList {
              line-height: 40px;
              font-size: 12px;
              li {
                float: left;
                width: 70px;
                text-align: center;
                a {
                  display: block;
                  color: #a3b5a7;
                }
                :first-child {
                  background: #24282c;
                  a {
                    color: #fff;
                  }
                }
              }
            }
          }
          .conRight {
            height: 40px;
            // width: 400px;
            // background: chocolate;
            .ulList {
              line-height: 40px;
              font-size: 12px;
              li {
                float: left;
                a {
                  display: block;
                  color: #93b5c0;
                }
                .login {
                  span {
                    background-position: -9px -32px;
                    margin-right: 10px;
                  }
                }
                .btn {
                  span {
                    float: left;
                    width: 18px;
                    height: 18px;
                    background-size: 60px 106px;
                    background-image: url('img/sprite.png');
                    background-repeat: no-repeat;
                    margin-top: 10px;
                  }
                }
                .login2 {
                  margin-right: 40px;
                  span {
                    padding: 0 12px;
                  }
                }
                .app {
                  span {
                    background-position: -33px -32px;
                  }
                }
                :last-child {
                  margin-right: 8px;
                  a {
                    color: #93b5c0;
                  }
                }
              }
            }
          }
        }
      }
    

    二、header下部分设计

    1.html部分

     <div class="h_bottom">
                    <div class="botCon main">
                        <div class="conLeft fl">
                            <div class="imgBox">
                                <img src="img/footer_lagou.png" alt="" >
                            </div>
                            <div class="txtBox">7555585家公司|67676767个职位在拉钩等你</div>
                        </div>
                        <div class="conRight fr">
                            <div class="btnBox">
                                <input type="text" placeholder="输入手机号" class="fl txt1"/>
                                <p class="fl pBtn">
                                    <input type="text" placeholder="验证码" class="txt2"/>
                                    |
                                    <a href="" class="aTxt2">获取</a>
                                </p>
                                <input type="submit" value="登录/注册" class="fl btnSub">
                            </div>
                        </div>
                    </div>
                </div>
    

    2.css部分:

     .h_bottom {
        height: 120px;
        background: #00b38a;
        .botCon {
          height: 120px;
          //   background: rosybrown;
          .conLeft {
            position: relative;
            width: 566px;
            height: 120px;
            background: url('img/logo.png') no-repeat;
            background-size: 226px 100%;
            .imgBox {
              position: absolute;
              top: 32px;
              left: 232px;
            }
    
            .txtBox {
              position: absolute;
              top: 76px;
              left: 232px;
              font-size: 12px;
              color: #fff;
            }
          }
          .conRight {
            width: 454px;
            height: 120px;
            position: relative;
            .btnBox {
              position: absolute;
              top: 50%;
              width: 100%;
              margin-top: -18px;
              height: 36px;
              color: #757575;
              font-size: 12px;
            //   background: chartreuse;
              .txt1 {
                width: 163px;
                height: 36px;
                margin-right: 25px;
                text-indent: 10px;
              }
              .pBtn{
                width: 148px;
                height: 36px;
                margin-right: 12px;
                background: #fff;
                .txt2{
                    width: 94px;
                    height: 36px;
                    text-indent: 10px;
                  }
                  aTxt2{
                    padding: 6px 4px 9px;
                    color: #00b38a;
                  }
              }
            
              .btnSub{
                  width: 106px;
                  height: 36px;
                  border:1px solid #ccefe7;
                  background:transparent;
                  color: #ccefe7;
              }
            }
          }
        }
      }
    

    3.清除默认样式

    // img标签下方会有3-5像素的边距
    img {
      display: block;
    }
    input {
      border: none;
    }
    

    产生原因:
    img属于行内块元素,div中的img的vertical-align默认是baseline,baseline距离div的下边界有3-5像素
    解决办法
    (1)将img标签设为块级元素

    img {
    	    display: block;
    	 }
    

    (2)为img设置浮动

      img {
          float: left;
       }
    

    (3)设置图片的垂直对齐方式

    img {
          vertical-align: top/text-top/middle/bottom/text-bottom
       }
    

    (4)改变父元素的宽和高属性
    如果父对象的宽、高固定,图片大小随父对象而定,那么可以添加以下的一个属性来去掉图片下面的空间像素:

      div {
          width: 100px;
          height: 300px;
          overflow: hidden;
       }
    

    (5)为父元素设置font-size: 0

     div {
        font-size: 0;
     }
    

    (6)为父元素设置line-height: 0

    	 div {
      line-height: 0;
     }
    

    结果成图

    在这里插入图片描述

    展开全文
  • 拉钩网前端项目实战 拉钩网前端项目实战05 footer部分设计 一、footer部分设计 1.html部分 <div class="footer"> <div class="fooTop main"> <div class="appBox fl"> <p class="btnApp"&...

    拉钩网前端项目实战

    拉钩网前端项目实战05

    footer部分设计
    

    一、footer部分设计

    1.html部分

     <div class="footer">
                <div class="fooTop main">
                    <div class="appBox fl">
                        <p class="btnApp"><span></span>下载拉钩APP</p>
                        <p class="btnApp"><span></span>微信小程序</p>
                        <p class="btnTxt">
                            <img src="img2/icon-wechat.png" alt="">拉钩微信
                            <img src="img2/icon-sina1.png" alt="">拉钩微博
                        </p>
                    </div>
                    <dl class="fl">
                        <dt>企业服务</dt>
                        <dd>招聘抢人宝典</dd>
                        <dd>公司搜索</dd>
                        <dd>拉钩APP </dd>
                    </dl>
                    <dl class="fl dlCen">
                        <dt>企业服务</dt>
                        <dd>招聘抢人宝典</dd>
                        <dd>公司搜索</dd>
                        <dd>拉钩APP </dd>
                    </dl>
                    <dl class="fl">
                        <dt>企业服务</dt>
                        <dd>招聘抢人宝典</dd>
                        <dd>公司搜索</dd>
                        <dd>拉钩APP </dd>
                    </dl>
                </div>
                <div class="fooBottom">
                    <div class="bottCon main">
                        <p class="txtP1 fl">&copy;2018 拉勾网 京ICP备12312343</p>
                        <p class="txtP2 fl"><span class="fl"></span>京公安网备 110108099987658776号</p>
                        <div class="txtBox fl">
                            <span class="fl"></span>
                            <p class="fl">
                                违法和不良信息举报<br>
                                电话:4007878<br>
                                邮箱:cc@lagou.com
                            </p>
                        </div>
                        <div class="fr imgBox"><img src="img/footer_lagou.png" alt="" /></div>
                    </div>
                </div>
            </div>
    

    2.css部分

    .footer{
      border-top: 1px solid #ebebeb;
      margin-top: 70px;
      .fooTop{
        height: 236px;
        padding-top: 50px;
        .appBox{
          margin-right: 130px;
          width: 314px;
          height: 170px;
          border-right: 1px solid #e8e8e8;
          .btnApp{
            width: 180px;
            height: 44px;
            border: 1px solid #00b38a;
            line-height: 44px;
            margin-bottom: 17px;
            span{
              float: left;
              width: 15px;
              height: 15px;
              background: url('img/sprite2.png') no-repeat;
              margin-left: 38px;
              margin-top: 14px;
              margin-right: 8px;
            }
          }
          .btnApp:nth-child(1) {
            span{
              background-position: -148px -220px;
            }
          }
          .btnApp:nth-child(2) {
            span{
              background-position: -215px -54px;
            }
          }
          .btnTxt{
            img{
              display: inline-block;
              margin-right: 5px;
            }
            img:nth-child(2){
              display: inline-block;
              margin-left: 28px;
            }
          }
        }
        .dlCen{
          margin: 0 170px;
        }
        dl{
          dt{
            font-size: 18px;
            color: #555;
            margin-bottom: 26px;
          }
        }
        dl{
          dd{
            font-size: 12px;
            color: #555;
            height: 44px;
            line-height: 44px;
          }
        }
      }
      .fooBottom{
        height: 100px;
        background: #fafafa;
        .bottCon{
          height: 100px;
          font-size: 12px;
          color: #555;
          p{
            margin-top: 50px;
            margin-right: 20px;
          }
          span{
            background: url('img/sprite2.png') no-repeat;
          }
          .txtP2{
            span{
              width: 16px;
              height: 16px;
              background-position: -150px -184px;
            }
          }
          .txtBox{
            width: 186px;
            height: 58px;
            border: 1px solid #555;
            margin-top: 28px;
            span{
              width: 20px;
              height: 24px;
              background-position: -132px -20px;
              margin-top: 18px;
              margin-left: 20px;
            }
            p{
              margin-top: 8px;
              margin-left: 10px;
            }
          }
          .imgBox{
            margin-top: 50px;
          }
        }
      }
    }
    

    二、结果设计图

    在这里插入图片描述

    展开全文
  • 这里写自定义目录标题拉钩网前端项目实战01网站整体布局分析清除默认样式通用样式header头部布局设计 拉钩网前端项目实战01 整体布局分析以及头部布局设计 网站整体布局分析 网站整体可分为五部分:header search ...

    拉钩网前端项目实战01

    整体布局分析以及头部布局设计
    

    网站整体布局分析

    网站整体可分为五部分:header search banner content footer
    在这里插入图片描述

    清除默认样式

    /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    

    通用样式

    // 通用样式
    .main{
        width: 1200px;
        margin: 0 auto;
    }
    
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    
    .clearFixed:after{
        content: '';
        display: block;
        clear: both;
    }
    

    header头部布局设计

    html部分

    <div class="header">
                <div class="h_top">
                    <div class="topCon main clearFixed">
                        <div class="conLeft fl"></div>
                        <div class="conRight fr"></div>
                    </div>
                </div>
                <div class="h_bottom">
                    <div class="botCon main">
                        <div class="conLeft fl"></div>
                        <div class="conRight fr"></div>
                    </div>
                </div>
            </div>
    

    css部分

    .header{
        height: 160px;
        .h_top{
            height: 40px;
            background: #32373e;
            .topCon{
                height: 40px;
                background:pink;
                .conLeft{
                    height: 40px;
                    width: 400px;
                    background:blueviolet
                }
                .conRight{
                    height: 40px;
                    width: 400px;
                    background: chocolate;
                }
            }
        }
        .h_bottom {
            height: 120px;
            background: #00b38a;
            .botCon{
                height: 120px;
                background:rosybrown;
                .conLeft{
                    width:566px;
                    height: 120px;
                    background: brown;
                }
                .conRight{
                    width:454px;
                    height: 120px;
                    background: chartreuse;
                }
            }
          }
        
    }
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 拉钩网前端项目实战 拉钩网前端项目实战06 登录注册部分设计 一、登录注册部分设计 1.html部分 <div class="header"></div> <div class="boxCon"> <div class="logo"></div> <...
  • 自动化部署前端项目实战一">docker自动化部署前端项目实战一 本文适用于个人项目,如博客、静态文档,不涉及后台数据交互,以部署文档为例。 <h2
  • 首页登录页htmlcss
  • 项目总博客见《Vue前端项目实战–网上商城–总结篇(coderwhy老师的商城项目)》https://blog.csdn.net/Jelly_11/article/details/113851138 这篇博客是记录项目中的首页开发过程。 一、顶部导航栏navbar的封装 实现...
  • WEB前端项目实战/酒仙网开发
  • 前端项目实战及原理

    千次阅读 2020-06-14 19:21:55
    使用微前端项目中主要是解决使用iframe引入第三方页面时遇到的框架受限,页面交互不统一等问题,项目中遇到的问题大概如下: iframe 内部路由跳转,不会影响到外部的路由地址,无法记住当前访问的页面地址,...
  • 需求分析(前端页面的设计) 1/3 写代码 1/6 测试 ---性能测试(不考虑业务逻辑,只考虑速度,测试高并发的状态 ),1/2 性能优化: 把Demo所有的没用的文件都删除,压缩。 图片整合技术(拼接):...
  • 实现轮播图效果 var next = document.getElementById("next") var body = document.getElementById("body") var index = 1; //记录当前背景图片是第几张 function nextOne(){ index += 1; if(index >...
  • /* 公共的样式,清除默认样式 */ /*公共样式*/ body{ font-family: "MicrosoftYaHei"; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,table,tr,td{ margin: 0; padding: 0; } ul,ol{ ...}
  • 目录:WebpackWEEXVueReactFabricJSES6COCOS 实战COCOS基础 下载地址:百度网盘
  • 目录 Vue 2.0 一、Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置 二、项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we...
  • 二、项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 webpack拓展 2.5 vue cli拓展 2.6数据 2.7开发模块顺序 三、Vue 3.1路由守卫 一、Vue Cli 在vue项目中,我们要编译vue文件,要编译E...
  • 目录Vue 2.0 一、Vue Cli ...二、项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 webpack拓展 2.5 vue cli拓展 2.6数据 2.7开发模块顺序 三、Vue 3.1路由守卫 一、Vue Cli 在vue项目中,我...
  • 前端项目实战(梅兰商城)

    万次阅读 2016-05-10 20:47:50
    前端项目步骤: 1.拿到美工设计图后,开始浏览页面布局,将页面简单划分出来 开发整站的两种方式: ①从上到下依次把每个盒子写完 ②先把整站的布局给搞定,然后再把每个布局的盒子中的子元素补齐(模块化) 个人...
  • 前端项目实战---技术选型

    千次阅读 2019-05-22 15:47:52
    掌握Vue.js在实战中的运用 学会使用Vue.js完整地开发移动端App 学会组件化、模块化的开发方式 学习内容: Vue.js 框架介绍 Vue-cli脚手架 搭建基本代码框架 vue-router 官方插件管理路由 vue-resource Ajax...
  • 这是全网销量最高的微信小程序开发课程,也是全网最早上线的微信小程序开发课程。小程序最早的一批开发者几乎都是从这门课程走出去的,经过4年迭代,这里,从一个课程,发展成了一个用户活跃度高、用户技术水平高、...
  • 这个是北大青鸟的 java 和 web 前端的一个课程,可以说是从零基础开始讲解的,每一个章节都带有源码及工具,需要的可以下载看一下。 北大青鸟第 1 项目 幸运抽奖.rar 北大青鸟第 2 节课 循环语句.rar 北大青鸟第 2 ...
  • 1、logo里面首先放一个h1标签,目的为了提权,告诉搜索引擎,这个地方很重要。 2、h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可。 3、为了搜索引擎收录我们,我们链接里面要放文字(网站名称)...
  • 一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来说是非常理想的一套学习课程,非常值得推荐...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,713
精华内容 1,885
关键字:

前端项目实战