zoukankan      html  css  js  c++  java

  • 百度前端技术学院练习-任务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
  • 相关阅读:
    Linux-文件目录管理
    20. 有效的括号
    242. 有效的字母异位词
    387. 字符串中的第一个唯一字符
    136. 只出现一次的数字
    14. 最长公共前缀
    268. 丢失的数字
    169. 多数元素
    26. 删除有序数组中的重复项
    283. 移动零
  • 原文地址：https://www.cnblogs.com/sushuiheng/p/7607304.html
Copyright © 2011-2022 走看看