具体任务详细介绍可参考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. JAVA_输入输出流 异常处理

    输入输出流 文件创建

  2. 【转载】COM的多线程模型

    原文:COM的多线程模型 COM的多线程模型是COM技术里头最难以理解的部分之一,很多书都有涉及但是都没有很好的讲清楚.很多新人都会在这里觉得很迷惑,google大神能搜到一篇vckbase上的文章, ...

  3. 【转载】如何系统地自学 Python?

    原文:如何系统地自学 Python? 作者:彭猫 本文由 知乎 彭猫 授权发布,版权所有归作者,转载请联系作者! 是否非常想学好 Python,一方面被琐事纠缠,一直没能动手,另一方面,担心学习成本太 ...

  4. 手把手教你把Vim改装成一个IDE编程环境(图文)

    http://blog.csdn.net/wooin/article/details/1858917

  5. 【转】The decoupling capacitor…is it really necessary?

    Before working as an applications engineer, I worked as an IC test development engineer here at TI. ...

  6. UVA 12898 - And Or 数学

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  7. 坐标随鼠标移动 jquery简易版

    <html> <span style="position:absolute" id="xy_test"></span> &l ...

  8. Scrum Meeting---Eight(2015-11-3)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 数据库与客户端通讯 5h 服务器与客户端通讯测试 4h 胡亚坤 好友添加 2h 好友添加 2h 刘猛 ...

  9. RFC总结-SD模块

    1.客户主数据1.1 创建.修改客户主数据*该函数更新所有字段,X表用来新增和修改,Y表为删除  CALL FUNCTION 'SD_CUSTOMER_MAINTAIN_ALL'   EXPORTIN ...

  10. MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误解决办法

    打开所在的wordspace文件夹,在下面子文件夹 .metadata\.plugins\org.eclipse.core.runtime\.settings\com.genuitec.eclipse ...