标签：
具体任务详细介绍可参考http://ife.baidu.com/task/all
具体代码参考：https://github.com/sunshineqt/webxt/tree/master/stage1
遇见的问题及解决：
任务1:
1 中文乱码
在<head></head>标签内加上<meta charset=”utf-8”>.
2 表单中method属性值
post和get两个属性值，一般选用post，安全性高。get是从服务器上获取数据；post是向服务器传送数据。get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3 图片插入文件路径的正确输入格式问题
<img src="images/0.jpg" alt="情深深" />
4 页面底部的版权输入方式
<p>版权所有©</p>
5 有序列表中用大写1还是小写1怎么设置？
根据li标签里面value值来进行设置从哪开始。
<ol>
<li value="1">排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
6 带上下箭头的下拉框，及默认选中项
城市：<select name="city" multiple size="1" style="height:18px">
<option value="合肥">合肥</option>
<option value="北京" selected>北京</option>
<option value="南京">南京</option>
<option value="杭州">杭州</option>
</select>
7 图片列表且每张图片右上角都有文字说明
<figure>
<figcaption>好看的图片</figcaption>
<img src="images/0.jpg" alt="情深深" width:"800px" height:"600px" />
</figure>
8 一行占了两列的问题
<td colspan="2">1000</td>
任务2：
1 Html中link链接外部样式表css文件
<head>
<link rel="stylesheet" type="text/css" href="外部样式表文件名.css" />
</head>
2 html中如何设置div的边框属性
（1.）添加外部样式
<style>
.div1{border:3px solid #000} </style>
<div class="div1">这是DIV1</div>
border为边框属性，1px为边框的宽度 1像素，solid为边框的样式 实线，#000为边框的颜色 黑色
(2.) 添加内部样式
<div style="border:1px solid #000">这是DIV1</div>
如果你想单独给左边框或右边框设置颜色，就这样定义，border-left:1px solid #000;
3 整个网页的背景？背景色？
背景颜色设置：background-color:gray;
背景图片设置：background-image:url("images/background.jpg");
4.表单中的对齐方式
将表单form中的元素放置在一个table里，然后通过设置table里元素属性的对齐方式来实现表单的对齐方式。
5.底部的版权所有字样怎么放置在一栏中的中间
通过设置padding属性及text-align属性
6 字体加粗
font-weight:bold;
7 关于提交submit按钮占满浏览器整个宽度问题
<p class="p1"><input type="submit" value="确认提交"width="100%"></p>
任务3：
1.关于两边固定宽度中间自适应的三栏布局
在body中将中间的div放在左右div的后面，然后css中左边左浮动，右边右浮动
2.关于三栏的高度不同，最长的高度溢出的问题
将整个容器css overflow属性设置auto，即overflow：auto；
overflow 属性规定当内容溢出元素框时发生的事情。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
任务4：
1.关于文字水平垂直居中问题
可以将line-height或者padding设置与height等高
2.div水平垂直居中问题
设置绝对定位，left、top各占50%，margin-left为-（width/2）;margin-top为-（height/2）
3.div边角弧度问题
相对于父元素进行绝对定位，设置height、width、及border-radius的相对应的值（取值相同，形成圆角弧度），另外要设置top、left、right、bottom取值，根据圆角所处不同的位置进行设置，比如
width: 50px;
height: 50px;
position: absolute;
top:0;
left:0;
border-radius: 0 0 50px 0;
为div左上角的半径为50的圆角弧度，根据一个圆一分为四来观察div每个角的圆角形状与圆的哪个四分之一相似，然后确定其位置。
4.关于圆角弧度设置IE浏览器不支持的问题
css hack（具体解决方案还待琢磨）
IFE 百度前端技术学院 2016年春季班作业 第一阶段任务（1-4）的总结
标签：
原文地址：http://www.cnblogs.com/haimengqingyuan/p/5375519.html
