學習web前端之練習一

阿新 • • 發佈：2019-01-15

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首頁（新手第一篇）（圖片和文字水平垂直居中、標籤之間的距離控制、標籤大小的設定）自學web前端技術也有幾個月了，學到jQuery，忽然學不下去了，想動手看看自己的水平。老公推薦我去模仿大疆的首頁，果然，這種高科技公司的首頁

學習web前端之練習三

web前端練習-模仿DJI首頁（終極篇）今天終於把DJI的首頁粗糙的模仿下來了，這近一週的時間以來，在模仿過程中學習到了不少東西。果然只有在練習的時候才能查漏，雖然沒有完全模仿，但是對自己來說，確實學習到不少的知識。效果展示 HTML程式碼 css程式

從零開始，學習web前端之HTML基礎

我在大學的專業是計算機網路技術，大學期間有這樣一門課是“網頁設計與製作”，當時對這門課挺感興趣，就學習了下。通過簡單的html、css和js能展現出自己想要的東西，感覺挺有意思的。雖然陰差陽錯之下成為了一名Android開發工程師，但是前端方面的知識也一直在

從零開始，學習web前端之HTML5

什麼是HTML5 HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。是下一代 HTML 標準。為什麼要學習HTML5 HTML5定義了一系列新元素，如新語義標籤、智慧表單、多媒體標籤等，可以幫助開發者

從零開始，學習web前端之js基礎

js來源 Javascript作為web標準中的行為標準，最初起名叫LiveScript，它是Netscape開發出來一種指令碼語言，其目的是為了擴充套件基本的Html的功能，驗證web頁表單資訊，為web頁增加動態效果。為了趕上java的熱潮，Netscap

機器學習web服務化實戰：一次吐血的服務化之路

機器學習web服務化實戰：一次吐血的服務化之路背景在公司內部，我負責幫助研究院的小夥伴搭建機器學習web服務，研究院的小夥伴提供一個機器學習本地介面，我負責提供一個對外服務的HTTP介面。說起人工智慧和機器學習，python是最擅長的，其以開發速度快，第三方庫多而

web前端之Ajax遍歷json後對每一條資料進行相應的修改和刪除

web前端之ajax遍歷json後對每一條資料進行相應的修改和刪除 function serviceUser(){ $('.ergodicPersonList').remove(); $.ajax({ url: "/b

Web前端之基礎知識

border str adding -a ng- lec 時間索引 apt 學習web前端開發基礎技術須要掌握：HTML、CSS、Javascript 1.HTML是網頁內容的載體內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，能夠包括文字、圖片、

獨家分享——大牛教你如何學習Web前端開發

標記語言集成選擇常用學習建議 enter 響應式布局建設集成開發環境引語自從2008年接觸網站開發以來到現在已經有六個年頭了，今天偶然整理電腦資料看到當時為參加系裏面一個比賽而做的第一個網站時，勾起了在這網站開發道路上的一串串回憶，成功與喜悅、煩惱與

python之路-----前端之js(一)

模仿 rip 條件整合 1-1 花括號 nvi image 討論　　一.JS發展歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase.(客戶端執行的語言) Netsc

python學習_day50_前端之CSS渲染

mage images 網頁 image ima 位置 python 格式 css引入方式　　CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對

《我在51oct學院學習web前端微職位》

靈活什麽事如果前端開發項目資料動態獲取 b前端開發字符大家好，很高興能分享我學習web前端開發的一些心得。廢話不多說，直接進入主題。前端，一個新型的職業技能，我不敢說自己有多精通，入門算是入門了，需要學習的還有很多。從你開始學html時，一定要堅持下來，別半

web前端之css

css web一、介紹CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。二、語法每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束三、CSS的幾種引入方式

web前端之html

html一、web服務的本質import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = co

web前端之JavaScript

js 數據類型一、JavaScript介紹1、一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：（1）核心（ECMAScript）（2）文檔對象模型（DOM） Document object model (整合js，css，html)（3）瀏覽器對象模型（BOM） Broswer obj

web前端之jQuery補充

jQuery html一、文檔操作1、文檔操作示例<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co

Web前端之Javascript詳解20180330

win .proto 腳本產品使用 pro undefine 處理方式 subst 一、javascript概述 javascript是基於對象和事件的腳本語言。特點： 1.安全性(不允許直接訪問本地硬盤(因為是被遠程的瀏覽器解釋))，它可以做的就是信息的動態交互 2

學習web前端的三大技能

前端前端工程師前端學習前端框架前端開發第一階段：HTML網頁開發簡介：今天在這裏，一直在堅持給大家更新文章，如果對你有所幫助，可以多多轉發和關註，初學者有什麽不懂的或者是需要學習資料的可以加我的web前端學習交流群：606加721加798 通過學習HTML基本知識點，結合案例

他曾經學完Web前端，給大家留下寶貴的學習web前端經驗

找到其他人貴的直播課程他也 ML 不清楚 html 曾經前幾天接觸了一個叫小易的大專生，學機電一體化，我們都知道，現在大學都是在混日子，打遊戲度日，大專更是如此，一個人很容易被環境影響，他的寢室也都是打了三年遊戲過來的同學，他也是其中一個。畢業後，做了三個月的銷售

web前端之es6物件的擴充套件

1.屬性的簡潔表示法 2.屬性名錶達式表示式作為物件的屬性名 3.方法的 name 屬性例如：函式的name 屬性，返回函式名。 4.Object.is() ES 比較兩個值是否相等，只有兩個運算子，相等運算子，相等運算子(==) 和嚴格相等運算子（

學習web前端之練習一

web前端練習-模仿DJI首頁（新手第一篇）

（圖片和文字水平垂直居中 、標籤之間的距離控制、標籤大小的設定）

(1)效果圖片

(2)HTML程式碼

(3)CSS樣式

get技能

(1)圖示放在span標籤裡，設定為背景圖片，要設定寬和高，還有要顯示的位置。這裡span的display屬性為block，否則span的寬為0

(2)a標籤要設定大小，display屬性為block。

(3)float:right !important

(4)標籤的命名，源網站的命名是比較有層次的，需要學習。

相關推薦

（圖片和文字水平垂直居中、標籤之間的距離控制、標籤大小的設定）