• 百度前端技术学院练习-任务6

    一个假期过了，也有一段时间没写博客了。这开学之后还是要练一练，不然又生疏了。

    <!DOCTYPE html>
<html lang="en">
<head>
    <link href="../css/任务6.css" type="text/css" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="waiweikuangzi">
        <div class="pageshang">
            <div class="top"><img src="../Images/任务6-左上配图红色.jpg" id="left-top-redImage"><span>2016.03</span></div>
            <div class="header">
                <img class="Images" src="../Images/任务6-左上大图.jpg">
                <div class="header-image-zhezhao-left"></div>
                <div class="header-image-zhezhao-right"></div>
                <div class="header-right">
                    <p class="header-right-wenzi-1">About<br>TECHNOLOGE</p>
                    <p class="header-right-wenzi-2">About technology About technology About technology</p>
                    <p class="header-right-wenzi-3">700</p>
                    <p class="header-right-wenzi-4">
                        <span id="header-right-wenzi-4-1">css</span>
                        <span id="header-right-wenzi-4-2">css</span>
                        <span id="header-right-wenzi-4-3">csscsscss</span>
                    </p>
                </div>
            </div>
            <div class="main">
                <div class="main-left">
                    <p id="main-left-what-title">What</p>
                    <p id="main-left-what-container">
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        </p>
                </div>
                <div class="main-center">
                    <p id="main-center-when-title">When</p>
                    <p id="main-center-when-container">
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        前端前端前端前端前端前端</p>
                </div>
                <div class="main-right">
                    <p id="main-right-how-title">How</p>
                    <p id="main-right-how-container-1">
                        前端前端前端前端前</br>
                        端前端前端前端前端端</br>
                        前端前端前端前</p>
                    <p class="main-right-how-container-2">
                        <p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">40%</span></p>
                        <p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">30%</span></p>
                        <p class="main-right-how-container-2-1">What------<span class="main-right-how-container-2-2">30%</span></p>
                    </p>
                </div>
            </div>
        </div>
        <div class="pagexia">
            <div class="wenzhnag3">
                <div class="wenzhang3-title">
                    <span class="wenzhang3-title-1">The</span>
                    <span class="wenzhang3-title-2">TECHNOLOGY OF FRONT</span><br>
                    <span class="wenzhang3-title-3">前端技术领域</span>
                </div>
                <div class="wenzhang3-container">
                    <p>
                        <span class="wenzhang3-container-1">前</span>
                        <span class="wenzhang3-container-2">
                            端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                            端前端前端前端前端前端前端前端前端前端前端前前端前端前端前前端
                            前端前端前端前端前端前端前端前端前端
                        </span>
                    </p>
                    <p>
                        <span class="wenzhang3-container-2">
                            <img src="../Images/任务6-配图三.jpg" class="peitu3">
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                            端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                            端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                        </span>
                        <div class="suojin">
                            <span class="wenzhang3-container-2">
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                            </span>
                        </div>
                        <div class="suojin">
                            <span class="wenzhang3-container-2">
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                            端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                            </span>
                        </div>
                    </p>
                </div>
            </div>
            <div class="wenzhang4">
                <div class="peitu2">
                    <div class="peitu2-zhezhao">
                        <div class="peitu2-wenzi-biankuang">
                            <span class="peitu2-wenzi-zuo">前端技术</span>
                            <span class="peitu2-wenzi-you">前端技术前端技术</span>
                        </div>
                    </div>
                </div>
                <div class="wenzhang4-xia">
                    <div class="wenzhang4-xia-1">
                        <p class="wenzhang4-xia-1-juzi1"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
                            <span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
                            <span class="wenzhang4-xia-1-wenziyou">前端</span>
                        </p>
                        <p class="wenzhang4-xia-1-juzi2"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
                            <span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
                            <span class="wenzhang4-xia-1-wenziyou">前端</span>
                        </p>
                        <p class="wenzhang4-xia-1-juzi3"><span class="wenzhang4-xia-1-sanjiaoxing"></span>
                            <span class="wenzhang4-xia-1-wenzizuo">前端前端前端前端前端前端.................</span>
                            <span class="wenzhang4-xia-1-wenziyou">前端</span>
                        </p>
                    </div>
                    <div class="wenzhang4-xia-2-zuo">
                        <div id="wenzhang4-xia-2-zuo-1">0</div>
                        <div id="wenzhang4-xia-2-zuo-2">
                            <span id="wenzhang4-xia-2-zuo-2-wenzishang">ONE TWO<br>THREE FOUR FIVE</span>
                            <span id="wenzhang4-xia-2-zuo-2-wenzixia">hello world hello world<br> <br>hello world</span>
                        </div>
                    </div>
                    <div class="wenzhang4-xia-2-you">
                        <p>
                            <span class="yinhao-zuo">“</span>
                            <span class="wenzhang4-xia-2-you-wenzi">
                                hello world hello<br>
                                world hello world hello world hello world
                                hello world hello world hello world hello world
                                 hello world hello world
                            </span>
                            <span class="yinhao-you">”</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-xiabiao">ife.baidu.com</div>
        </div>
    </div>
</body>
</html>

    *{
    padding: 0;
    margin: 0;
}

body{
    height: 1386px;
     980px;
}

.waiweikuangzi{
     892px;
    margin-left: 300px;
    margin-right: 100px;
}

.top{
    border-bottom: 2px solid #938e8c;
}

task-list .task-content{display:block;padding:5px;background:#fff;-webkit-box-shadow:0 0 2px #949494;box-shadow:0 0 2px #949494}

#left-top-redImage{
     110px;
    height: 61px;
    margin-bottom: -5px;
}

.top>span{
    color: #d45d5c;
    float: right;
    font-size: 12px;
    margin-top: 47px;
}
/************************************************header*******************************************************/
.header{
     892px;
}

.header>.Images{
    display: block;
     641px;
    height: 301px;
    padding-top: 40px;
    float: left;
    padding-bottom: 40px;
}

.header-image-zhezhao-left{
    position: absolute;
     191px;
    height: 301px;
    background-color: green;
    opacity: 0.3;
    left: 300px;
    top:103px;
}

.header-image-zhezhao-right{
    position: absolute;
     191px;
    height: 301px;
    background-color: green;
    opacity: 0.3;
    left: 748px;
    top:103px;
}

.header-right{
    float: right;
     203px;
    height:301px;
    border-top: 2px solid #cc8091;
    margin-top: 40px;
}

.header-right-wenzi-1{
    font-family: "Microsoft YaHei";
    font-size: 24px;
    color: #000000;
    margin-top: 10px;
    text-decoration: underline;
}

.header-right-wenzi-2{
    font-family: "KaiTi";
    font-size: 12px;
    color:  #676767;
    margin-top: 10px;
}

.header-right-wenzi-3{
    font-size: 116px;
    color: #75b86b;
    font-family: "Microsoft YaHei";
    text-decoration: underline;
    font-style: italic;
}

.header-right-wenzi-4{
    margin-top: -20px;
}

#header-right-wenzi-4-1{
    font-size: 55px;
    color: #cc8091;
    font-family: "Microsoft YaHei";
}

#header-right-wenzi-4-2{
    font-size: 21px;
    color: #cc8091;
    font-family: "Microsoft YaHei";
    position: relative;
    top: -20px;
}

#header-right-wenzi-4-3{
    font-size: 12px;
    color: #cc8091;
    font-family: "Microsoft YaHei";
    position: relative;
    left: -35px;
}
/*****************************************MAIN***********************************/
.main{
     641px;
}

.main-left{
    float: left;
    padding-right: 30px;
}

#main-left-what-title{
    font-size: 16px;
    color: #418c59;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    text-decoration: underline;
}

#main-left-what-container{
    padding-top: 16px;
    font-size: 12px;
    color: #767777;
    font-family:SimSun-ExtB;
     230px;
    line-height: 16px;
}

.main-center{
     205px;
    float: left;
}

#main-center-when-title{
    font-size: 16px;
    color: #d2994f;
    font-weight: bold;
    text-decoration: underline;
}

#main-center-when-container{
    font-size: 12px;
    color: #231815;
    font-family: "Microsoft YaHei";
    line-height: 16px;
    opacity: 0.7;
    padding-top: 16px;
}

.main-right{
     130px;
    float: left;
    padding-left: 30px;
}

#main-right-how-title{
    font-size: 16px;
    color: #cc7680;
    font-weight: bold;
    text-decoration: underline;
}

#main-right-how-container-1{
    padding-top: 16px;
    font-size: 12px;
    color:#231815;
    font-family: "Microsoft YaHei";
    line-height: 16px;
}

.main-right-how-container-2{
    padding-top: 20px;
}

.main-right-how-container-2-1{
    line-height: 16px;
    font-size: 12px;
    color:#231815;
}

.main-right-how-container-2-2{
    font-size: 12px;
    color: #cd4a48;
    font-family: "Microsoft YaHei";
    font-style: italic;
    line-height: 26px;
    opacity:0.7;
}

/*文章三*/
.wenzhnag3{
     415px;
}

.wenzhang3-title{
     415px;
    border-bottom:2px solid RGB(17,69,108);
}

.wenzhang3-title-1{
    font-size: 72px;
    color: #f5e327;
    font-family: SimHei;
    font-weight: bold;
    font-style: italic;
}

.wenzhang3-title-2{
    font-size: 42px;
    color: #11456b;
    font-family: SimHei;
    font-weight: bold;
    line-height: 16px;
}

.wenzhang3-title-3{
    font-size: 33px;
    color: #11456b;
    font-family: SimHei;
    font-weight: bold;
}

.wenzhang3-container{

}

.wenzhang3-container-1{
    font-size: 70px;
    color:#f5e327;
    font-family: "Microsoft YaHei";
    float: left;
}

.wenzhang3-container-2{
    font-size: 12px;
    color: #767777;
    font-family: SimSun;
    line-height: 16px;
}

.peitu3{
    float: right;
    padding-left: 25px;
    padding-bottom: 15px;
    padding-top: 18px;
}

.suojin{
    text-indent: 2em;
}

.wenzhang4{
    float: right;
}

.peitu2{
    background-image: url("../Images/任务6-配图2.jpg");
    background-repeat: inherit;
     458px;
    height: 275px;
    position: relative;
    top: -615px;
    background-size: 458px 275px;
}

.peitu2-zhezhao{
    position: absolute;
    top: 210px;
     455px;
    height: 61px;
    overflow: hidden;
    background: black ;
    opacity: 0.5;
}

.peitu2-wenzi-biankuang{
    border-left: 3px #72b16a solid;
    height: 44px;
    position: relative;
    left: 40px;
    top: 10px;
}

.peitu2-wenzi-zuo{
    font-size: 26px;
    color: #ffffff;
    font-family: "Microsoft YaHei";
    padding-left: 15px;
}

.peitu2-wenzi-you{
    font-size: 12px;
    color: #72b16a;
    font-style: italic;
    font-family: "Microsoft YaHei";
    letter-spacing: 1px;
}

.wenzhang4-xia{
     459px;
    height: 318px;
    background-color: RGB(238,238,214);
    position: relative;
    top: -590px;
}

.wenzhang4-xia-1{}

.wenzhang4-xia-1-juzi1{
    padding: 30px 20px 10px 30px;
}

.wenzhang4-xia-1-juzi2{
    padding: 10px 20px 10px 30px;
}

.wenzhang4-xia-1-juzi3{
    padding: 10px 20px 15px 30px;
}

.wenzhang4-xia-1-sanjiaoxing{
     0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 14px solid red;
    position: relative;
    top: -16px;
    left: -10px;
}

.wenzhang4-xia-1-wenzizuo{
    font-size: 16px;
    color: #5a5b5b;
    font-family: SimSun;
    text-align: left;
}

.wenzhang4-xia-1-wenziyou{
    font-size: 16px;
    color: #5a5b5b;
    font-family: SimSun;
    text-align: right;
}

.wenzhang4-xia-2-zuo{
    background-color: rgb(213,93,92);
     260px;
    height: 160px;
}

#wenzhang4-xia-2-zuo-1{
    font-size: 110px;
    color: #ffffff;
    font-family: "Microsoft YaHei";
    padding: 15px 5px 30px 10px;
}

#wenzhang4-xia-2-zuo-2{
    border-left: 2px solid #ffffff;
    height: 86px;
    position: relative;
    left: 80px;
    top: -144px;
}

#wenzhang4-xia-2-zuo-2-wenzishang{
    font-size: 21px;
    color: #ffffff;
    font-family: SimHei;
    font-style: italic;
    padding-left: 5px;
    float: left;
    line-height: 24px;
}

#wenzhang4-xia-2-zuo-2-wenzixia{
    font-size: 12px;
    color: #ffffff;
    font-family: SimHei;
    line-height: 6px;
    padding-left: 10px;
    padding-top: 5px;
    float: left;
}

.wenzhang4-xia-2-you{
    position: relative;
    left: 300px;
    top:-300px;
     199px;
    height: 160px;
}

.yinhao-zuo{
    font-size: 72px;
    color: #d45d5c;
    font-family: SimHei;
    position: relative;
    float: left;
    left: -70px;
    top: 50px;
}

.yinhao-you{
    font-size: 72px;
    color: #d45d5c;
    font-family: SimHei;
    float: right;
    position: relative;
    top:-20px;
    left: -15px;
}

.wenzhang4-xia-2-you-wenzi{
    float: right;
    text-align: left;
    font-size: 14px;
    color: #5a5b5b;
    font-family: SimHei;
    font-style: italic;
    line-height: 16px;
    position: relative;
    top: -10px;
    left: -25px;
    text-indent: 2em;
}

.footer{
     892px;
    border-bottom: 1px solid #938e8c;
    position: relative;
    top: 40px;
}

.footer-xiabiao{
    font-size: 12px;
    color: #d45d5c;
    font-family: SimHei;
    float: right;
    position: relative;
    left: 455px;
    top: 5px;
}

     这里是材料图片：

    这里说一下，学东西的时候除了要平时多练，还要注意看书，最好是多看看一些官方文档，之后再自己练一遍，这样帮助会比较大。2017-09-28  16:30:09
  • 相关阅读:
    Django 数据导入和导出（数据库的迁移方法）
    【转】JSON Web Token 入门教程
    【转】详解drf中的ModelViewSet
    【转】Django 多数据库联用
    【转】django.contrib.auth之authenticate函数源码分析
    【转】Django-rest-framework
    django 自带用户认证系统 以及 自定义用户认证系统
    DRF 中接口设计，接口参数校验问题总结
    my read wood / zelkova / elm
    db CouchDB 2.1.2
  • 原文地址：https://www.cnblogs.com/sushuiheng/p/7607304.html
Copyright © 2020-2023  润新知