具体任务详细介绍可参考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. 2016年2月18日 JAVA基础

    运行JAVA之前,必须将系统环境变量进行配置. 如果是32位的计算机安装的JDK版本必须是32位的,如果是64位的计算机安装的JDK版本必须是64位的,两者不可忽视,以免程序无法正常启动. 具体更改方 ...

  2. HIP-HOP 漫画家 Skottie Young

     http://blog.sina.com.cn/s/blog_67e59b160100v9ib.html           以上是部分预览图! 下载地址: 29  MB=   127  张 yy语 ...

  3. 面向对象的JavaScript系列一，创建对象

    1.最简单的创建对象方法 var person = new Object(); person.name = "sam wu"; person.age = 25; person.jo ...

  4. 面向对象---prototype

    构造函数里的this,外面的new <script> //用工厂方式构造对象 function createPerson(name, sex) //构造函数 { //假想的系统内部工作流程 ...

  5. S3C2440的GPIO编程

    一.初步认识S3C2440A [S3C2440A简介] S3C2440A是三星公司推出的基于ARM920t内核的32/16位RISC微处理器.主要用于手持设备和中高端电子产品中.它内部集成16k数据c ...

  6. iOS - AFNetworking 网络请求

    前言 在 iOS 开发中,一般情况下,简单的向某个 Web 站点简单的页面提交请求并获取服务器的响应,用 Xcode 自带的 NSURLConnection 是能胜任的.但是,在绝大部分下我们所需要访 ...

  7. STRUTS2 标签 循环次数

    *<s:property value="menus.size()"/> * <s:if test='menus.size()>8'>    sssss ...

  8. eclipse查看jdk源码，及反编译查看

    jdk中的包: dt.jar是关于运行环境的类库,主要是swing的包 tools.jar是关于一些工具的类库 rt.jar包含了jdk的基础类库,也就是你在java doc里面看到的所有的类的cla ...

  9. js之oop <一> 创建对象，构造器(class)

    js中除了基本类型,就是对象.可以说在js中处处皆对象. 由于js是弱语言,在编写的过程中很容易混淆 object 和 class 也就是对象和构造器. object(对象):一般对象都由var关键字 ...

  10. 线程高级应用-心得5-java5线程并发库中Lock和Condition实现线程同步通讯

    1.Lock相关知识介绍 好比我同时种了几块地的麦子,然后就等待收割.收割时,则是哪块先熟了,先收割哪块. 下面举一个面试题的例子来引出Lock缓存读写锁的案例,一个load()和get()方法返回值 ...