H5布局實踐一 div橫豎排列

2021-08-10 21:58:12 字數 731 閱讀 2631

領導需要web頁面的開發,這玩意之前弄過,後來遺失了,現在回來再弄,倍感生澀,不過沒事,慢慢來就好了,遇到一些容易混淆的東西,做個記錄。好了,這就開始:

目標需求:

如圖:

2 右上div區為標籤繪製區 「canvas1」3 下部分div區為標籤繪製區「canvas2」

h5的布局思想和android略有差別,按照以前做android的思路,偽android布局**:

relativelayout>

relativelayout>

relativelayout>

relativelayout>

relativelayout>

但事實上h5的布局思路不需要這麼麻煩, 接觸了h5的人,都知道:

div是塊級元素,預設是自佔一行。如果想讓兩個div排至一行,需要兩種方式:

1. 新增float屬性,如:float: left;

2. 新增display屬性,如:display: inline;

這裡使用新增float屬性的方式,**如下:

樣式:

H5前端基礎 布局

浮動 使用float來設定元素浮動 可選值 none 預設值,不浮動,元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素,會停止移動 4.如果浮動元素的上邊是...

H5 手機橫豎屏判讀

fn.screencheck function var svg 請將螢幕調正 var cdiv cdiv.css cdiv.html svg this var updateorientation function else window.onorientationchange updateorien...

H5中的布局標籤

h5中的布局標籤 1.html是具有語義化的語言,針對頁面的布局,有一類標籤代表各種意義的 布局盒子 2.所有的布局標籤都主要是用來構建頁面的內容區域,是雙標籤型別,預設顯示為塊狀元素 3.標籤 布局 盒子 4.html5新增的常用的布局標籤 頁面 區域頭部 頁面 區域底部 導航 文件中的章節,區段...