前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~

在此之前先为大家显示下前端工程师的路线图:

第六天的笔记:HTML AND CSS:

text-center class属性:文本居中:

例:your text

btn class属性:Bootstrap风格按钮:

例:按钮

btn-block class属性:使其按钮填满水平空间:

例:按钮

注意:添加btn-block时,也需要btn class属性。

btn-primary class属性:深蓝色:

例:按钮

btn-info class属性:浅蓝色:

例:按钮

btn-danger class属性:红色:

例:按钮

Bootstrap 的12栏栅格布局。

[row class属性:响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。

col-md-* class属性:md 表示 medium (中等的),* 代表一个数字,它指定了这个元素所占的列宽。

(笔记本屏幕)

col-xs-* class属性:xs(应用于较小的屏幕,比如手机屏幕),* 是需要填写的数字,代表在一行中,

各个元素应该占的列宽。

例:

Like

Info

Delete

]注意:由于4+4+4=12.刚好平分Bootstrap的12栏布局。所以每个按钮占的部分相等。

标签:创建文本内元素:text

例:textlove

结果:textlove(love是红色)

Font Awesome图标库:一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式

中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会

继承其父HTML元素的字体大小。

i元素:起初一般是让其它元素有斜体(italic)的功能,不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i

元素中,把它变成一个图标

例:

fa fa-thumbs-up:赞图标

谢谢大家观看~

本文来自企鹅号 - 极客AND编程媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3199
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

6649
来自专栏熊二哥

Html与CSS快速入门03-CSS基础应用

这部分是html细节知识的学习。 ? ? 边框、填充、对齐和浮动 这部分将主要介绍使用CSS控制整个Web页面的各个方面,通常来说,会使用margin(外部)...

2418
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2826
来自专栏IMWeb前端团队

为元素添加边框,你有多少种好办法?

背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成...

2207
来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

2759
来自专栏Coco的专栏

【前端攻略】最全面的水平垂直居中方案与flexbox布局

1783
来自专栏数据小魔方

打破常规的图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善的商务图表的元素应该如何布局! 可能很多小伙伴儿会有疑问,默认的输出图表样式跟最终我们想要达到的效果相差十万八千里。想要在...

3467
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

6818
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

892

扫码关注云+社区

领取腾讯云代金券