运用色块来给网页布局
大色块 （大区域） -》小色块-》小··-》内容 float 浮动 规定区域 display: block inline-block inline none 块标签：默认占一行 可以设置宽高 div p h1 行内块：默认不占一行 可以设置宽高 img 行内：默认不占一行 不可以设置宽高 a span 显示隐藏：1.display：none 隐藏 本身位置没有了 2.visibility：hidden 隐藏 本身位置还有 3.宽高设为0 4.透明度设为0 opacity position：定位 经常和四个样式一起使用 top left right bottom fixed ：绝对定位 根据窗口来定位 本身位置没有了 relative ： 相对自身定位 本身位置还有 主要用于微调 限制子元素 absolute：绝对定位 根据body定位 本身位置也没有了 相对最近的有position属性的父标签 最上层是body z-index 层数 margin：外边距 父标签 第一个子标签 设置margin会作用到父标签 display：flex 移动布局 响应式布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/futetx.css"> </head> <body> <div class="flex-waibiankuang"> <div class="flex-head"> <div class="flex-head1"> <a href="" class="logo"> </a> </div> <div class="flex-head2"></div> <div class="flex-head3"></div> </div> <div class="flex-content"> <div class="flex-lunbotu"></div> <div class="flex-ct1"> <div class="flex-ct1-1"></div> <div class="flex-ct1-2"></div> <div class="flex-ct1-3"></div> </div> <div class="flex-ct2"></div> <div class="flex-ct3"></div> <div class="flex-ct4"> <div class="flex-ct4-1"></div> <div class="flex-ct4-2"></div> <div class="flex-ct4-3"></div> <div class="flex-ct4-4"></div> <div class="flex-ct4-5"></div> </div> <div class="flex-ct5"></div> <div class="flex-ct6"></div> <div class="flex-ct7"></div> </div> <div class="flex-tail"></div> </div> </body> </html>css
*{ margin: 0px; padding: 0px; margin: auto; } .flex-waibiankuang{ width: 100%; height: 3751.75px; } .flex-head{ width: 95%; height: 70px; background-color: #24ff00; display: -webkit-flex; display: flex; } .flex-head1{ width: 30%; height: 100%; } .logo{ width: 192px; height:37px; } .flex-head2{ width: 40%; height: 100%; background-color: #ff2400; position: relative; left: 104px; } .flex-head3{ width: 20%; height: 100%; background-color: #0001ff; } .flex-content{ width:95%; height:3100px; background-color: #0092ff; display: -webkit-flex; display: flex; flex-direction: column; } .flex-lunbotu{ width: 100%; height: 376px; background-color: #8339ff; } .flex-ct1{ width:100%; height:289px; background-color: #ffdf00; display: -webkit-flex; display: flex; flex-direction: column; } .flex-ct1-1{ width: 624px; height: 57.6px; background-color: #15ff00; } .flex-ct1-2{ width: 624px; height: 44.8px; background-color: #0395e1; } .flex-ct1-3{ width: 624px; height: 63.4px; background-color: #fff600; } .flex-ct2{ width:100%; height:449.38px; background-color: #ffad89; } .flex-ct3{ width:100%; height:349.51px; background-color: #9b91ff; } .flex-ct4{ width:100%; height:470px; background-color: #ff85f8; } .flex-ct4-1{ width: 100%; height: 49.6px; background-color: #ff54b8; } .flex-ct4-2{ width: 100%; height: 45.6px; background-color: #ff7f21; } .flex-ct4-3{ width: 100%; height: 22.4px; background-color: #94ffa5; } .flex-ct4-4{ width: 100%; height: 81.6px; background-color: #ffea8c; } .flex-ct4-5{ width: 100%; height: 69.6px; background-color: #ff73c7; } .flex-ct5{ width:100%; height:320px; background-color: #6cccff; } .flex-ct6{ width:100%; height:646.4px; background-color: #93ff79; } .flex-ct7{ width:100%; height:445px; background-color: #ffe155; } .flex-tail{ width: 95%; height: 460.8px; background-color: black; }前期脑子想不到那么细致，运用色块来辅助网页布局。
转载于:https://www.cnblogs.com/zhangzongke/p/10952442.html
