html学习笔记——ife task0001

花了两三天大概看完html和css基本用法，但到自己布局的时候还是很懵不知道从哪里入手啊，就找了个简单的任务（ife2015 spring）试一下。

之前不涉及到布局的跳过，从涉及到position和float的开始，这一块看的有点晕，结合下面的例子搞懂了。

例：用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中。我用了三种方法。代码如下：

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="task0001_css.css">
<title>task0001</title>
<style type="text/css">
a:link {text-decoration: none;}
a:visited {color: black;}
a.hover{text-decoration:underline;}
a:active {color:yellow;}
</style>
</head>
<body>
<h1> MyGitbubAccountName:SMQ</h1>
<ul>
<li>
<a href="https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0001"><span>homepage</span></a>
</li>
<li>
<a href="http://www.douban.com" target="_blank"><span>douban</span></a>
</ul>
<h2>这是二级标题</h2>
<p>这里有一个文字段落这里有一个文字段落    
这里有一个文字段落这里有一个文字段落
</p>
<div class="box1">div1</div><br>
<div class="centerbox">
<div class="box2">div2</div>
</div><br>
<div class="box3">div3</div>
</body>
</html>

h1 {color: blue}
h2 {font-size: 14px}
p {
    font-size: 20px;
    color: #FFFF00;
    background-color: gray;
    text-indent: 50px;
    text-decoration: blink underline;
    text-transform: capitalize;
    text-align:left;
    word-spacing: 3px;

}
.box1{ background-color:red;
    width: 960px;
    position: relative; /*如果用absolute 换行符br就没用了*/
    left:50%;
    margin-left: -480px; /*画图看为什么可以这样，总结*/
    }
.centerbox{
    width: 960px;
    position: relative;
    left: 50%;
}
.box2 {
       background-color:blue;
       position: relative;
       left: -50%;
}
.box3{ 
    background-color:blue;
    width: 960px;
    margin:  auto;
    }

box1 box2 box3 分别对应三种实现方法。注意属性不能用数字开头，一开始我直接命名为123无效。

先说box1:使用position:relative对div元素相对定位，是相对于他本来的位置，即浏览器界面的最左端来说的，然后用left:50%将其左移50%，是相对整个浏览器界面的50%，然后再用margin-left: -480px把div移到中间位置。

box2:先设定一个往左移了50%的父元素，然后在子元素中使用left:-50%移到中间。

box3:使用margin:auto让浏览器自动设置外边距。

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

一种用浮动，一种用绝对定位实现。

/*用浮动实现：*/

.c1 {    float:left;
    background-color:yellow;
    width: 200px;
    height: 300px;
    }
.c2 {
    background-color:blue;   
    width: 100%;
    height: 300px;
}
.c3{
    clear:both;
    background-color:green;
    height: 50px;
}
/*用绝对定位实现*/#c{
    position:relative;
}
.c1{
    position:absolute;
    background:yellow;
    width: 200px;
    height:300px;
    top:0;
    left:0;
}
.c2{
    background:blue;
    margin-left: 200px; /*两列布局只需要一个absolute??
    没有position时不能用width=100%会出错*/
    height:300px;
}
.c3{
    position: absolute;
    width:100%;
    background: green;
    top: 300px;
    height:50px;

}

还有用flex实现：

<!DOCTYPE html>
<html lang="zh-EN">
<head>
<meta charset="UTF-8">
<title>first</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<!--<div id="center1">背景红色，宽度960px</div>
        <div id="center2">背景红色，宽度960px</div>-->
<div id="wrap1">
<div class="a1">diva</div>
<div class="b1">divb</div>
</div>
<div id="wrap2">
<div class="c1">divc</div>
</div>

</body>
</html>

#wrap1 {
    display: flex;
    flex-direction: row;
}

.a1 {
    background-color: red;
    display: flex;
    flex: 0 1 300px;
}
.b1 {
    background-color: blue;
    display: flex;
    flex: 1 1 auto;
}
#wrap2 {
    display: flex;
    flex-direction: column;
}
.c1 {
    background-color: yellow;
    display: flex;
}

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

还是用浮动+margin 和绝对定位实现，但是我的浮动实现有问题，还没有找到解决方法。

两种方法的代码：

/*父盒子+绝对定位实现*/
/*#column3{
    position:relative;
}
#left{
    position:absolute;
    top:0;
    left:0;
    background:yellow;
    width: 200px;
}
#right{
    position:absolute;
    top:0;
    right:0;
    background:green;
    width:200px;
}
#middle{
    margin-left:200px;
    background:red;
}*/
/*浮动实现，代码和网上很多人的一样，但是实现出来有问题*/
#column3{
    width:100%; margin:0 auto;
}
#left{
    float:left;
    background:yellow;
    width:100px;
    height:100px;
}
#middle{
    margin-left:110px;
    margin-right:110px;
    background:green;
    height:100px;
}
#right{
    float: right;
    background:red;
    width:100px;
    height:100px;
}

用浮动实现的截图：

html学习笔记——ife task0001

总有一块不上去，不知道是怎么回事啊。。。

http://www.iyunlu.com/view/css-xhtml/55.html 一篇讲的很好的博客，主要解决的是高度塌陷问题，可我在火狐浏览器中没有遇到。。。。现在还看不太懂，好不容易搞懂浮动脱离于文档流了/相对定位和绝对定位的关系了。用flex布局实现：

#col32 {
    display: flex;
    flex-direction: row;
}
.a2 {
    display: flex;
    background-color: red;
    flex: 0 1 10em;
    height: 50px;
    order: -1;
}
.b2{
    display: flex;
    background-color: blue;
    flex: 1 1 auto;
    height: 50px;
}
.c2 {
    display: flex;
    background-color: yellow;
    flex: 0 1 12em;
}

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

#wrap{
    background:red;
   overflow:hidden;
}
.box{
    float:left;
    margin: 10px;
    width: 150px;
    height: 70px;
    background:blue;
}

用flex实现：

.wrapper {
    background-color: red;
    display: flex;
    flex: 1 0 auto;
    height: 300px;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
}
.box {
    background-color: blue;
    display: flex;
    flex: 0 1 160px;
    height: 80px;
    margin: 0 10px;
}

圣杯布局和双飞翼布局(用盒模型实现)：http://www.cnblogs.com/tinyphp/p/4742922.html, http://www.cnblogs.com/tinyphp/p/4743674.html这两篇文章写得非常全面了，自己也实现了一遍，以后没事的时候再拉出来试试。要反复写加深理解。

用flex布局（弹性布局）实现圣杯布局：

#column3{
    display: flex;
    flex-direction: row;  
}
#left{
    display:flex;
    flex: 0 0 12em; 
    background:red;
    order:-1;
}
#middle{
    display:flex;
    flex: 1;
    background:green;
}
#right{
    display:flex;
    flex: 0 0 12em;
    background: yellow;
}

秒客网

html学习笔记——ife task0001

相关文章