IFE2015-task1

1、用HTML实现如下简单界面

html代码：

MyGithubAccountName

Homepage
Blog

这是二级标题
这是我的第一个HTML页面，这里有一个文字段落

2、用CSS为上面界面增加样式

css代码：

h1{color:blue;}
h2{font-size: 14px;}
p {background-color: black; color:yellow; font-size: 12px; width: 300px;}
img{border-color: red;border-style: solid;;border-width: 2px}

6.1、实现一个背景色为红色、宽度为960px的

在浏览器中居中

思路：用margin: 0 auto;

background: red; width: 960px; height:100px;margin: 0 auto;

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

思路：用几个小div的左右边框线近似表示圆角，各个小div的margin值依次减小再增大

html代码：

css代码：

.circle{width: 100px;height: 50px;margin-top: 60px;overflow: hidden;}
.div2, .div3,.div4,.div5{height: 1px;background: lightblue;overflow: hidden;}
.div1{margin: 0px 5px;border-top: solid 1px black;}
.div2{margin: 0px 3px;border-left: solid 1px black;border-right: solid 1px black;}
.top3{margin: 0px 3px;border-left: solid 1px black;border-right: solid 1px black;}
.div4{margin: 0px 1px;border-left: solid 1px black;border-right: solid 1px black;}
.div5{margin: 0px 1px;border-left: solid 1px black;border-right: solid 1px black;}
.main{height: 20px;border-left: solid 1px black;border-right: solid 1px black;background: lightblue;}

如果用border-radius的话代码如下：

.circle2{width: 100px;height: 50px;border: solid 1px black;border-radius: 15px;overflow: hidden;}

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

.div1{background-color: red; width:100px; float: left;}
.div2{background-color: blue; }
.div3{background-color: yellow; width: 100%;}

6.4、实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

思路：1、浮动+margin   2、父盒子相对定位，子盒子绝对定位

html代码：

div-A
div-B
div-C

css代码：

.main{margin: 0 auto;position: relative;}
.left{background-color: red; width:200px;  position: absolute;left: 0;top: 0;}
.middle{background-color: blue; margin:0 200px;}
.right{background-color: yellow; width: 200px;position:absolute; right: 0;top: 0;}

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

      

html代码：

css代码：

.wrap{background-color: red;overflow:hidden;}
.box{float: left; width: 100px; height: 100px; background-color: blue; margin:10px;}