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

2018-06-24 01:54:54来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

<!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;
    width: 980px;
}

.waiweikuangzi{
    width: 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{
    width: 110px;
    height: 61px;
    margin-bottom: -5px;
}

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

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

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

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

.header-right{
    float: right;
    width: 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{
    width: 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;
    width: 230px;
    line-height: 16px;
}

.main-center{
    width: 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{
    width: 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{
    width: 415px;
}

.wenzhang3-title{
    width: 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;
    width: 458px;
    height: 275px;
    position: relative;
    top: -615px;
    background-size: 458px 275px;
}

.peitu2-zhezhao{
    position: absolute;
    top: 210px;
    width: 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{
    width: 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{
    width: 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);
    width: 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;
    width: 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{
    width: 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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Web前端开发规范文档你需要知道的事

下一篇:vue的iview列表table render函数设置DOM属性值的方法