前段学习之路——实践篇（二）

最新推荐文章于 2018-12-04 08:57:57 发布

gyt478922579

最新推荐文章于 2018-12-04 08:57:57 发布

阅读量400

点赞数 1

分类专栏： html+css JavaScript

本文链接：https://blog.csdn.net/gyt478922579/article/details/52475369

版权

html+css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Baidu_ife_2015 百度前端学院
task2

html：

<!--task2:盒模型及定位-->

<html lang="zh">
  <head>
    <meta charset="utf-8"/>
    <title>Hello World jQuery!</title>
    <script src="!%20jQuery.js"></script>
<link href="Baidu_ife_2015_task2.css" type="text/css" rel="stylesheet">

  </head>
    <body>
<!--两种方式实现div居中-->
        <div class="div1">hello</div>
        <div class="div2">hello</div>


<!--可复用的高度和宽度都自适应的圆角矩形-->
<div class="rtop">
    <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
    <div class="r4"></div>
</div>
<div id="mid"><p>有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p></div>
<div class="rtop">
    <div class="r4"></div>
    <div class="r3"></div>
    <div class="r2"></div>
    <div class="r1"></div>
</div>

<!--border-radius实现-->
<br/><br/>
<div class="div3"></div>
<br/><br/>   
<!--用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 -->
<!--1、绝对定位-->

    <div class="div4">
        <div class="div4_1">div4_1</div>
        <div class="div4_2">div4_2</div>
        <div class="div4_3">div4_3</div>
    </div>


<br/><br/>
<!--2、通过浮动实现 -->
    <div class="div5">
        <div class="div5_1">div5_1</div>
        <div class="div5_2">div5_2</div>
        <div class="div5_3">div5_3</div>
    </div>
<!--用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化-->

    </body>
</html>

css：

.div1{
    text-align: center;
    color: white;
    background-color: red;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
}

.div2{
    text-align: center;
    color: white;
    background-color: blue;
    width: 960px;
    margin: 0 auto;
}
#mid{height:250px; background-color: white; border-left: 1px solid black; border-right: 1px solid black;}
.rtop{display: block; background-color:white;}
.rtop div{display: block; height: 1px; overflow: hidden;}
.rtop .r1{margin: 0 3px; background-color: black;}
.rtop .r2{margin: 0 2px; border-left: 1px solid black; border-right: 1px solid black;}
.rtop .r3{margin: 0 1px; border-left: 1px solid black; border-right: 1px solid black;}
.rtop .r4{margin: 0 1px; border-left: 1px solid black; border-right: 1px solid black; height: 1px;}
#mid p{margin: 0; font-size: 12px; line-height: 24px; background-color: white; color: black; overflow: hidden; text-indent: 2em; white-space: pre-wrap; padding:0 10px;}



.div3{
    height:250px;
    width:250px;
    background-color: aquamarine;
    border: 2px solid black;
    border-radius:25px;
}

.div4{
    position:relative;
}
.div4_1{
    height:250px;
    width:100px;
    background-color:antiquewhite;
    position:absolute;

}

.div4_2{
    height:250px;
    background-color:pink;
    margin-left: 100px;

}

.div4_3{
    background-color: yellow;
    position:absolute;
    width:100%;
    height:30px;
}


.div5_1{
    height:150px;
    width:100px;
    background-color:antiquewhite;
    float:left;

}

.div5_2{
    height:150px;
    background-color:pink;
    margin-left: 100px;/*设为左边元素宽度值，避免浮动脱离文档流*/

}

.div5_3{
    background-color: yellow;
    width:100%;
    height:30px;
    clear:both;/*清除浮动影响*/
}