具体任务详细介绍可参考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="data:images/0.jpg" alt="情深深" />

4 页面底部的版权输入方式

<p>版权所有&copy</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="data: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）的总结的更多相关文章

  1. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  2. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  3. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  4. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  7. 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

    HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...

  8. 百度前端技术学院task16源代码

    欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3 ...

  9. 百度前端技术学院-基础-day20-21

    第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...

随机推荐

  1. bam/sam格式说明

    在SAM输出的结果中每一行都包括十二项通过Tab分隔,从左到右分别是: 1 序列的名字(Read的名字) 2 概括出一个合适的标记,各个数字分别代表 1     序列是一对序列中的一个 2     比 ...

  2. 参数（条件表）灵活配置GS01/GS02/GS03

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. MySQL SELECT语句

    说明:MySQL的offset第一行是0 位置指的是在SELECT语句中第几个出现的字段,如:1,则代表用第一个出现的字段来分组. SELECT语句: SELECT  select_expr1 [,s ...

  4. 指令随笔之：tail、cat、scp、&、&&、;、|、>、>>

    tail(中文意思是跟踪)   tail默认只看文件的最后10行内容,cat则一次显示全部内容 ping 192.168.120.204 > zyx.log &    #  &表 ...

  5. SQL 语句转换格式函数Cast、Convert

    CAST和CONVERT都经常被使用.特别提取出来作为一篇文章,方便查找. CAST.CONVERT都可以执行数据类型转换.在大部分情况下,两者执行同样的功能,不同的是CONVERT还提供一些特别的日 ...

  6. 利用JDK的中Proxy动态代理实现Spring的AOP技术

    首先给出设计模式静态代理与动态代理的学习: http://layznet.iteye.com/blog/1182924   讲的不错 然后我们实现AOP 就要求我们对委托的所有方法的调用实现拦截 代理 ...

  7. JUnit 简单的使用 （学习转载）

    JUnit4使用Java5中的注解(annotation),以下是JUnit4常用的几个annotation: @Before:初始化方法   对于每一个测试方法都要执行一次(注意与BeforeCla ...

  8. iOS - UIStoryboard

    前言 NS_CLASS_AVAILABLE_IOS(5_0) @interface UIStoryboard : NSObject @available(iOS 5.0, *) public clas ...

  9. 手机CPU知识扫盲：谈谈手机CPU架构与原理 (全

    CPU是手机上面最复杂,最贵的Soc(芯片),担任的也是手机中大脑的位 置,是手机跑分性能的决定性硬件.智能手机发展到今天,各大手机CPU厂商也从春秋战国逐渐到了现在四国鼎立的时代(高通,MTK,三星 ...

  10. [js] 函数节流

    原文链接:http://www.alloyteam.com/2012/11/javascript-throttle/