学习web前端之练习一

最新推荐文章于 2024-02-09 16:46:41 发布

ChinaTrojangirl

最新推荐文章于 2024-02-09 16:46:41 发布

阅读量2k

点赞数 2

分类专栏：新手篇文章标签： web前端 css

本文链接：https://blog.csdn.net/qq_30777943/article/details/52355702

版权

新手篇专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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)标签的命名，源网站的命名是比较有层次的，需要学习。

ChinaTrojangirl

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
学习web前端之练习一

web前端练习-模仿DJI首页（新手第一篇）（图片和文本水平垂直居中、标签之间的距离控制、标签大小的设置）自学web前端技术也有几个月了，学到jQuery，忽然学不下去了，想动手看看自己的水平。老公推荐我去模仿大疆的首页，果然，这种高科技公司的首页还是很炫酷的，今天就把我的学习心得写下来，就当自己的学习笔记，也可以与各位同行交流学习。今天写了导航栏，只写了CSS。还有很多不够精简的地方和不足，望指
复制链接

扫一扫