前端學習之路——盒子模型練習

阿新 • • 發佈：2019-02-07

html：

<!doctype html>
<html>

     <head>

         <meta charset="UTF-8">
         <title></title>
         <link href="盒子模型練習.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="top">
        <div class="topcenter" 
>
            <h1>topcenter</h1>
        </div>
    </div>

    <div class="middle">
        <div class="middle1">
            <br/><h2>middle1</h2>
        </div>
        <br/>
        <div class="middle2">
            <br/><h2 
>middle2</h2>
        </div>
     </div>

    <div class="bottom"></div>

css：

.top{
    background-color:steelblue;
    width:100%;
    height:70px;
    text-align: left;
}

.topcenter{
    margin:0px auto;/*左右自適應，上下為0*/
    width:75%;
    height:70px;
    text-align: center 
;
    background-color:cadetblue;
}

.middle{
    width:75%;
    height:700px;
    margin:8px auto;
    background-color: gray;
}
.middle1{
    width:100%;
    height:30%;
    background-color: cadetblue;
    margin: 0px;
    text-align: center;
}

.middle2{
    width:100%;
    height:10%;
    background-color: darkgreen;
    margin: 10px 0px;
    text-align: center;
}
.bottom{
    width:75%;
    height:50px;
    margin:0px auto;
    background-color: darkslategray;
}

前端學習之路——盒子模型練習

html： <!doctype html> <html> <head> <meta charset="UTF-8">

我的web前端學習之路-HTML-form

val jpg web前端 ted cti 之路 radi pass idt 1 <form name="register" method="post" action="servlet等可處理請求的東西"> 2 單行文本框<inpu

我的web前端學習之路-CSS-引入

com imp port 之路 es2017 內嵌學習常用方式多用連接導入方式優先級：內聯>內嵌>@import方式>link方式（常用）我的web前端學習之路-CSS-引入

我的web前端學習之路-CSS-選擇器

選擇產生之路 css 註意 images nbsp 前端 ges 選擇器指定了要作用的標簽直接指定一個準確元素名，對其產生作用指定標簽元素class屬性的值，可選指定特定的標簽元素，不要忘記“點”！（註意！！）class屬性的值可以用空格隔開表示多個cla

我的web前端學習之路-CSS-字體和文本

技術你是 let cor meta round ack san one 1 <head> 2 <meta charset="utf-8"> 3 <title>css字體和文本</title> 4

我的web前端學習之路-CSS-列表和表格

表示 hang idt char rac 一個 ddr web前端 9.png list-style-image和list-style-type只能選擇一個使用 border-collapse和border-spacing不能同時使用 1 <head>

前端學習之路

jquer scrip html 學習 asc javascrip rap 之路 boot html css javascript jquery bootstrap 前端學習之路

前端學習筆記 day03 盒子模型（二）

1. 搜尋趣圖框的製作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> &

前端學習之路----javascript基礎

今天繼續我們的javascript---初級陣列 ### 為什麼要學習陣列之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？ ### 陣列的概念所謂陣列，就是將多個元素（

前端學習之路---DOM操作（WebAPI）

DOM ### DOM的概念文件物件模型（Document Object Model，簡稱DOM），是[W3C](http://baike.baidu.com/item/W3C)組織推薦的處理可擴充套件標誌語言的標準程式設計介面。在網頁上，組織頁面（或文件）的物件被組織在一個樹形結構中，用來表示

前端學習之路---php（表單處理）

表單的使用常見表單元素的使用案例表單的概念在生活中很常見，就像是問卷調查表一樣，別人先把問卷發給你，你照著問卷的要求填寫，完事過後再將填完的問卷發給別人，從而達到一個將別人需要的資訊傳遞給別人的一種方式。傳統的網頁大多數的作用都是展示

【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）

標籤的型別(顯示模式) HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level）每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸

前端學習之路html基礎(01)——常用標籤

HTML：是用來描述網頁的一種語言 HTML 指的是超文字標記語言: HyperText Markup Language HTML 不是一種程式語言，而是一種標記語言標記語言是一套標記標籤 (m

前端學習之路（進階）

1、大前端完整學習路線（詳情）2、前端工程師必備技能圖譜3、從零基礎到前端大牛的學習路線4、零基礎的前端開發初學者應如何系統的學習（天貓前端開發專家）5、git上的前端技能彙總（很全非常棒！）6、2017開發者學習路線圖（看起來有點模糊和混亂。。。）自己的一點想法：理論1：把

前端學習之路---jquery

動畫效果基本效果匹配元素從左上角開始變濃變大或縮小到左上角變淡變小 ①隱藏元素除了可以設定匹配元素的display:none外,可以用以下函式 hide(speed,[callback]) 返回值:jQuery 引數-speed:三種預訂速度之一的字串String(slow,nor

黑馬程式設計師前端學習之路

對於傳智播客,我是通過我同學那裡聽來的,他是學前端的。所以他在聽說我要學這個之後，就像我推薦了黑馬。開始來的第一天主要就是適應了一下學校的學習和生活環境，還經過大家的自我介紹對班上的同學們有了初步的印象。同學們都是來自五湖四海，每個人都是帶著故事揹負著夢

【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）

1.事前準備（1）工具使用的是 Webstrom的最新版和 Fireworks 8 作為切圖的輔助工具。（2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化） normalize.css

【前端】【html5/css3】前端學習之路（三）（CSS3 2D變形/CSS3 3D變形/CSS3瀏覽器字首）

一、2D變形(CSS3) transform transform是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。 1.移動【 translate(x

web前端學習之路-第一天

本人做了幾年的Android開發，最近接手的專案裡面，大多數介面都是載入的網頁，為了能夠更好的接手專案，同時也讓自己能夠多學一些，所以準備自學一些web前端的知識。學前調研因為自己也不算新手了，所以在IDE的選擇上，我還是準備用比較成熟的，這裡我選擇

前端學習之路，分享給剛學或想學前端的網友（持續更新中）

　　經常會在群裡或論壇上看到有人問：“學習前端有什麼捷徑？”，一般都是賣油翁式的回答：“無他唯手熟爾”。那麼該如何讓手熟練呢？其實也就是該如何系統的學習前端。在本文中，我會結合自身的經歷，分享一下自己學習前端的過程，期間會穿插引用我過去各個階段所寫的博文。一

前端學習之路——盒子模型練習

相關推薦