2. 程式人生 > >百度前端學院學習DAY1

百度前端學院學習DAY1

阿新 • • 發佈：2018-12-12

9、10：做一個網站

目標

     將一個設計稿轉化為網頁，通過這個過程學習各種css知識。

閱讀

按照設計師提供的設計稿，實現HTML頁面，需要將設計稿切分成為最終在頁面中呈現的一個個圖片，我們一般稱之為“切圖”，在不同公司，切圖的工作可能是不同職位做，可能是設計師、可能是重構工程師、可能是前端工程師。但不管怎樣，這是我們需要掌握的一個基本功能，正常來說，小半天我們就能基本掌握這項技能了。

編碼

使用VS Code等開發工具，按照如下設計圖，進行頁面的實現

要求：

  • 程式碼風格符合某種編碼規範
  • 儘可能按照設計稿的尺寸進行實現
  • 設計稿中的圖片或文字素材在實現時可以不一致
  • 充分應用上之前學習到的各種佈局方式，儘可能幾種方式都運用嘗試一次，比較各種佈局的適用場景
  • 設計稿中下方導師介紹圖片，左上角灰色底表示，滑鼠hover到圖片上時的效果變化。
  • 不需要考慮相容IE瀏覽器

再次閱讀

將之前的材料以及自己搜尋到的材料進行多次閱讀，並重點閱讀W3C規範

重構你的程式碼

根據上面的閱讀學習，重構你的程式碼，優化程式碼結構及細節

相關推薦

百度前端學院學習DAY1

9、10：做一個網站 目標      將一個設計稿轉化為網頁，通過這個過程學習各種css知識。 閱讀 按照設計師提供的設計稿，實現HTML頁面，需要將設計稿切分成為最終在頁面中呈現的一個個圖片，我們一般稱之為“切圖”，在不同公司，切圖的工作可能是不同職位做，可能是

百度前端學院學習Day2

前言       昨天，瞭解了Web開發的基本原理，使用html製作了簡易的簡歷，以及編寫css為文字和字型新增屬性。 4.背景、邊框、列表、連結和選擇器 目標       掌握CSS稍複雜的選擇器，還有背景、邊框等樣式屬性。 閱讀 編碼 #head

百度前端學院學習Day3

前言      之前初步瞭解了盒模式的概念，現在來學習如何佈局。 7、8：學習佈局 目標      學習佈局的各種方式 閱讀 編碼 分別嘗試使用Float、Position或者Flexbox來實現如下需求： 實現一個兩欄佈局，左側佔30%寬度，右側佔7

百度前端學院學習DAY05 and DAY06--三種簡歷

百度前端學院學習DAY05 and DAY06 第五天和第六天 三種簡歷 課程目標 通過閱讀及一個小型練習，掌握 CSS 盒模型及通過Float進行簡單的佈局 課程描述 閱讀 今天我們要學習非常重要的一些知識，這些知識會伴隨著你的前端

百度前端學院-基礎學院-第七天到第八天

相同 自己的 http 視口 you css align 其他 知識點 第五天到第六天的內容沒有記筆記，不好不好。 第七天到第八天的學習目標是：學習布局的各種方式。主要包含position相關和Flexbox相關。 知識點： 1、默認情況下，塊級元素的內容寬度是其父元素的寬

百度前端學院-基礎學院-第吳課/第六課

bubuko doc 長度 borde href developer mar 例如 特殊 今天是一個跨天的任務，學習目標是：掌握CSS盒模型及Float； 盒模型要點： 如果盒子的高度被設置為百分比長度，那麽盒子高度不會遵循這個設置了的百分比長度，而是總會采用盒子內容的高

百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（1）

編碼 我們現在來做一個最簡單的時鐘，通過小練習來學習 Date，複習定時，然後再練習一下函式的封裝具體需求如下： 在頁面中顯示當前日期及時間，按秒更新 格式為 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss 注意位數的補齊，比如：-- 假設時間為2008年10月10日星期一的1

前端自學旅程（關於百度前端學院的）

Wandering Saint 一個畢業於不入流的二本大學的學生的前端旅程： 名字：Wandering Saint 專業：天馬行空 愛好：音樂 美術 讀書 最喜歡的歌手：許巍 擅長的樂器：吉他 未來的職業規劃：做一個天馬行空的前端程式猿 人生信仰：還沒出現

百度前端學院第17到18天和第16天的作業

終於學JavaScript了！ 陣列的相關引數 陣列shift刪除第一個元素，pop刪除最後一個元素，返回的都是刪除的元素,unshift在開頭增加一個元素，push在結尾增加元素，splice用於刪除和修改，slice用於切片. *** 資料型別轉換 一元的 + 運算子可用於把變數轉換為數字：如果無法轉換變

IFE百度前端技術學院4/24/2018

結果 sheet terms 自然 spa 外部 for link 等價 day1: day2: 好的簡歷： 你可以參考自己的簡歷內容，也可以參考網上一些熱門簡歷內容，比如 羨轍 的簡歷（她簡歷的樣式每年校招簡歷總能看見很多人在復用，所以，希望大家以後做簡歷的時候換個樣式吧

百度前端學習日記07——布局（三）Flexbox

enter end develop docs -i ali -s 阻止 div 前言 更多參考MDN flex布局 正文 1.Flexbox模型 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為

百度前端學習日記10——javaScript基本語法

lean his lse highlight ... bject cti arr boolean 1.變量 a.變量類型 Number 數字 String 字符串 Boolean 布爾型true和false Array 數組 Object 對象 b.變量聲明 var n;

百度前端學習日記20——定時器

out val interval fun tint 日記 tin clear 對象 setTimeout("function",time) 設置一個超時對象 setInterval("function",time) 設置一個超時對象 SetInterval為自動重復，set

百度前端技術學院--CSS佈局例項

CSS背景圖片佈局 <!doctype html><html><body>...Your content goes here...</body></html>　　給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。　　其實，

百度前端技術學院：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴

var year=document.getElementById("year-select"); var month=document.getElementById("month-select"); var day=document.g

百度前端技術學院：第三十一到第三十三天：我是精明的小賣家（一）

var regionGroup = document.getElementById("region-radio-wrapper"); var productGroup = document.getElementById("product-radio-wrapper");

百度前端技術學院（二）給自己做一個線上簡歷吧

一、製作線上簡歷 二、小問題 HTML是什麼，HTML5是什麼？ HTML(Htper Text Markup Language)超文字標記語言，不是程式語言，而是一種標記語言，標記語言是一套標記標籤，HTML使用標記標籤來描述網頁。 HTML5是最新的HTML標

基於vue2.0實現仿百度前端分頁效果（二）

前言 上篇文章中，已經使用vue實現前端分頁效果，這篇文章我們單獨將分頁抽離出來實現一個分頁元件 先看實現效果圖 程式碼實現 按照慣例，我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging

【轉載】演講實錄：百度大規模深度學習應用實踐和開源AI框架PaddlePaddle

導語：本文根據PaddlePaddle技術負責人、百度NLP技術委員會主席於佃海在今年英特爾人工智慧大會上的演講——《百度大規模深度學習應用實踐和開源AI框架PaddlePaddle》整理而成。 PaddlePaddle技術負責人、百度NLP技術委員會主席於佃海 正文： 很高興能

前端讀者 | 百度前端編碼規範（JS）

本文來自：百度FEX 1 前言 JavaScript在百度一直有著廣泛的應用，特別是在瀏覽器端的行為管理。本文件的目標是使JavaScript程式碼風格保持一致，容易被理解和被維護。 雖然本文件是針對JavaScript設計的，但是在使用各種JavaScript的預編譯語言時(如TypeScript等)時