Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 基于浮动、绝对定位布局，内容的多列显示，flex容器属性实战：导航条等练习
Blogger Information
Blog 12
fans 1
comment 0
visits 9539
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
基于浮动、绝对定位布局，内容的多列显示，flex容器属性实战：导航条等练习
浪子修罗记录有趣的事
Original
774 people have browsed it

基于浮动的二列布局

  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>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：作业写完, 不想谈点感受吗?记得写总结
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post