怎么创建网站免费的,wordpress4.0+中文,seo的优化方向,网天下网站建设二、flex 仿 gitCode 布局 及 自适应 首先查看我们的页面#xff1a; 这个时候直接顶部一个块#xff0c;下面分为左中右三个块#xff0c;然后就解决了#xff0c;是不是很简单#xff1f;相比刚刚那么这个简单多了。那就来做吧。 2.1 基本布局 首先给一个 style 价格…二、flex 仿 gitCode 布局 及 自适应 首先查看我们的页面 这个时候直接顶部一个块下面分为左中右三个块然后就解决了是不是很简单相比刚刚那么这个简单多了。那就来做吧。 2.1 基本布局 首先给一个 style 价格 flex一样的开头 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegitcode flex demo/titlestyle.flex{display: flex;}/style /head body/body /html接着 给予 body flex 样式并且由于当前 flex 是竖着的那么给予一个 cloumn 样式确定方向还有对应的背景色、边距等这些都不存在什么疑问吧学过上一小节的都看得懂吧代码如下 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegitcode flex demo/titlestyle* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex{display: flex;}.column{flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}/style /head body classflex column bgcolor/body /html那么接下来咱们就在 body 里面新建两个 div body classflex column bgcolor!--头--div styleheight: 60px;/div!--内容--div styleflex:1/div /body此时页面效果如下 一点问题没有那么接下来在内容的div 里新建 3 个 div 分别是左中右 body classflex column bgcolor!--头--div styleheight: 60px;/div!--内容--div styleflex:1!--左--div/div!--中--div/div!--右--div/div/div /body一看这 3 个 div 不用占满行那么肯定给予这个 内容 div 一个 flex 并且给予内部元素不大于 1 的比例即可还有一定要给予灰色背景不然全白了看不见 !--内容-- div classflex bgcolor styleflex:1!--左--div styleflex:0.2/div!--中--div styleflex:0.4/div!--右--div styleflex:0.2/div /div那么既然不占满行那么肯定需要对应的居中给予居中样式 style .center {justify-content: center; } /style调用后页面如下 2.2 左侧元素内部排列 接着左侧一看就是竖着的 那么给予一个样式 column 以及 flex !--左-- div styleflex:0.2 classcolumn/div接着往内部添加 3 个 div 以及对应高度若想看见这 3 个 div你还需要给予这个 左 的 div 背景色 !--左-- div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div /div效果如下 2.3 右侧元素内部排列 右侧也一样直接给予多个 div 并且设置对应的 flex 样式即可 !--右-- div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div /div效果如下 那么中间有点特殊因为内容很多那么这个时候我们填充内容会使顶部的内容发生挤压那么需要一个 flex-shrink: 0; 使其内容不压缩我们直接给予 头部 这个属性即可 !--头-- div styleheight: 60px;flex-shrink: 0;/div接着给予中部巨多 div 内容并且设置对应的高度 !--中-- div styleflex:0.4 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div /divdiv过多超出页面后我们可以滚动查看底部 div 但是在原本的 gitcode 页面中顶部是一直都存在的不会拖动内容后顶部栏就消失那么怎么做呢 我们直接给予内容的 div 一个 属性 overflow 即可 !--内容-- div classflex bgcolor center styleflex:1;overflow: auto;overflow auto 会给予超出内容一个滚动条此时滑动再多当前页面的头部也将会一直显示 此部分完整代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegitcode flex demo/titlestyle* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex {display: flex;}.column {flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}.center {justify-content: center;}/style /headbody classflex column bgcolor!--头--div styleheight: 60px;flex-shrink: 0;/div!--内容--div classflex bgcolor center styleflex:1;overflow: auto;!--左--div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div/div!--中--div styleflex:0.4; classcolumn flex bgcolordiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/div/div!--右--div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div/div/div /body/html2.4 自适应 有时候内容不复杂时咱们使用自适应将会很方便当设备是手机访问时屏幕大小将会改变原有 PC 页面显示有问题那么只需要使用 media 即可解决此时我们先创建一个 空的类样式. style .content{} /style接着给这个 content 样式给予到内容样式之中 !--内容-- div classcontent flex bgcolor center styleflex:1;overflow: auto;随后使用 media style media ( max-width:600px) {.content {flex-direction: column;} } /stylemedia 表示当 max-width:600px 当前屏幕最大宽度为 600px 时那么就是移动端设备直接给予 content 属性为 flex-direction: column;那么内容就会垂直显示那么就不会并排那么就很好的适配了手机 大家可以拿代码去试试自己拖动自己的屏幕可以看得到这个效果完整代码如下 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlegitcode flex demo/titlestyle* {margin: 0;}body {height: 100vh;}div {background-color: white;margin: 4px}.flex {display: flex;}.column {flex-direction: column;}.bgcolor {background-color: rgb(230, 230, 230);}.center {justify-content: center;}.content {}media ( max-width:600px) {.content {flex-direction: column;}}/style /headbody classflex column bgcolor!--头--div styleheight: 60px;flex-shrink: 0;/div!--内容--div classcontent flex bgcolor center styleflex:1;overflow: auto;!--左--div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div/div!--中--div styleflex:0.4; classcolumn flex bgcolordiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/divdiv styleheight: 150px;flex-shrink: 0;/div/div!--右--div styleflex:0.2 classcolumn flex bgcolordiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/divdiv styleheight: 150px;/div/div/div /body/html