h5左中右经典布局demo_h5demo,h5左右布局资源-CSDN文库

共1个文件

html：1个

需积分: 46 157 浏览量 2018-12-12 14:41:30 上传评论收藏 2KB RAR 举报

在H5网页设计中，布局是至关重要的，它决定了页面元素的排列方式和视觉效果。本示例"左中右经典布局demo"旨在演示如何构建一个标准的网页布局，其中包括了header、content和footer三个主要部分，并展示了如何实现文字和元素的居中对齐。下面我们将深入探讨这些知识点。我们来看“左中右结构”。这种布局模式常用于创建具有清晰导航和内容区划分的页面。在HTML中，通常通过使用div元素来定义这三个区域。例如： ```html <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> ``` 然后通过CSS来设置样式，实现左右两边固定宽度，中间自适应的布局： ```css .container { display: flex; } .left { width: 200px; background-color: #f1f1f1; } .center { flex-grow: 1; background-color: #ffffff; } .right { width: 200px; background-color: #f1f1f1; } ``` 接下来是“上中下结构”，这又称为header、content、footer布局。header通常包含导航和logo，content是页面的主要内容区域，而footer则用于放置版权信息和其他链接。在HTML中，可以这样编写： ```html <header></header> <main></main> <footer></footer> ``` CSS样式可以设置如下，确保各个部分垂直堆叠： ```css body { display: flex; flex-direction: column; } header, footer { height: 50px; /* 自定义高度 */ background-color: #f1f1f1; } main { flex-grow: 1; padding: 20px; /* 自定义内边距 */ } ``` 关于“各种元素居中”，H5提供了多种方法实现元素的水平和垂直居中。对于水平居中，可以使用`text-align: center`属性对文本进行居中，或者对块级元素使用`margin: 0 auto`。垂直居中可以使用Flexbox布局： ```css .center { display: flex; justify-content: center; align-items: center; } ``` 或使用CSS Grid： ```css .center { display: grid; place-items: center; } ``` 此外，对于响应式设计，还可以使用媒体查询(`@media`)来适应不同屏幕尺寸，确保在不同设备上都能呈现良好的布局效果。这个"左中右经典布局demo"和"上中下结构"的示例，以及各种元素居中的方法，是H5网页开发中的基础布局技巧。通过熟练掌握这些技巧，开发者可以创建出美观且易用的网页界面。

资源推荐

资源详情

资源评论

收起资源包目录

经典布局.rar （1个子文件）

经典布局

index.html 8KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">  <title>左中右版式</title> <style type="text/css"> *{margin:0px;padding:0px;} body{background:#FFF;font-family:'微软雅黑';} ul{list-style:none;} a{text-decoration:none;} li{list-style: none;} .clear {clear: both;height: 0;overflow: hidden;} #wrap{ width:100%; margin:0 auto; } #header{ margin:1px; height:80px; border:solid 1px #0000FF; } #container{ position:relative; margin:1px; height:550px; } #left_side{ position:absolute; top:0px; left:0px; border:solid 1px #0000FF; width:170px; height:100%; } #content{ margin:0px 190px 0px 190px; border:solid 1px #0000FF; height:100%; } #right_side{ position:absolute; top:0px; right:0px; border:solid 1px #0000FF; width:170px; height:100%; } #footer{ margin:3px 1px 1px 1px; /* height:80px; */ overflow:hidden; border:solid 1px #0000FF; } .l_header{ position: relative; /*注意，这里是为了下面垂直居中*/ margin:1px; height:220px; border:solid 1px #0000FF; } .l_h_cotent{ position:absolute; /*垂直水平居中都需要这个*/ margin:1px; height:50px; /*垂直居中*/ top:50%; /*垂直居中*/ margin-top: -25px; /*垂直居中*/ width: 600px; /*水平居中*/ left: 50%; /*水平居中*/ margin-left: -300px; /*水平居中*/ border:solid 1px #0000FF; } .pagination { /*未知宽度的水平居中*/ position: relative; } .pagination ul { position: absolute; left: 50%; } .pagination li { line-height: 25px; margin: 0 5px; float: left; position: relative;/*注意，这里不能是absolute，大家懂的*/ right: 50%; } .l_container{ position:relative; margin:1px; height:250px; } .l_left_side{ position:absolute; top:0px; left:0px; border:solid 1px #0000FF; width:170px; height:100%; } .l_content{ position:relative; margin:0px 190px 0px 190px; border:solid 1px #0000FF; height:100%; } .l_right_side{ position:absolute; top:0px; right:0px; border:solid 1px #0000FF; width:170px; height:100%; } .n_main{ position:absolute; top:50%; margin-top: -90px; height:180px; width:100%; border:solid 1px #0000FF; } .n_center{ position:relative; margin:1px; height:150px; border:solid 1px #0000FF; } .n_ul{ position:absolute; top:50%; margin-top: -60px; height:120px; width:100%; border:solid 1px #0000FF; } .n_center li{ width:520px; /*水平居中*/ margin:1px auto; /*水平居中*/ height:100px; /*垂直居中*/ line-height:40px; /*垂直居中*/ text-align:center; /*字体水平居中*/ border:solid 1px #0000FF; } .ul_nav{ display: table; width: calc(100% + 38px); table-layout: fixed; /* display: grid; grid-template-columns:repeat(9,1fr); grid-gap:48px; */ height:56px; line-height:56px; /* border:solid 1px #0000FF; */ } .ul_nav li{ display: table-cell; padding-right: 37px; } .ul_nav li a{ display:block; padding:0 5px; } .ul_nav a:hover { color:#ffffff; background-color: #2195DE; } .current{ color:#ffffff; background:#2195DE; } .ul_li_div{ width:520px; height:100px; display:table-cell; vertical-align:middle; text-align:center; } .ul_li_div span{ color: #4A4A4A; font-weight:bold; } .ul_li_div p{ font-size: 12px; color: #000000; letter-spacing: 0; line-height: 12px; margin:0 60px; } /*******浮动的方式排版（优点是父div的高度随着子div增大而增大）********/ #news_tab { width:1154px; margin:0 auto; /* height:1267px; */ overflow:hidden; /**这个一定要加上**/ border:solid 1px #0000ff; } .n_t_leftside { float:left; width:190px; height:967px; overflow:hidden; border:solid 1px #0000ff; } .n_t_content { float:left; width:698px; height:1067px; overflow:scroll; border:solid 1px #0000ff; } .content_tab { width:100%; height:1967px; border:solid 1px #0000ff; } .n_t_rightside { float:left; width:260px; height:1067px; overflow:hidden; border:solid 1px #0000ff; } /*************************************/ </style> <script language="javascript" type="text/javascript"> function change_bg(obj){ var a=document.getElementsByClassName("divide")[0].getElementsByTagName("a"); for(var i=0;i<a.length;i++){a[i].className="";} obj.className="current"; } </script> </head> <body> <form id="form1" runat="server"> <div id="wrap" class="wrap"> <div id="header">header</div> <div id="container"> <div id="left_side">left_side</div> <div id="content"> content <div class="l_header"> <div class="l_h_cotent"> <div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next</a></li> </ul> </div> </div> </div> <div class="l_container"> <div class="l_left_side">left_side</div> <div class="l_content"> <div class="n_main"> <div class="n_center"> <ul class="n_ul"> <li class="n_li"> <div class="ul_li_div"> <p><span>公司宗旨</span><br/> 绿色：投资国家产业政策鼓励的行业，对违法违规灰色业务实行零容忍；<br/> 诚信：以专业判断为基础，诚信经营，投资人利益至上； </p> </div> </li> <li class="n_li">居中</li> </ul> </div> </div> </div> <div class="l_right_side">right-side</div> </div> <div class="divide"> <ul class="ul_nav"> <li><a href="#" class="current" onclick="change_bg(this)">网站首页</a></li> <li><a href="#" onclick="change_bg(this)">关于我们</a></li> <li><a href="#" onclick="change_bg(this)">投资业务</a></li> <li><a href="#" onclick="change_bg(this)">并购资讯</a></li> <li><a href="#" onclick="change_bg(this)">医疗资讯</a></li> <li><a href="#" onclick="change_bg(this)">基金产品</a></li> <li><a href="#" onclick="change_bg(this)">新闻资讯</a></li> <li><a href="#" onclick="change_bg(this)">会员中心</a></li> <li><a href="#" onclick="change_bg(this)">联系我们</a></li> </ul> </div> </div> <div id="right_side">right-side</div> </div> <div id="footer"> footer <div id="news_tab"> <div class="n_t_leftside"></div> <div class="n_t_content"> <div class="content_tab"></div> </div> <div class="n_t_rightside"></div> </div> </div> </div> </form> </body> </html>

评论收藏

内容反馈