前端开发学习的~日常记录1
1、开发工具:看到很多同事(老鸟&菜鸟)用了一款叫做HBuilder的神奇开发软件,打算尝试一下,看看能否让我燃起热爱前端的小火苗。
2、学习方式:菜鸟教程+同事那里偶尔来的小练习
3、学习目标:HTML、CSS、JS、Jquery 融会贯通,给啥做啥!
4、当前基础:几年前看过html、css,处于勉强能看懂,但写起来就忘的状态!这种基础大概也算菜鸟吧
————————————【一】HBuilder初体验————————————
新手学什么都觉得很新奇,竟然还有这么666的操作,amazing!
div#page>div.logo+ul#navigation>li*2>a 输入后按下Tab键,就变成下面的代码段了!!amazing!
初步分析:#代表 id .代表class >代表 下一层级
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
ctrl+shift+F 整理代码
ctrl+Z 撤销 ctrl+Y 取消撤销
———————————【二】体验告一段落,开始尝试写点东西————————————
新建了一个CSS文件,写了一点样式,然而刷新后发现页面没有任何变化,WHY?
我的原因:没有引入CSS文件
引入CSS文件方式:(斜体字均为摘抄,不太理解,后面再看)
- 方法一:link
在<head>标签内(不是在<style>标签内)使用<link>标签将CSS样式文件链接到HTML文件内,这样最大化的发挥了css出现的优势,当然".css"文件文件的命名要有一定的意义,方便后面的修改或增强其可读性,如"main.css"
- <link href="main.css" rel="stylesheet" style="text/css"/>
- 方法二:@import
这种方式会在整个页面加载完成时才引入css文件,很明显的问题就是页面的"裸奔"现象,这个当然从交互和体验的角度考虑是绝对不能接受的
- <style type="text/css">
- @import url(demo.css);
- </style>
@import这种方式还应注意下载HTML和CSS文件中的不同,在HTML中需要加上<style type="text/css"></style>,而在css文件中就可以直接@import来添加路径使用了,这就出现了一个点:对应样式文件较多的项目,我们可以选择先主后次,把主要的样式先渲染出来,一些次要的可以放在css文件中进行import,这样也可一定程度上缓解服务器的压力,虽然文件不大,但能优化还是好的。本质上这两种外部引入方式并没太多区别,但有时为了项目中编辑站点的样式方便,较多的使用link的方式。
————————————————菜鸟教程——————————————————
感觉之前对HTML、CSS有一点点的了解,所以直接从CSS实例开始学习
菜鸟教程CSS实例:http://www.runoob.com/css/css-examples.html
(1):设置页面的背景颜色
练后感:有点简单,<h1>、<p>、background-color
(2):设置不同元素的背景颜色
练后感:还是可以做出来的,对CSS选择器的写法有点模糊。<div> <p> class/id
CSS选择器参考(下方贴图仅为一部分):http://www.w3school.com.cn/cssref/css_selectors.asp
(3)高级背景的例子
练后感:查了backgound、border的格式后大概做出来了,但是和示例的代码不同。示例中用了两层div嵌套,目前不太理解是什么原理。。
* background格式: background:#191919 url('../img/timg.jpg') no-repeat top left;
background的属性:color、image、repeat(repeat默认;repeat-x;repeat-y;no repeat;inherit)、attachment(scroll默认;fixed;inherit)、position
* img图片的引入:图片在img文件夹中,需要从当前CSS文件夹出去(../)
* border格式: border:1px black solid;
* margin和padding的区别:
第一天的练习到此结束。。期待第二天!