学习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前端之练习二

web前端练习-模仿DJI首页(新手二篇)进度有点慢,从昨天到今天就完成了导航条的动态效果,而且其中复杂的菜单效果也没有实现。以我现有的有限的jQuery知识,十分简陋的完成了特效部分。对这部分还是不...

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

Web前端案例_多选练习案例 关于多选框的checked属性以及span标签的innerhtml属性的练习。 1.案例分析 利用多选框的checked属性以及span标签的innerHTML属性实现此...

【Web前端】慕课网—JavaScript进阶篇8-17编程练习

前言本人也是刚学,在这里知识给完全没有头绪的同学一些思路,写的不好请多多指教。第一步:编写页面布局之标题: 可以看到练习里面是一个黑色粗体的“操作成功”,所以这里用标签,很简单,完成第一步。操作成功...

【JS每日练习】阿里巴巴web前端开发面试题

今天在浏览一个网站的时候,找到了阿里巴巴的Web前端面试题,然后自己做了下,跟大家分享一下 第一部分:用CSS实现布局 让我们一起来做一个页面 首先,我们需要一个布局。 请...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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