近期项目处于准备阶段,于是工作时间便多出很多时间。我便趁着这个机会把前端必走之路的HTML+CSS系统的学习了一遍。由于之前工作中也有接触这两门技术,所以并不是零基础开始。即便如此,我还是从最基本的开始了。下面简单列下步骤:
1.W3School中的HTML教程:HTML、CSS、XHTML、TCP/IP;建站手册:网站构建、万维网联盟、浏览器信息、网站品质。
每个属性都过了一遍,其中对不知道的知识做了笔记。另,JavaScript、jQuery没有再看(JS原来看过很多次了,jQuery则看了源码)知识做了里面的测试题,题目通过率还是有98%的。
里面还有些没有看,如HTML DOM。
2.开始转向慕课网里面的视频,找到HTML/CSS,从初级开始看起。最先看的是HTML+CSS基础,这真的是从零开始的课程,我选从我不熟的章节开始。由于处女座的完美主义纠结,后来还是把没看的也补了,只会显示个100%(-。-)
看基础同时疲倦了就再找了个稍偏上层次点的:网页布局基础,讲网页布局的几种解决方案。这里面几种基础的自己也是掌握的,也就做了下里面的编程挑战,线下做了几个页面。
接着看了《SEO在网页制作中的应用》,还挺有趣的,这个只是听过,倒真没有了解过。再就是找了个好玩的看了《帝都抢车位动画制作》。动画也是自己没涉及到的,虽是看完了,但确实不多练几次还是没掌握。
后来又看了中级篇的《如何用css进行网页布局》、《固定层效果》,这时已经看的差不多了,就专门留了时间自己动手写了个百度首页。在做的过程中,发现还是有很多情况不知用什么属性。问了专业同事,说刚开始都是这样,多做就熟了。说他现在还有记不住的。听到这话,我稍稍的放了下心。
紧接着继续选了中级篇里面实战的课程,如导航菜单的制作、网页制作结构与表现原则等,最近看完了(昨天)就是《CSS3扁平化风格博客》。这里不得对这课的老师表示赞呢,写法熟练之外还很优美,比如分屏写、快捷键、解决问题思路。通过看老师编写的过程也发现了一些小技巧的实现并做了笔记。
3.不看视频时候,在浏览各网页时就习惯性的看下人家的html结构,css实现。刚刚把项目里的css代码看了一遍,主要是找自己不认识的属性,然后查对应,并做笔记。也动手做了几个页面,越往后越不理想,容易被视频里节奏带走。这时自己没有一个清晰的思路,自然是做不好。
这个过程下来,发现虽有那么多视频,但实质内容大多不逃那些,都是类似的。可却也会有讲解人理解不同,对同一问题有不同见解的。刚开始时自己还挺疑惑的,中间也有问这专业同事,后来索性随自己理解了。如果根据自己的理解去做时有困难,错误,再去寻找答案。
然后,也是深深赞同那个同事和我说的:这东西得多练,做的多了自然就熟了。就像自己看了那么多视频,记住的还是不多,特别是本来就不熟悉的属性。在写页面时,去查了很多属性在课程里都见过…
现在的方向是想再通篇学下HTML5、CSS3,当然属性更是记不住了,只是自己看到了不会的就还是去查下,顺便做记录。
现在便把自己这段时间做的笔记搬上来。
css特殊性
1 当多个样式应用在一个元素上时,浏览器根据权值来判断具体使用的
权值规则:
标签的权值为1;类选择符的权值为10;ID选择符的权值最高为100。
继承也有权值但最低(0.1)
2 需指定某个样式为最高权值 !important,如:p {clolor:red !important;}
3 {font-style:italic;} 设置为斜体
4 p{text-indent:2em;} 段落排版 2个缩进 2em:文字的2倍大小
5 p{line-height:2em;} 行间距(行高)
6 {word-spacing:20px;} 字间距; 字母间距:letter-spacing:1px;
7 当内容溢出元素框时的处理 :overflow:
值
描述
visible |
默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden |
内容会被修剪,并且其余内容是不可见的。 |
scroll |
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto |
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit |
规定应该从父元素继承 overflow 属性的值。 |
8 为元素添加圆角边框:border-radius
border-radius:2em;
等价于:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
9 属性设置元素的垂直对齐方式:vertical-align
值
描述
baseline |
默认。元素放置在父元素的基线上。 |
sub |
垂直对齐文本的下标。 |
super |
垂直对齐文本的上标 |
top |
把元素的顶端与行中最高元素的顶端对齐 |
text-top |
把元素的顶端与父元素字体的顶端对齐 |
middle |
把此元素放置在父元素的中部。 |
bottom |
把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom |
把元素的底端与父元素字体的底端对齐。 |
length |
|
% |
使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit |
规定应该从父元素继承 vertical-align 属性的值。 |
10 特定的方式定义匹配某个区域的特定元素:box-sizing
值
描述
content-box |
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
|
border-box |
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
|
inherit |
规定应从父元素继承 box-sizing 属性的值。 |
11 颜色代码缩写:#336699 #369
12 固定背景:backgroud-attachment:fixed;
13 背景用封面形式:background-size:cover;
14 属性简写 (padding border margin 相同)
left right 相同 缩写: margin:10px 20px 30px
15 旋转DIV:transform: rotate(45deg);
16 字体缩写
1、使用简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛
17 水平居中 -行内元素 text-align:center
水平居中 -定宽块状元素 width:500px; margin:auto; // 即margin-left/right 设置auto
18 习惯写caption作表格标题:<caption>2012年到2013年库存记录</caption>
19 强调语气:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示<strong> 用粗体表示。
20 <q></q> //短文本引用 不用单独加引号
21 <blockquote></blockquote> //长文本引用 不用单独加引号
22 <address> 地址标签;<code> 添加一行代码 ;<pre> 多行代码
23 mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔:a href="mailto:yy@imooc.com?subject=观有感&body=对此评论有些想法。”
24 <ol><li></li></ol> 有序列表 li自带序号,从1开始
25 子选择器:#main>span{}; //作用于元素的第一代后代,含(后代)选择器
#main span{}; // 空格作用于元素的所有后代
*{color:red} ; //通用选择器
伪类选择符,目前为止只有:a:hover
.first #three span{color:green;} //分组选择符,第三个span
26 菜单<li>浮动后,<li>脱离文档流,导致<ul>将失去高度和宽度;如果需要对<ul>进行整体背景设置,首先要给<ul>定义宽、高。
27 盒子模型:块级标签都具备盒子模型;布局模型:建立在盒子模型之上
- 大小: 63.4 KB
- 大小: 68.5 KB
分享到:
相关推荐
《HTML+CSS网页设计与布局从入门到精通》附带学习光盘,收录了12个小时HTML和CSS多媒体教学录像和网页制作技术多媒体教学录像,辅助读者学习,达到事半功倍的效果。光盘还附带书中所有实例的素材文件、源代码和最终...
一个基于HTML+CSS+JAVASCRIPT+PHP的在线文件管理系统,在utf-8编码的linux系统下可用,参照原型为PGRFilemanager,增加了公司所要求的一些功能,例如登陆系统,文件恢复系统,对于中文的支持等.zip 适合学习/练手、...
适用于javaweb开发,HTML5后台管理系统,采用bootstrap框架设计,功能齐全,非常适合学习使用
综合运用所学习的知识设计音乐网站,网页布局主要包括网站顶部信息,banner,导航,轮播图,主要内容,footer等基本模块。要求学生能灵活使用标准流、浮动和定位等知识利用div+css进行盒子布局。要求同学对HTML的...
轻松学HTML+CSS由浅入深,全面、系统地介绍了HTML+CSS网页设计技术。本书最大的特色就是提供了大量的插图,一改过去编程书籍枯燥乏味的文字讲解
学生将学习HTML、CSS、JavaScript等前端技术,掌握服务器端技术如PHP、ASP.NET、Java等,了解数据库的设计和管理,学习Web系统的安全性和性能优化等方面的知识。通过课程学习,学生将掌握Web系统的设计与开发方法,...
通过对《精通HTML5 + CSS3+JavaScript网页设计》实例和综合案例的学习与演练,读者可以尽快掌握所学的知识,提高网页设计的实战能力;同时《精通HTML5 + CSS3+JavaScript网页设计》在网上提供了实例源代码,可供读者...
基于HTML+CSS结合机器学习的治安案件预警与监控系统源码.zip 【资源介绍】 基于HTML+CSS结合机器学习的治安案件预警与监控系统源码.zip 该项目是个人毕设项目,答辩评审分达到95分,代码都经过调试测试,确保可以...
1、资源内容:基于Java+HTML+CSS+JavaScript实现工资管理系统(源码+sql+说明文档).rar 2、适用人群:计算机,电子信息工程、数学等专业的学习者,作为“参考资料”参考学习使用。 3、解压说明:本资源需要电脑端...
前端HTML+CSS+JS学习指南图谱是一个关于前端开发领域的知识总结和图形化展示。该图谱涵盖了HTML、CSS和JavaScript这三个前端开发的基础技术,包括它们的基本概念、语法规则、常用标签和属性、样式定义和布局、DOM...
1、资源内容:基于Vue+JavaScript+HTML+CSS的电子档案管理系统(源码+说明文档).rar 2、适用人群:计算机,电子信息工程、数学等专业的学习者,作为“参考资料”参考学习使用。 3、解压说明:本资源需要电脑端使用...
毕业设计 基于Golang+HTML+CSS+JavaScript的小型汽车维修管理系统源码+详细说明+全部数据资料 高分项目毕业设计 基于Golang+HTML+CSS+JavaScript的小型汽车维修管理系统源码+详细说明+全部数据资料 高分项目 ...
j简单的前端课程设计系统,(html+js+css)。参考学习使用。
不仅可以作为学习HTML 5的教程,也可以作为日常开发的参考手册。 第二部分:详细地介绍了CSS 3的绝大部分常用选择器、属性,并为这些 选择器、属性提供了示例,方便广大读者参考本书全面、系统地掌握CSS 3的 功能和...
包括html、css、javascript、jquery的API和将近1000种js常用特效、全部是chm文档,方便阅读和学习
1、资源内容:基于HTML+CSS+JavaScript+Vue3+element+MySQL实现工资管理系统(源码+sql).rar 2、适用人群:计算机,电子信息工程、数学等专业的学习者,作为“参考资料”参考学习使用。 3、解压说明:本资源需要...
毕业设计-基于Html+css+js+java实现的思维导图的可视化学习系统源码+文档说明+界面截图 1.1 项目说明: “思维导图学习系统”是一款为了方便用户梳理知识的服务性软件,其中的服务端均在服务器后台部署、运行,并...
这个项目主要是用于设计通用权限管理系统,使用了springmvc + mybatis + ligerui + html + javascript + css等技术.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 ...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、...基于ssm实现的java校园新闻发布管理系统源码(JSP+Spring+SpringMVC+MyBatis+html+css+JavaScript+JQuery+Ajax等).zip