两个简单h5小页面布局-练习弹性盒模型

效果（chrome环境下）
页面1：仿小米分类导航布局点击导航可达对应目录
页面2：仿公众号效果底部点击显示弹窗

<!-- 页面1 实现导航页面  --><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TSET</title><style>* {margin: 0;padding: 0;}body {width: 100vw;height: 100vh;background-color: #f3f3f3;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;}header,footer {height: 60px;display: flex;justify-content: space-between;}header {align-items: center;background-color: #e7e7e7;border-bottom: 1px solid #ccc;box-sizing: border-box;/* box-shadow: 0 2px 5px #ccc; */}header * {flex: 1;display: flex;justify-content: center;align-items: center;}header>div:nth-of-type(2) {flex: 3;}header>div>img {max-height: 30px;max-width: 30px;}main {flex: 1 0;overflow: hidden;display: flex;}main>* {overflow: auto;display: flex;flex-direction: column;box-sizing: border-box;}main>nav {flex: 2;background-color: #fff;box-shadow: 1px 0 5px #ddd;padding: 5px 0;box-sizing: border-box;}main>nav>a{flex: 1 0 50px;align-self: stretch;text-decoration: none;color: #555;display: flex;justify-content: center;align-items: center;box-sizing: border-box;border-bottom: 1px solid #ddd;  -webkit-tap-highlight-color: transparent;/* 重点：chrome默认情况下是带高亮的，巨丑，此处设置为透明 */       }main>nav>a:active{background-color: #999;color: white;}main>nav :last-child{border-bottom: none;}main>article {flex: 7;box-sizing: border-box;padding: 10px;word-break: break-all;}main>article>div>h2{margin-bottom: 5px 0;}main>article>div>p{padding: 5px 5px 5px 0;}footer {box-sizing: border-box;border-top: 1px solid #ddd;}footer>div {flex: 1 1 80px;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;}footer>div img {flex: 0 1 28px;width: 28px;overflow: hidden;/* img标签如果没有overflow:hidden，不响应flex影响 */}footer>div span {flex: 0 1 12px;font-size: 12px;color: #555;display: flex;align-items: center;}</style></head><body><header><div>&lt</div><div>分类</div><div><img src="2.png" alt="search"></div></header><main><nav></nav><article></article></main><footer><div><img src="2.png" alt="menu"><span>MENU</span></div><div><img src="2.png" alt="menu"><span>MENU</span></div><div><img src="2.png" alt="menu"><span>MENU</span></div></footer><script>let navList = '这个,导航,栏目,标题,就是,随便,写的,文章,对应,内容,则是,找的,歌词,后面,则是,想不,出来,随手,凑合,出来,的了'.split(',');function d$(tag) {return document;}window.onload = function () {let mynav = document.getElementsByTagName('nav')[0];let myart = document.getElementsByTagName('article')[0];myart.style.display = 'none';mynav.style.display = 'none';for (let i in navList) {let a = d$().createElement('a');a.innerText = navList[i];a.href = `#${navList[i]}`;mynav.appendChild(a);let d = d$().createElement('div');let h2 = d$().createElement('h2');h2.innerText = navList[i];h2.id = navList[i];let p = d$().createElement('p');p.innerText = '光阴的注脚 曾偏爱静好，不忌人和妖 也自在打闹,堂前的白鹤 寄往事迢迢，少年人的暮暮朝朝。再难有依靠，如师父沧桑眼角。拜别后，俯身在，尘埃中修道。何时乘风扶摇？这样跌撞着奔向，遥去的天光，听身侧风雨万丈。逆行人间苦，让心不再惶惶。可否扶摇直上？';d.appendChild(h2);d.appendChild(p);myart.appendChild(d);}mynav.style.display = 'flex';myart.style.display = 'flex';}</script>
</body></html>

<!-- 页面2 实现如微信公众号的页面  --><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><style>* {margin: 0;padding: 0;}body {height: 100vh;width: 100vw;display: flex;flex-direction: column;justify-content: space-between;}header,footer {height: 50px;background-color: #eee;display: flex;justify-content: space-between;}footer {background-color: #eee;}header>:nth-child(n){flex: 6;}header>:nth-child(2n-1){flex: 1;}header>div,footer>section {display: flex;justify-content: center;align-items: center;}footer>section{flex: 1 0 50px;display: flex;flex-direction: column;justify-content: flex-end;}footer>section>h4{align-self: stretch;flex: 0 0 50px;/* footer高50px h4元素高50px占满底部 */box-sizing: border-box;border-right: 1px solid #ccc;border-top: 1px solid #ccc;display: flex;justify-content: center;align-items: center;}footer>section:last-child h4{border-right: none;}footer>section>ul{flex: 0 0 0px;align-self: stretch;list-style: none;border: 1px solid #ccc;border-bottom: 0;/* display: flex; */display: none;flex-direction: column;justify-content: center;align-items: stretch;}footer>section>ul>li{flex: 1 0 50px;border-bottom: 1px #ccc solid;display: flex;justify-content: center;align-items: center;}footer>section>ul :last-child{border-bottom: 0;}footer>section:hover ul{display: flex;}/* 自适应 */main {flex: 1;}</style>
</head><body><header><div>&lt</div><div>NAME</div><div>· · ·</div></header><main></main><footer><section><ul><li>php</li><li>java</li></ul><h4>section1</h4></section><section><ul><li>Vue.js</li><li>C++</li></ul><h4>section2</h4></section><section><ul><li>Recat</li><li>Python</li></ul><h4>section3</h4></section></footer></body></html>

两个简单h5小页面布局-练习弹性盒模型相关推荐

css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
弹性盒模型实现两栏布局
目录弹性盒模型实现两栏布局弹性盒模型实现两栏布局思路: 首先对html,body设置高度为100%,并且对body设置为相对定位,把头部和底部,用定位的方式固定好,使用弹性盒模型,中间占据剩余的 ...
弹性盒模型响应式布局
1.移动端布局与PC端的区别 PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的. ...
前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
【转载】前端笔记之移动端响应式（中）视口百分比布局弹性盒模型remfillpage...
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
CSS 布局 Flex弹性盒
弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器 ...
CSS3弹性盒模型布局模块介绍
来源:Robert's talk 原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-i ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
弹性盒模型（部分布局超好用）
使用弹性盒模型的目的: 1.提供一种更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使他们的大小是未知的变化的. 2.让容器有能力改变项目的宽高,以填满可用的空间. 3.布局与方向无关属性: ...

两个简单h5小页面布局-练习弹性盒模型

两个简单h5小页面布局-练习弹性盒模型相关推荐

最新文章

热门文章