百度web-ife前端学院-task1学习笔记

用两种方法来实现一个背景色为红色、宽度为960px的
在浏览器中居中

实现思路为：一、利用设置左右margin为auto，自动居中；二、利用绝对定位和负边距来居中

html主要代码如下

<div class="div1">实现一个背景色为红色、宽度为960px的盒子在浏览器中居中利用margin</div>
<div class="div">
<div class="div2 margin">实现一个背景色为红色、宽度为960px的盒子在浏览器中居中利用绝对定位</div>
</div>

css主要代码如下：

.div1{
background-color: red;
width:960px;
height: 100px;
margin: 0px auto;
}

.div{
margin-top: 10px;
position: relative;
}
.div2{
background-color: red;
position: absolute;
left: 50%;
}

.margin{
width:960px;
height: 100px;
margin-left: -480px;
}

有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形


是实现思路为，利用几个高度为1px盒子的左右边线来画一个圆角

html代码如下：

<div class="div4">
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
<div class="top5"></div>
<div class="main">
有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
</div>
<div class="bottom5"></div>
<div class="bottom4"></div>
<div class="bottom3"></div>
<div class="bottom2"></div>
<div class="bottom1"></div>
</div>

CSS代码如下：

.div4{
margin-top: 50px;
overflow: hidden;
}
.top2, .bottom2, .top3, .bottom3, .top4, .bottom4, .top5, .bottom5{
height: 1px;
background: lightblue;
overflow: hidden;
}
.top1, .bottom1{
margin: 0px 5px;
border-top: solid 1px black;
}
.top2, .bottom2{
margin: 0px 3px;
border-left: solid 1px black;
border-right: solid 1px black;
}
.top3, .bottom3{
margin: 0px 2px;
border-left: solid 1px black;
border-right: solid 1px black;
}
.top4, .bottom4{
margin: 0px 1px;
border-left: solid 1px black;
border-right: solid 1px black;
}
.top5, .bottom5{
margin: 0px 1px;
border-left: solid 1px black;
border-right: solid 1px black;
}
.main{
height: 100%;
border-left: solid 1px black;
border-right: solid 1px black;
background: lightblue;
}

用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化


实现思路为：一、浮动和margin；二、相对布局

html代码如下：

<div>
<p>用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化</p>
<p>第一种：基于float和margin</p>
</div>
<div class="div5">
<div class="divA">divA</div>
<div class="divB">divB</div>
<div class="divC">divC</div>
</div>
<div>
<p>用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化</p>
<p>第二种：基于绝对定位</p>
</div>
<div class="div6">
<div class="divA1">divA</div>
<div class="divB1">divB</div>
<div class="divC1">divC</div>
</div>

CSS代码如下：

.divA{
width: 100px;
height: 100px;
background-color: red;
float: left;
}

.divB{
height: 100px;
background-color: blue;
margin-left: 100px;
}

.divC{
height: 100px;
width: 100%;
background-color: khaki;
}

.div6{
position: relative;
}
.divA1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}

.divB1{
height: 100px;
background-color: blue;
margin-left: 100px;
}

.divC1{
height: 100px;
width: 100%;
background-color: khaki;
}

用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

实现思路为：一、浮动和左右margin(注意盒子顺序)；二、浮动和负边距实现

html代码如下：

<div class="div7">
<div class="diva"></div>
<div class="divc"></div>
<div class="divb"></div>
</div>

<div class="div8">
<div class="diva1"></div>
<div class="divb1"></div>
<div class="divc1"></div>
</div>

CSS代码如下：

.diva{
float: left;
width: 100px;
height: 100px;
background-color: red;
}

.divb{
margin: 0px 100px;
background-color: blue;
height: 100px;
}

.divc{
float: right;
width: 100px;
height: 100px;
background-color: red;
}

.div8{
margin-top: 50px;
padding: 0 100px 0 100px;
}
.diva1{
float: left;
width: 100%;
height: 100px;
background: red;
}

.divb1{
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
position: relative;
left: -100px;
background: blue;
}

.divc1{
float: left;
width: 100px;
height: 100px;
margin-left: -100px;
position: relative;
right: -100px;
background: blue;
}

实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化




html代码如下：

<div class="clr"></div>
<div class="div9">
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="flexbox"></div>
<div class="clr"></div>
</div>

CSS代码如下：

.div9{
background-color: red;
overflow: hidden;
margin-top: 50px;
}

.flexbox{
float: left;
margin: 10px 10px;
width: 300px;
height: 300px;
background-color: blue;
}

.clr{
clear: both;
}

以上效果可点击查看