HTML5--应用网页模板
生活随笔
收集整理的這篇文章主要介紹了
HTML5--应用网页模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
因為剛開始寫博客,只想著把知識點記錄在這,也想給你們一些參考,在布局上有些沒有思考太多;回過頭來看,實在是不忍直視,對不住之前閱讀的100 ,既然昨天的事無法挽回,那就從現在開始從新整改吧!也希望大家看了,能對你們有所幫助
1.先給大家看看效果圖,好讓大家有點興趣
2.大家再來看代碼,是不是有點干勁了。
<!doctype html> <meta charset='utf-8' content='text/html' /> <head> <title>應用網頁模板</title> <style content='text/css'> * {margin:0px;padding:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} html,body {width:100%;background:#fff;} body {min-width:100%;} header,section,nav,article,aside,footer {display:block;text-align:center;text-shadow:1px 1px 1px #444;font-size:1.2em;} header {background-color:hsla(200,10%,20%,0.9);min-height:100px;min-width:100%;padding:10px 20px;} footer {background-color:hsla(250,50%,80%,0.9);min-width:100%;padding:1%;min-height:60px;} section {min-width:100%;min-height:400px;} section nav {background-color:hsla(300,60%,20%,.9);padding:1%;width:220px;} section article {background-color:hsla(120,50%,50%,.9);padding:1%;} section aside {background-color:hsla(20,80%,80%,.9);padding:1%;width:220px;} body {display:flex;display:-ms-flex;-ms-flex-flow:column wrap;flex-flow:column wrap;} section {display:-ms-flex;display:flex;-ms-flex:1;flex:1;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:stretch;align-items:stretch;} nav {flex:1;-ms-flex-order:0;order:0;} article {-ms-flex:1;flex:1;-ms-flex-order:2;order:2;} aside {flex:1;-ms-flex-order:3;order:3;} </style></head><body> <header>頁眉區域</header> <section><article>1.主體內容區域</article><nav>2.導航欄</nav><aside>3.側邊欄</aside> </section> <footer>頁腳區域</footer> </body> 3.下面就是不同代碼的解釋,多研究研究,其實就沒什么難的,都是從簡單開始演變的。 1.-moz-box; 老版本:firefox 19- 2.-webkit-box; 老版本:ios 6-,safari 3.1-3.6 3.-ms-flexbox; 混合版本:IE10 4.-webkit-flex; 新版本:Chrome 5.flex; 標準規范Opera 12.1,Firefox 20 box-sizing:border-box; 并排放置2個帶邊框的框 display:block; 讓對象成為塊級元素 background-color:hsla(220,50%,50%,.9)1.h: number; 色調 number對應相應的顏色2.s：0-100%; 飽和度3.l: 0-100%; 亮度4.a: 0-1; alpha透明度 padding:10px 10px 10px 10px;內邊距:順時針 上 右 下 左 margin：10px 10px 10px 10px;外邊距:順時針 上 右 下 左 flex是flex-grow\flex-shrink\flex-basis的縮寫1.默認值0 1 auto2.flex:none;1.flex-grow:0; 擴展空間2.flex-shrink:0; 收縮空間3.flex-basis:auto; 伸縮比率3.flex:auto;1.flex-grow:1;2.flex-shrink:1;3.flex-basis:auto;4.flex:1;1.flex-grow:1;2.flex-shrink:1;3.flex-basis:0%; 在伸縮和布局中設置長度和寬度:min-width;min-height; orient: horizontal; 水平排列div元素的子元素vertical； 垂直排列 direction:normal 伸縮和對象的子元素正常排列reverse 反向排列 lines:multiple; 當一橫排元素滿的時候,換行顯示single; 當一橫排元素滿的時候,不換行顯示 flow: 設置或檢索彈性盒模型對象的子元素排列方式row; x,主軸方向排列column; y,橫軸方向排列wrap; 換行nowrap; 不換行 align: 對齊stretch; 伸展 ordinal-group:規定框中的子元素的顯示次序0; 默認,值越低越靠前 order: 設置或檢索彈性盒模型對象的子元素出現順序0; 默認,值越低越靠前 注釋: html <!--some--> css /*some*/ javascrip // python #?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=11k2k1j&title=HTML5--應用網頁模板
總結
以上是生活随笔為你收集整理的HTML5--应用网页模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序实践（三）：九宫格实现及item跳
- 下一篇： CSS染色图标（图片）