学习web前端之练习一

原创 2016年08月29日 19:00:09

web前端练习-模仿DJI首页(新手第一篇)

(图片和文本水平垂直居中 、标签之间的距离控制、标签大小的设置)

自学web前端技术也有几个月了,学到jQuery,忽然学不下去了,想动手看看自己的水平。老公推荐我去模仿大疆的首页,果然,这种高科技公司的首页还是很炫酷的,今天就把我的学习心得写下来,就当自己的学习笔记,也可以与各位同行交流学习。今天写了导航栏,只写了CSS。还有很多不够精简的地方和不足,望指正。

  • 导航栏图片
  • HTML代码
  • CSS代码

(1)效果图片

导航栏

(2)HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../STYLE/common.css" rel="stylesheet">
    <script src="../JS/jquery-1.11.1.js"></script>
</head>
<body>
        <div id="nav" >
            <div id="nav-content" >
                <div id="nav-logo">
                    <a class="nav-brand">
                        <img src="../images/logo.png" />
                    </a>
                </div>
                <div id="nav-list">
                    <ul class="product-list">
                        <li>PHANTOM</li>
                        <li>"悟"INSPIRE1</li>
                        <li>灵眸 OSMO</li>
                        <li>如影 RONIN</li>
                        <li>行业应用</li>
                        <li>开发者套件</li>
                        <li>社区</li>
                        <li>服务与支持</li>
                    </ul>
                    <div id="nav-search"></div>
                    <ul class="nav-right">
                        <li class="search-box">
                            <a class="search-box-link" href="#">
                                <span class="icon-search"></span>
                            </a>
                        </li>
                        <li class="shopping-center">
                            <a class="shopping-center-link" href="#">
                            <span>商城</span>
                            <span class="icon-shopping"></span>
                            </a>
                        </li>
                        <li class="language-change">
                            <a class="language-change-link" href="#">
                                <span class="icon-language"></span>
                                <span>简体中文</span>
                            </a>
                         </li>
                        <li class="personal">
                            <a class="personal-link">
                               <span class="personal-center"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</body>
</html>

(3)CSS样式

*{
    margin: 0;
    padding: 0;
}

*::before *::after{
    box-sizing: border-box;
}

body{
    overflow-y: scroll;
}

html body{
    color: #979797;
    font-size: 14px;
    text-align: center;
}

#nav::before #nav-content::before #nav-logo::before #nav-list::before #nav::after #nav-content::after #nav-logo::after #nav-list::after{
    content: "";
    display: table;
}

#nav{
    width: 100%;
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    line-height: 60px;
}

#nav #nav-content{
    margin-left: auto;
    margin-right: auto;
    max-width: 1230px;
    height: 60px;
}

#nav #nav-content #nav-logo{
    height: 60px;
    line-height: 60px;
    float: left;
}

#nav #nav-content #nav-logo .nav-brand{
    display: block;
    margin-right: 12px;
    float: left;
    font-size: 18px;
    height: 50px;
    line-height: 20px;
    padding: 15px 0 15px 15px;
}

#nav #nav-content #nav-logo img{
    width: 50px;
    display: block;
}

a img{
    border: medium none;
}

#nav #nav-content #nav-list{
    padding: 0px 15px;
    height: 60px;
}

ul li{
    float: left;
    list-style: none;
}

#nav .product-list li{
    font-size: 12px;
    word-spacing: -1px;
    font-style: inherit;
    font-weight: inherit;
    font-family: inherit;
    padding: 15px 10px;
    line-height: 30px;
}

#nav #nav-content #nav-list a{
    color: #979797;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    height: 30px;
    padding: 15px 25px 15px 10px;
    line-height: 30px;
    text-decoration: none;
}

#nav #nav-content #nav-list .nav-right{
    float: right !important;
}

#nav #nav-content #nav-list .search-box{
    height: 60px;
}

#nav #nav-content #nav-list .search-box .search-box-link{
    display: block;
}

#nav #nav-content #nav-list .search-box .search-box-link .icon-search{
    background: url("../images/search-icon.png");
    background-position: -400px -49px;
    display: inline-block;
    margin-top: 7px;
    width: 16px;
    height: 16px;


}
#nav #nav-content #nav-list .shopping-center{
    background: #44a8f2;
    min-width: 162px ;
    height: 60px;
    display: inline-block;
}

#nav #nav-content #nav-list .shopping-center-link{
    display: block;
    color: #f7f8f9;
    font-size: 12px;
    font-weight: 400;
    height: 30px;
    padding: 15px 10px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
    transition: all 300ms ease 0s;
}
#nav #nav-content #nav-list .shopping-center .icon-shopping{
    background: url("../images/icon-shopping.png");
    background-position: -418px -224px;
    width:20px;
    height: 14px;
    display: inline-block;
    margin-left: 8px;
    position: relative;
    top: 2px;
}

#nav #nav-content #nav-list .language-change{
    min-width: 110px;
    position: relative;
}

#nav #nav-content #nav-list .language-change-link{
    align-items: center;
    display: flex;
    justify-content: space-around;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
}

#nav #nav-content #nav-list .language-change .icon-language{
    background: url("../images/icon-language.png") no-repeat scroll left top / 15px 15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

#nav #nav-content #nav-list .personal{
    position: relative;
    min-width: 45px;
}

#nav #nav-content #nav-list .personal-link{
    padding: 15px 0;
    display: block;
    line-height: 30px;
}

#nav #nav-content #nav-list .personal-center{
    background:url("../images/icon-person.png");
    background-position: -399px -190px;
    display: inline-block;
    margin-top: 5px;
    width: 19px;
    height: 19px;
}

get技能

(1)图标放在span标签里,设置为背景图片,要设置宽和高,还有要显示的位置。这里span的display属性为block,否则span的宽为0

(2)a标签要设置大小,display属性为block。

(3)float:right !important

(4)标签的命名,源网站的命名是比较有层次的,需要学习。

web前端学习资源分享

开源精神贵在分享。现在将接触前端开始到现在看过很多的博客、开源项目、文章,项目或者其它资源作一整理里分享。有些资源“本人”未必看完,看懂,看细。但觉得共享出来可以大家互相交流学习,以期起到引导,指路或...
  • u013943522
  • u013943522
  • 2018年01月01日 18:11
  • 588

Web前端案例_多选练习案例

Web前端案例_多选练习案例 关于多选框的checked属性以及span标签的innerhtml属性的练习。 1.案例分析 利用多选框的checked属性以及span标签的innerHTML属性实现此...
  • Ag_nevergiveup
  • Ag_nevergiveup
  • 2017年07月04日 16:40
  • 314

Web前端开发学习1:静态网页

一静态网页概述        在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为“静态网页”,静态网页是 标准的HTML文件,它的文件扩展名是.htm、.html,可以包含...
  • erlian1992
  • erlian1992
  • 2015年10月21日 12:20
  • 3845

web前端 | 一条“不归路” - 学习路线

本文属于职业解惑系列,读完此文要么生,要么死。要么充满斗志,要么颓废放弃。没错,此文的观点可以让你极端,但极端的选择,完全取决于你个人!付出就有回报,做好现在,技术只是为了改变生活!—— 小北哥哥好的...
  • xllily_11
  • xllily_11
  • 2016年08月15日 10:39
  • 25388

WEB前端学习之路

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整。新手学习前端的话,一定要想想为什么要...
  • m838115837
  • m838115837
  • 2015年09月02日 19:26
  • 1314

web前端初步学习的自我总结

谈到网页制作,作为一个大二的软件工程专业的学生,不得不惭愧得说一句自己是个菜鸟,不是一般的菜。前阵子完成一个15个html文件的网页都弄了好几天,折腾在HTML,CSS,Javascript三者之间。...
  • fwj958683305
  • fwj958683305
  • 2015年11月16日 20:17
  • 1168

web前端入坑第二篇:web前端到底怎么学?干货资料!

hi,大家好! 我的第一篇文章:【web前端到底是什么?有前途吗?】,在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。 也为我近期新开的 个人前端公众号:前端你别闹(web...
  • xllily_11
  • xllily_11
  • 2016年08月08日 12:02
  • 20650

web前端开发学习经验总结

开博第一篇文章。谨以此文祭奠大学逝去的时光。 web开发大概分为前台和后端,前台又可以分为美工,交互设计,js编程。后端了解不多,前端的话,可以按如下思路系统学习: 基础知识: ...
  • a2261504394
  • a2261504394
  • 2014年11月07日 16:39
  • 1269

经验分享:如何系统学习 Web 前端技术?

这篇文章主要是面向小白用户的,如果你有些基础,当然也建议你看看,尤其是最后一个主题,或许你能得到一些启发。本文的观点,纯属个人自以为是的想法,不是真理,仅供参考。 抛开具体技术细节,先主要谈谈程序员...
  • CSDNedu
  • CSDNedu
  • 2017年10月30日 16:33
  • 51885

学习web前端之练习三

web前端练习-模仿DJI首页(终极篇)今天终于把DJI的首页粗糙的模仿下来了,这近一周的时间以来,在模仿过程中学习到了不少东西。果然只有在练习的时候才能查漏,虽然没有完全模仿,但是对自己来说,确实学...
  • qq_30777943
  • qq_30777943
  • 2016年09月05日 14:23
  • 663
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习web前端之练习一
举报原因:
原因补充:

(最多只允许输入30个字)