css学习二

运用色块来给网页布局

大色块 （大区域） -》小色块-》小··-》内容 
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;
}

 


前期脑子想不到那么细致，运用色块来辅助网页布局。
posted @ 2019-05-30 22:29  张宗珂  阅读(172)  评论(0)    收藏  举报