Skip to content

Yuanbin-xavier/Baidu_ife

 
 

Repository files navigation

百度前端技术学院任务提交代码及笔记

About

我的团队:http://ife.baidu.com/group/profile?groupId=2852

最终任务已移至单独仓库:https://github.com/yuanguangxin/Questionnaire

还是决定从0基础开始做任务,通过这第一个最简单的连CSS都没有的任务,复习了基础知识,看了大家 的代码,知道了许多之前不知道的标签,发现大家每个人写的都不一样,都有自己的特色,或许这就是 前端的魅力吧。

Label and Point

1.除了之前学习的有序列表<ol>和无序列表<ul>,还知道了自定义列表<dl>,自定义列表以<dl>标签开始。 每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始.

<dl>
  <dt>计算机</dt>
  <dd>用来计算的仪器 ... ...</dd>
  <dt>显示器</dt>
  <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

2.Html5语义化标签的使用,如<nav>标签,<aside>标签,<time>标签,<article>标签,<header>标签,以及<figure>,<figcaption>标签等.

3.利用 maxlength 和 minlength 属性来控制 input 标签输入的最大长度及最小长度.

<input type="password" minlength="6" maxlength="16"/>

4.利用pattern属性匹配正则表达式来验证输入格式.

<input type="password" pattern="[A-Za-z0-9\-]*" placeholder="这是一个只能输入英文字母和数字的密码输入框"/>

5.font-variantfont-transform的使用

(1)font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写, 但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-variant:small-caps  //浏览器会显示小型大写字母的字体。

(2)text-transform 属性控制文本的大小写

text-transform:none; //文本中的每个单词以大写字母开头
text-transform:capitalize; //文本中的每个单词以大写字母开头
text-transform:uppercase; //定义仅有大写字母
text-transform:lowercase; //定义无大写字母,仅有小写字母

6.box-sizing的使用 为了简便计算,使用box-sizing,box-sizing元素的内边距和边框不再会增加它的宽度

box-sizing:border-box;

7.calc的使用 同样为了简便计算,calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说width:calc(50% + 2em), 这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个任务交由浏览器去计算。

	width: calc( 16.666% - 20px );

Releases

No releases published

Packages

No packages published

Languages

  • HTML 60.7%
  • CSS 22.9%
  • JavaScript 16.4%