具体任务详细介绍可参考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. Creating Excel File in Oracle Forms

    Below is the example to create an excel file in Oracle Forms.Pass the Sql query string to the below ...

  2. [HIHO119]网络流五·最大权闭合子图（最大流）

    题目链接:http://hihocoder.com/contest/hiho119/problem/1 题意:中文题意. 由于1≤N≤200,1≤M≤200.最极端情况就是中间所有边都是满的,一共有N ...

  3. session 登陆浏览，并实现session注销登陆

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. Github上不错的Android开源代码（一）

    总有一些朋友很热心的整理一些好的资料,在收集之后,可以用作阅读.学习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) 为了防止以上链接失效,以及部分内容丢 ...

  5. 微信公众平台开发详细步骤与java代码

    1.微信公众平台设置 首先在https://mp.weixin.qq.com/注册一个公众平台账号(服务号.订阅号.企业号的区别) 微信公众平台地址:https://mp.weixin.qq.com ...

  6. [转]-Gradle使用手册（三）：构建任务

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Using-sourceCompatibility-1. ...

  7. iOS - Threads 多线程

    1.Threads 1.1 进程 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开 QQ.Xcode,系统就会分别启动两个进程. ...

  8. c++ string的实现。

    第三次做了.只是做个复习.偶然发现之前的版本有内存泄露.基本功还是不过关.这次应该没有内存泄漏了.虽然是个简单版本. 1)了解堆,栈,值copy. 2)几个常用的c的字符函数和c中的char 如何表示 ...

  9. json与jsonp应用及其他ajax数据交互方式

    1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...

  10. poj2826An Easy Problem?!

    链接 繁琐细节题. 1.线段无交点时,ans=0; 2.如图 假设过p3.y的水平线与p1p2相交 因为雨是垂直下落的,左图的情况是无法收集到雨水的,而这种情况有一种简便的判定方式 cross(p1- ...