本来这篇文章是要更前端核心框架的,但我学生在公司跟领导处理项目的事情,让我痛定思痛,再给大家来一篇这样的文章,
希望大家能够认真的笔记并消化。
前端就是思维+转变的一个东西,它富有灵魂,当你沉醉其中,里面的诸多奥秘就会让你流连忘返,深沉品味。
前端的技术一直更新特别快,特别是框架这块。
但是归根结底,那都是后话,因为我们要想在企业站住脚步,扎根就一定要稳,跟做人是一个道理。起步可以慢,但是我们掌握了一定的技巧后,我们可以融会贯通,做事情事半功倍!
今天给大家带来的第三节课:核心语法阶段——html/css(表格与表格布局)
大家想学习好前端,CSS就是你的脸面,就是你的气质。你的样式结构让人看上去赏心悦目,
你就要像对待自己的穿着一样对待你的代码。
要不厌其烦,要耐心审视。扎实好基础,最近看书,感觉受益匪浅,专门记录自己的学习补充过程。
本文主要讨论表格的布局及美化。首先我们来看HTML中表格包含哪些标签及属性。
表1:表格标签及属性
其中有几个属性是我们常用来实现表格布局及美化的:
CSS中的表格是一种布局方式,它比较适合内容需要分栏时使用。而HTML中的表格,是确确实实存在表格数据的。
说起表格,大家脑海里就会浮想起行和列来。我们可以把CSS表格想象成一个电子表格,一个个单元格组成,
在每个单元格里会包含一个HTML块元素。
在表格中增加HTML结构时,我们先要创建一个< div>.这个< div>代表着整个表格。再在每一行里创建一个< div> 。每一列里包含着一个块元素作为它的内容。(两个块元素 “main”(div) 和”sidebar”< div> 是不是很简单呢?
HTML:
…
<div id=”tableContainer>
<div id=”tableRow”>
<div id=”main”>
…
</div>
<div id=”siderbar”>
…
</div>
</div>
</div>
…
CSS创建表格显示:
//这是最外层的<div>
div#tableContainer{
display:table; //设置显示方式为表格
}
//tableRow 表示表格中的一行,如果我们有多行,可以使用一个类
div#tableRow{
display: table-row;
}
#main{
display:table-cell; //作为表格单元格形式
font-size:105%;
....
}
#siderbar{
display:table-cell;
padding:15px;
…….
}
HTML中的表格就是真正意义上的表格了,它由行列,单元格组成,每个单元格里面存放了一些数据。
我们来看个简单的表格
<table>
<caption>这是一个表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20/td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>小名/td>
<td>女</td>
<td>30</td>
</tr>
</table>
我们还可以合并单元格,合并行:rowspan 合并列:colspan
在为表格设置CSS样式时,我们需要注意到的是,我们不能单独地设置单元格的“外边距”,
而是要为所有单元格设置一个共同的间距。表格的单元格是没有外边距的。关于表格的CSS样式我就不多提了,
因为毕竟文章的重点不在这。
前端学习要想精就得静,静下心来,看上去知识点很多很杂,但是你把文章
点赞或者收藏起来,
每次写代码的时候对应着写,代码有时候就像一杯茶,得品,你自然而然意境就和别人拉开差距。