我的自学Python之路（第二阶段Day27）

前端知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="sfhdjf.css">
</head>
<body>
<!--左边开始-->
<div class="left">
    <!--头像开始-->
    <div class="c1">
        <img src="ss.png" alt="显示不成功">
    </div>
    <div class="c2">洪哥的博客</div>
    <div class="c3">这条抵扣水电费</div>
    <div class="c4">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">关于你</a></li>
            <li><a href="">关于他</a></li>
        </ul>
    </div>
    <div class="c5">
        <ul>
            <li><a href="">js</a></li>
            <li><a href="">cs</a></li>
            <li><a href="">sss</a></li>
        </ul>
    </div>
</div>
<!--右边开始-->
<div class="right">
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>
    <div class="c6">
        <div class="c7">
            <h1 class="c8">海燕</h1>
            <span class="c9">2018-07-15</span>
        </div>
        <div class="c10">卡迪夫拉克丝打飞机</div>
        <div class="c11">困了就睡法兰克福到静安寺两地分居</div>
    </div>


</div>
</body>
</html>

html代码示例

/*公共样式*/
*{
    font-family: '微软雅黑';
    font-size:14px;
    margin:0;
    padding:0;

}
a{
    text-decoration:none;
}
/*左边栏*/
.left{
    width:20%;
    background-color:rgb(76,77,76);
    height:100%;
    position:fixed;
    left:0;
    top:0;
}
.c1{height:128px;
    width:128px;
    border:1px solid red;
    border-radius:100%;
    overflow:hidden;
    margin:0 auto;
}
.c1>img{
    max-width:100%

}
.c2{
    color:white;
    font-size:24px;
    font-weight:bold;
    text-align:center;
    margin-top:10px;
}
.c3{
    color:white;
    text-align:center;
    border:2px solid white;

}
.c4,.c5{
    text-align:center;
    margin-top:10px;
}
.c4 a,.c5 a{
    color:white;
}
.c5 a:before{
    content:'#'
}


/*!*右边栏*!*/
.right{
    width:80%;
    background-color:white;
    height:1000px;
    float:right;

}
.c6{
    background-color:grey;
    margin-left:30px;
    margin-right:10%;

    margin-top:30px;
}
.c7:after{
    content:'';
    clear:both;
    display:block;

}
.c7{
    border-left:3px solid red;
}
.c8{
    float:left;
    padding:15px;

}
span{
   float:right;
}
.c10{
    margin-top:10px;
}
.c11{
    border-top:2px solid red;
    padding-top:10px;
}

css代码

3. 背景属性
        1. background-color
        2. background-image
        
    4. 边框属性
        1. border
        2. border-radius  --> 变圆
    
    5. display属性
        1. inline
        2. block
        3. inline-block
        4. none (隐藏)
        
    6. CSS盒子模型(从外到内)
        1. margin: 边框之外的距离(多用来调整 标签和标签之间的距离)
        2. border边框
        3. padding:内容区和边框之间的距离(内填充/内边距)
        4. condent: 内容
    
    7. 浮动:
        div配合float 来做 页面的布局
        任何元素浮动之后都会变成块元素
        
        float:
            1. left
            2. right
            3. none
    8. 清除浮动(清除的是浮动带来的负面效果-->父标签塌陷(撑不起来))
        1. clear
            1. left
            2. right
            3. both
        最常和伪元素结合起来应用:
            .clearfix:after {
                content: "";
                display: block;
                clear: both
            }

    9. 定位:
        1. static   --> 默认的
        2. relative --> 相对定位(相对于原来的位置来说)
        3. absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)
        4. fixed    --> 固定在某个位置(返回顶部按钮)
    
    left   right   top   bottom

总结

我的自学Python之路（第二阶段Day27）

猜你喜欢