search

博客列表 >基于浮动、绝对定位布局，内容的多列显示，flex容器属性实战：导航条等练习

基于浮动、绝对定位布局，内容的多列显示，flex容器属性实战：导航条等练习

浪子修罗记录有趣的事
浪子修罗记录有趣的事原创
2020年06月23日 01:10:13784浏览

基于浮动的二列布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基于浮动的二列布局</title>
  7.     <style>
  8.       header,
  9.       footer,
  10.       aside,
  11.       main {
  12.         background-color: blanchedalmond;
  13.       }
  14.       aside,
  15.       main {
  16.         min-height: 500px;
  17.       }
  18.       aside {
  19.         width: 200px;
  20.         float: left;
  21.       }
  22.       main {
  23.         width: 790px;
  24.         float: right;
  25.       }
  26.       header,
  27.       footer {
  28.         height: 50px;
  29.       }
  30.       .wrap {
  31.         width: 1000px;
  32.         overflow: hidden;
  33.         margin: 10px auto;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <header>页眉</header>
  39.     <div class="wrap">
  40.       <aside>侧边</aside>
  41.       <main>主体</main>
  42.     </div>
  43.     <footer>页脚</footer>
  44.   </body>
  45. </html>

基于绝对定位的二列布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基于绝对定位的二列布局</title>
  7.     <style>
  8.       header,
  9.       footer,
  10.       aside,
  11.       main {
  12.         background-color: blanchedalmond;
  13.       }
  14.       aside,
  15.       main {
  16.         min-height: 500px;
  17.       }
  18.       aside {
  19.         width: 200px;
  20.         position: absolute;
  21.         left: 0;
  22.         top: 0;
  23.       }
  24.       main {
  25.         width: 790px;
  26.         position: absolute;
  27.         top: 0;
  28.         right: 0;
  29.       }
  30.       .wrap {
  31.         width: 1000px;
  32.         min-height: 500px;
  33.         margin: 10px auto;
  34.         /* 定位父级 */
  35.         position: relative;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <header>页眉</header>
  41.     <div class="wrap">
  42.       <aside>侧边</aside>
  43.       <main>主体</main>
  44.     </div>
  45.     <footer>页脚</footer>
  46.   </body>
  47. </html>

内容的多栏/列显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>内容的多栏/列显示</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       /* 这个伪类可以拿到Xhtml的根元素 */
  15.       :root {
  16.         font-size: 16px;
  17.         color: blue;
  18.       }
  19.       div {
  20.         padding: 50px;
  21.         width: 60rem;
  22.         margin: 3px auto;
  24.         /* 分列显示  3列*/
  25.         column-count: 3;
  26.         /* 计算宽度自动分列  可以是20rem  auto*/
  27.         column-width: auto;
  28.         /* 竖分割条 */
  29.         column-rule: 2px solid blueviolet;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div>
  35.       俗话说“好马配好鞍”，喜欢打羽毛球的人应该给自己配个合适的羽毛球拍。市面上羽毛球拍那么多，我们应该怎么选择呢?选羽毛球拍需要注意什么?
  36.       选择全碳羽毛球拍，而且是不带拉了线的那种，坚决不到超市或普通商场购买金属或半金属的已经穿了线的两支装的那种。
  37.       适合自己的才是最好的。没有购拍和打球经验的新手，第一次选购时，可买便宜一些的、低价位的球拍，低价位球拍一般没有强烈的个性，新手、一般人群都能适应，贵价拍当然好，但往往个性很强，不是偏硬就是偏重，只有那种力量不成问题的高手才能驾驶、控制之。新手打了几年以后，再根据自己的打法特点和力量情况选购适合自己的高价位球拍。
  38.       新手、新拍第一次拉线建议在20-23磅之间，磅数太高的话，弹性小，新手打不到后场，而且拍线易断，两支拍子碰撞时，往往拉线磅数高的拍子易“牺牲”;磅数太低，则控球不准确，击球有“滞后、粘连”的感觉，不爽。另外，一定要绑上合适的柄皮或毛巾胶，这样可以大大增强手感以及手指对球拍的控制力。
  39.       小孩子还有力量较小的球友可选择较轻的球拍，轻的球拍拿在手里挥速会更加轻快，灵活，偏于防守，达到四两拨千斤的效果。
  40.     </div>
  41.   </body>
  42. </html>

项目在交叉轴上的排列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>项目在交叉轴上的排列</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 200px;
  11.         display: flex;
  12.         /* 项目在交叉轴上默认是自动伸缩的 */
  13.         align-items: stretch;
  14.         /* 顶部 */
  15.         align-items: flex-start;
  16.         /* 居中 */
  17.         align-items: center;
  18.         /* 底部 */
  19.         align-items: flex-end;
  20.       }
  21.       .container > .item {
  22.         width: 60px;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">1</div>
  29.       <div class="item">2</div>
  30.       <div class="item">3</div>
  31.     </div>
  32.   </body>
  33. </html>

主轴方向与项目排列的简写

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>主轴方向与项目排列的简写</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 50px;
  11.         display: flex;
  12.         /* 默认值可以不写出来 */
  13.         /* 设置一下方向 */
  14.         flex-direction: row;
  15.         /* 是否换行  禁止*/
  16.         flex-wrap: nowrap;
  18.         /* 简写 */
  19.         /* 第一个参数是主轴的排列方向，第二个是否换行 */
  20.         flex-flow: row nowrap;
  21.       }
  22.       .container > .item {
  23.         width: 60px;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <div class="item">4</div>
  33.       <div class="item">5</div>
  34.     </div>
  35.   </body>
  36. </html>

flex容器属性实战：快速写一个主导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器属性实战：快速写一个主导航</title>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         /* 去掉下划线 */
  15.         text-decoration: none;
  16.         color: burlywood;
  17.       }
  18.       nav {
  19.         height: 50px;
  20.         background-color: #333;
  21.         padding: 0 50px;
  22.         /* 转为弹性盒子 */
  23.         display: flex;
  24.       }
  25.       nav a {
  26.         /* 继承高度 */
  27.         height: inherit;
  28.         /* 垂直居中 */
  29.         line-height: 50px;
  30.         padding: 0 20px;
  31.       }
  32.       nav a:hover {
  33.         /* 继承高度 */
  34.         height: inherit;
  35.         /* 垂直居中 */
  36.         line-height: 50px;
  37.         padding: 0 20px;
  38.         color: white;
  39.         background-color: yellowgreen;
  40.       }
  41.       nav a:last-of-type {
  42.         margin-left: auto;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <header>
  48.       <nav>
  49.         <a href="">首页</a>
  50.         <a href="">教学视频</a>
  51.         <a href="">社区问答</a>
  52.         <a href="">资源下载</a>
  53.         <a href="">PHP培训</a>
  54.         <a href="">登录/注册</a>
  55.       </nav>
  56.     </header>
  57.   </body>
  58. </html>

项目属性：order控制项目顺序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>order案例，调整元素顺序</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         display: flex;
  11.         /* 主轴改为列 */
  12.         flex-direction: column;
  13.       }
  14.       .container > .item {
  15.         width: 180px;
  16.         border: 2px solid royalblue;
  17.         padding: 10px;
  18.         display: flex;
  19.         /* 定位属性 用来获取元素用的 */
  20.         position: relative;
  21.       }
  22.       .container > .item > div {
  23.         display: flex;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">
  30.         1
  31.         <div>
  32.           <button onclick="up(this)">向上</button
  33.           ><button onclick="dowm(this)">向下</button>
  34.         </div>
  35.       </div>
  36.       <div class="item">
  37.         2
  38.         <div>
  39.           <button onclick="up(this)">向上</button
  40.           ><button onclick="dowm(this)">向下</button>
  41.         </div>
  42.       </div>
  43.       <div class="item">
  44.         3
  45.         <div>
  46.           <button onclick="up(this)">向上</button
  47.           ><button onclick="dowm(this)">向下</button>
  48.         </div>
  49.       </div>
  50.     </div>
  51.     <script>
  52.       let up = (ele) => (ele.offsetParent.style.order -= 1);
  53.       let down = (ele) => (ele.offsetParent.style.order += 1);
  54.     </script>
  55.   </body>
  56. </html>

上一条：背景控制和精灵图的实例演示以及阿里图标的引用流程下一条：简单演示浮动和高度塌陷的解决方案，用定位和浮动完成三列布局（0618）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多