标签：res new splay article osi textarea hidden 12px center
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的弹性盒布局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <link rel="stylesheet" href="css/style.css"/> <style> @import "m_reset.css"; .fl { float: left; } .fr { float: right; } .m { margin: 0 auto; } .container2, html, body { width: 100%; height: 100%; } .container2 { width: 100%; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; } #video { width: 100%; height: auto; background: #ff0000; } .section2 { -webkit-box-flex: 1; } .section2 #video_bottom { width: 96%; height: auto; margin-left: 2%; } .section2 .video_title { width: 100%; height: 40px; -webkit-box-flex: 1; line-height: 40px; } .section2 .video_title #red_text { font-size: 14px; font-weight: 400; } .section2 .video_parameter { width: 100%; height: auto; border-top: 1px solid #ff0000; padding-top: 5px; padding-bottom: 5px; } .section2 .video_desc { width: 100%; height: auto; border-top: 1px solid #ff0000; padding-top: 5px; } /*背景图*/ #mountain_view { background: url("背景图地址"); background-position: center center; background-size: cover; height: 100%; } </style> </head> <body> <div class="container2"> <!--视频区start--> <video id="video" controls="controls" poster="./合欢山风光.jpg"> 您的浏览器不支持 video 标签。 <!--source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。--> <source src="视频地址" type="video/mp4"> </video> <!--视频区end--> <div class="section2" id="mountain_view"> <div id="video_bottom"> <!--视频标题start--> <div class="video_title"> <span id="red_text">视频名称</span> </div> <!--视频标题end--> <!--视频参数区start--> <div class="video_parameter"> <p>视频参数</p> <p>拍摄间隔：5分钟</p> <p>播放速度：10帧/秒</p> <p>拍摄模式：夜晚</p> </div> <!--视频参数区end--> <!--视频描述区start--> <div class="video_desc"> 视频信息描述 </div> <!--视频描述区end--> </div> </div> </div> </body> </html>
另附上m_reset.css
@charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0 } body, button, input, select, textarea {font:12px/1.5 "\5FAE\8F6F\96C5\9ED1", arial ; *line-height:1.5} h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight: normal;} address, cite, dfn, em, var {font-style:normal;} code, kbd, pre, samp {font-family:courier new, courier, monospace;} ul, ol {list-style:none;} fieldset, img {border:0} table {border-collapse:collapse;border-spacing:0;} input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;font-size:100%;} div:after, ul:after, dl:after,.clearfix:after { content:""; display:block; clear:both; height:0; visibility:hidden;} /****/ abbr, article, aside, audio, canvas, datalist, details, figure, footer, header, hgroup, menu, nav, output, progress, section, video {display:block;margin:0;padding:0} i,u,b,em,span,small{ font-weight:normal; font-style:normal;} html,body {height: 100%} /****/ html {font-size: 62.5%;} body { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; user-select: none; -moz-user-focus: none; -moz-user-select: none; } a{text-decoration: none;} h2{ margin:0; padding: 0;} ul{word-spacing: -4px;}
标签：res new splay article osi textarea hidden 12px center
原文地址：http://www.cnblogs.com/heyiming/p/6423527.html
