具体任务详细介绍可参考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. BZOJ 1513 [POI2006]Tet-Tetris 3D

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1513 题意:三维空间,有一些立方体在垂直下落.立方体的左下角坐标(x,y)以及长宽 ...

  2. SQL分组查询每组前几条数据

    /*第一种实现方法,效率低并且有错误*/ DECLARE @DD DATETIME SET @DD = GETDATE() SELECT a.GoodsID , a.Account , a.LastU ...

  3. 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互（点击、触摸）事件

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  4. iOS - Swift NSKeyedArchiver 数据归档

    前言 public class NSKeyedArchiver : NSCoder public class NSKeyedUnarchiver : NSCoder 在 OC 语言中,归档是一个过程, ...

  5. spring对事物的支持

    <!-- 事务管理器 对mybatis操作数据库事务控制,spring使用jdbc的事务控制类 --> <bean id="transactionManager" ...

  6. poj2826An Easy Problem?!

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

  7. thinkphp分页显示

    先在Common\Comon里建一个function.php公共方法,然后在里面新建一个getpage方法,代码如下: <?php /** * TODO 基础分页的相同代码封装,使前台的代码更少 ...

  8. Object Pascal 控制语句

    控制语句 1．常量声明语句常量在声明时就被赋予了一个值,在程序执行过程中是不可改变的. 格式 const 常量名 :数据类型 = 值 下面的例子声明了3 个常量: const Pi = 3.14159 ...

  9. iOS开发之Xcode 6更新默认不支持armv7s架构

    最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? 目前的Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64,当然这个定 ...

  10. JavaScript设计模式-单例模式、模块模式（转载 学习中。。。。）

    (转载地址:http://technicolor.iteye.com/blog/1409656) 之前在<JavaScript小特性-面向对象>里面介绍过JavaScript面向对象的特性 ...