目录

简易版cnlog

注意的点1.一定先分好块标签,再基于一个个块标签进行装饰(相当于给一个个人化妆)2.浮动: 我的理解是从一个平面上浮到一个平面上,所有的标签都有浮动(包括块标签和行内标签),标签上浮都是在自己当前的位置上浮,上浮之后就算是原本是块标签都不会拥有独占一行的权力,而是自己的有多大就占多大的地方.'''举个例子:一个div标签内套有两个div1和div2标签,div2标签上浮并不会上顶,因为div1还是独占一行的,div2只是会在自己的区域内上浮.如果是两个div都上浮了,就是div1和div2显示在同一行,div的边框就是造成塌陷,边框会只显示一条线,为了避免这种情况,要继承clearfix类.clearfix这个类就是div里content=''空内容寻找自己的位置,必须满足clrear=both;display=block;表示我必须独占一行,遇到阴影就不占,顺着它的大小往下找,找到了空白的地方就填方,只是没有内容,但是div的边框就被撑起来了.'''如果div1和div2的大小一样,然后div1是在div2后面的话,div2向左浮动,div2浮动之后就会div1顶上去,如果位置掉换,div2就算浮动也不会覆盖div1.注意区分向左向右浮动,因为两个div都向左移动的话,变成都在一个平面上,然后后者会覆盖前者.3.设置一方浮动为position:fixed时,另一方的浮动也就是块标签会随内容的增大而增大(在不设定高度和宽度的情况下),因为是上下内容的滑动,所以可以不设定高度,而宽度最好设定为默认页面的80%,而一方浮动position:fixed,宽度为20%,高度可以设定为100%,注意左浮和右浮,然后为了方便也为了好看将body里的margin:0,也加上背景颜色,然后右浮的那一方就不用写背景颜色了,直接就会显示body的,然后position:fixed那一方自己设定颜色覆盖body的.4.  box-shadow: 3px 3px 3px rgba(0,0,0,0.3) 水平阴影位置 垂直阴影位置 模糊距离 颜色(rgba(0.3)为通明度)5.每个标签都有border(即使为0,也是有border),有些是有默认值,有些要自己设定border的, 调节字体的大小对边距是不会有影响的,等比例放大.6.造成文字的溢出是因为设定了宽高,文字过多,用overflow:hidden7.ol内部一定要写li8.ol { list-style:None;} 不显示序号9.一个块标签可以继承多个类class='clearfix link'这是两个类10.行内标签使用浮动不需要clearfix,直接向左向右移就好了11.再连接点过之后,hover ,link,active都无效了12.border就是边框并不是div的整个区域,设置div区域里的背景颜色和margin,这个div里面包含的所有div都是随着内容的增加而增大,而边框不管多大都只是边框的大小,虽然遇到文字会显示并不会覆盖.

html文件

    
            
        
    
        
     
            
              
     
        
     
                  yaya博客        
     
        
     
                  是谁来偷看我女朋友博客呢        
     
        
     
            
      
                
       
点我! 点我!
                
       
博客园
                
       
迷醉女声
            
      
        
     
        
     
            
      
                
       
#Python
                
       
#Java
                
       
#Go
            
      
        
     
    
    
    
    
        
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
     
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
         
     
            
      无标题            
      2019-5-30            
      
       ????嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻
      
            
      
        
      
       #Python           #JavaScript
      
        
     
    
    

mycess.cess

body {    margin:0;    background-color: navajowhite;}.clearfix:after {    content : '';    clear:both;    display:block;}.float-left {    width:20%;    height:100%;    float:left;    background-color: #4d4c4c;    position:fixed;}.float-right {    width:80%;    float:right;}.circle {    width:100px;    height:100px;    border:3px solid white;    border-radius:50%;    margin-top: 30px;    margin-left:40px;    overflow: hidden;}img {    width: 100%;    height: 100px;}.title {    color:white;    margin-top: 15px;    text-indent: 60px;    font-size: 15px;}.info {    color:white;    margin-top: 5px;    text-indent: 17px;    font-size: 12px;    font-weight:lighter;}ol {    list-style:None;}a :link {    color:gainsboro;}a :hover{    color: #769B36;}a:active{    color: #FF6800;}a {    text-decoration: none;}a:visited{    color:lightpink;}.link{    margin-top: 50px;}.explain {    color:wheat;    margin:40px auto;    font-size:14px;    /*text-align: center;*/}.c1 {    font-size:30px;    font-weight:bolder;    /*float:left;*/    padding-top:2px;    padding-left:10px;    border-left:4px solid red;}.c2 {    font-size: 15px;    float:right;    padding-top:9px;    padding-right:10px;}.border {    margin:20px 40px 20px 10px;    background-color: white;    border:2px solid grey;    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}.footnote {    font-size:10px;    padding: 5px 50px 12px 12px;}.content {    font-size: 20px;    margin:25px 70px 3px 10px;}

页面效果