2. 程式人生 > >0042-簡單的布局-前端學習筆記

0042-簡單的布局-前端學習筆記

阿新 • • 發佈：2018-04-07
oct idt red com 學習筆記 圖片 20px add itl 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>頁面布局</title>
        <style>
        *{margin:0 auto;
            padding:0 auto;}
            .head{height:200px;
                 width:1000px;
                background-color:red;
                margin
 
-bottom: 20px;
                border-width:3x;
                border-color: black;
                border-style:dotted;

            }

            .body{height:520px;
                width:1000px;
                background-color:blue;
                margin-bottom: 20px;
                border-width:3x;
                border
 
-color: black;
                border-style:dotted;

            }
                .left{
                    height:508px;
                    width:248px;
                    border-width:1px;
                    border-color:white;
                    border-style:solid;
                    float:left;
                    margin:5px;
                }
                .center{
                    height:508px;
                    width:473px;
                    border
 
-width:1px;
                    border-color:greenyellow; 
                    border-style:solid;
                    float:left;
                    margin-top: 5px
                }
                    .top{
                    height:225px;
                    width:460px;
                    border-width:1px;
                    border-color:purple; 
                    border-style:solid;
                    float:left;
                    margin:18px 5px;
                    }
                    .bottom{
                    height:225px;
                    width:460px;
                    border-width:1px;
                    border-color:purple; 
                    border-style:solid;
                    float:left;
                    margin:0px 5px;
                    }
                        .left2{
                        height:210px;
                        width:215px;
                        border-width:1px;
                        border-color:red; 
                        border-style:solid;
                        float:left;
                        margin:7px 9px;

                        }
                        .right2{
                        height:210px;
                        width:215px;
                        border-width:1px;
                        border-color:red; 
                        border-style:solid;
                        float:left;
                        margin-top:7px;

                        }
                .right{
                    height:508px;
                    width:248px;
                    border-width:1px;
                    border-color:white;
                    border-style:solid;
                    float:left;
                    margin:5px;
                }


            .footer{height:200px;
                width:1000px;
                background-color:yellow;
                border-width:3x;
                border-color: black;
                border-style:dotted;

            }
        </style>
            




    </head>
    <body>
        <div class="head"> </div>
        <div class="body">
            <div class="left"></div>
            <div class="center">
                <div class="top"></div>
                <div class="bottom">
                    <div class="left2"></div>
                    <div class="right2"></div>
                </div>
            </div> 
            <div class="right"></div>
        </div>
        <div class="footer"> </div>
    </body>
</html>
技術分享圖片 



0042-簡單的布局-前端學習筆記
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
0042-簡單的布局-前端學習筆記

     
 oct   idt   red   com   學習筆記   圖片   20px   add   itl   
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        &l 



  
 

    


    
    
前端學習筆記--CSS布局--定位

     
 筆記   span   tle   -h   ref   utf-8   png   inf   range   1.概述

2.文檔流定位：從上到下，從左到右



 


 
 

代碼：

<!DOCTYPE html>
<html lang="en"&g 



  
 

    


    
    
前端學習筆記--布局和旋轉案例

     
 20px   9.png   otto   asi   筆記   sid   文件   float   head   要實現的案例：

 
1.分析布局
 

 
 2.劃分文件結構：

 
3.編寫css代碼

* {
    padding: 0;
    margin: 0; 



  
 

    


    
    
CSS學習之首頁簡單布局

     
 black   jquery   ack   span   lac   跟著   code   header   contain   作為一個PHPer，在前端方面javascript、jquery這些的日常工作還搞的定。可對於div+css這些東西可就頭疼了，所以現在開始學習CSS
跟著燕十八的教程開始從 



  
 

    


    
    
前端學習筆記2017.6.21-html是個什麽東西

     
 向人   比較   htm   發送   書寫   文檔   輕量   文件名   這就是   html有兩種意思，html語言和html格式
html語言是一種面向人類的計算機語言，這是啥意思？人類用html這種語言描述出一個網頁的樣子，瀏覽器解析這個語言並展示出來。
html格式是一種文件格式，裏面存儲的 



  
 

    


    
    
前端學習筆記2017.6.12 CSS控制DIV

     
 banner   成像   個性化   logs   一個   style   切換   back   成了   前一篇文章中用div布局了豆瓣東西的頁面，如果用html代碼表示的話大概是這個樣子的

<!DOCTYPE html><html><head></head 



  
 

    


    
    
h5簡單布局練習

     
 公司   head   any   class   nbsp   alt   fig   領域   ann   
<body>
<header class="header">
    <h1>XXX公司</h1>
    <nav>
         



  
 

    


    
    
WPF基礎之StackPanel面板進行簡單布局

     
 垂直   stack   像素   ati   --   垂直居中   寬度   進行   alignment   <Border BorderThickness="2" Padding="5" CornerRadius="15">  邊框寬度2 ，內邊距（邊框和內部內容之間的距離）5，圓角15像 



  
 

    


    
    
css簡單布局

     
 title   tle   定義   進行   htm   --   tex   weight   size   一列布局
寬度未定義則寬度為通欄的寬度
<!DOCTYPE html><html>	<head>		<meta charset="utf-8" /> 



  
 

    


    
    
0003-img標簽-前端學習筆記

     
 png   wid   學習   圖片   占用   itl   style   使用   type   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <ti 



  
 

    


    
    
0006-css引入內聯和內部和外聯樣式表-前端學習筆記

     
 col   產業   set   2個   處理   css   tex   直接   ont   
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css樣式& 



  
 

    


    
    
0005-階段練習-前端學習筆記

     
 gpo   周傑倫   span   spa   AR   故事   清醒   htm   utf   
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <t 



  
 

    


    
    
0010-偽類選擇器-前端學習筆記

     
 put   class   hover   元素   HA   偽類選擇器   lec   selection   鼠標滑過   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 



  
 

    


    
    
分布式鎖學習筆記

     
 per   inter   imp   emp   data-   BE   參數   boot   int   分布式鎖，是指在分布式的集群環境中，保證不同節點的線程同步執行。
 
分布式鎖的實現有哪些？
 
1.Memcached分布式鎖
 
利用Memcached的add命令。此命令是原子性操作，只有在 



  
 

    


    
    
分布式系統學習筆記（一）

     
 常見   算法   特征   最大   普通   部分   AR   復制   完美   1.分布式架構的發展歷史
　　1.1 1946 年情人節(2.14) , 世界上第一臺電子數字計算機誕生在美國賓夕法尼亞大學大學，它的名字是：ENIAC;   這臺計算機占地 170 平米、重達 30 噸，每秒可進行 5 



  
 

    


    
    
Python 全棧 前端學習筆記

     
 charset   絕對路徑   cell   aid   nav   alt+   播放視頻   -c   box    

https://www.bilibili.com/video/av15241731
筆記來源:黑馬程序員
HTML(Hyper Text Markup Language):超文本標簽 



  
 

    


    
    
前端學習筆記 1 - 職業入門

     
 圖表   art   網絡   easyui   統計   one   cap   man   mysql   1. Web的發展歷程
Web 1.0 -> 共享
Web 2.0 -> 交互
Web 3.0 -> 聚合
Web 1.0 只讀的互聯網時代
門戶網站為主，大多為靜態頁面（只讀瀏覽 



  
 

    


    
    
48 簡單布局1設計頭部 2 清除默認樣式 3 總體布局的設計

     
 src   bubuko   簡單   .com   頭部   分享圖片   img   技術   bsp    
1

 
2

3

 48 簡單布局1設計頭部 2 清除默認樣式 3 總體布局的設計 



  
 

    


    
    
Web前端學習筆記之安裝和使用PhantomJS

     
   
0x00 安裝PhantomJS（linux環境安裝） 
將PhantomJS下載在/usr/local/src/packet/目錄下（這個看個人喜好） 
作業系統：CentOS 7 64-bit 
  
1.下載地址：http://phantomjs.org/download.ht 



  
 

    


    
    
tomcat深入剖析-一個簡單的Web容器 學習筆記

     
  
 
 第一章   一個簡單的Web容器
 本章主要介紹了web伺服器是如何執行的。Web一般也稱為超文字傳輸協議伺服器，因為伺服器與客戶端(通常是瀏覽器)進行通訊，一般基於java中重要的兩個類 java.net.Socket 和java.net.ServerSocket類，通過傳送h