js/css/html初学感想以及知识点总结

标签：

这几天按照京东页面布局样式等做了一个类似的页面，仅仅只是主页。主要的就是css里的布局，接下来就总结一下这几天的知识要点。

1.在html文件里导入css文件、js文件

<link rel="stylesheet" type="text/css" href="文件名.css">

<script type="text/javasrcipt" language="Javascript" src="文件名.js"></script>

其中rel是relationship的缩写，css(cascarding style sheet)级联样式表。

2.在html中，为了方便以后的维护管理，有两个重要的标签<div>和<span>

<div>为块级元素，如果依次在页面中插入，则会一个一个往下排布。

<span>为内联元素，如果依次插入，会在一行排列。内联元素忽略宽和高，其宽高由其内容大小决定。

如果要设置宽高，可使用css设置。（1）display:block;（2）float:left(添加float属性)。

3.float属性在css中被大量使用(可能是因为我现在很多属性应用的不熟练或者不知道其效果)来布局整个页面。

如果要让固定宽高的<div>块居中则css样式要设置div{position:absolute/relative;top:50%;left:50%;margin-left:-1/2height;margin-top:-1/2width;}

这里要插一个clear属性。规定元素哪一侧不允许出现其他浮动元素。clear:both;左右都不可出现浮动元素。

clear属性可用于换行。

4.设置文字在<div>块中居中：div{line-height:height;//垂直居中 text-align:center;//水平居中}

5.在列表中插入竖线的方法小技巧：在列表中在增加一个li列表，设置各项属性。

6.line-height属性：行高。这个在我绘制过程中用的还是比较多的。这里有个要注意的地方。

line-height:150%和line-height:1.5//前者是依据父元素大小计算行高，且子元素的后代也使用这个行高。后者是按子元素大小计算行高。

所以如果子元素有多行，设置line-height:150%通常会产生重叠。

7.letter-spacing属性：字体间距，也可用于列表间的间距。

8. a{text-decoration:none;} a:hover{text-decoration:underline;}

设置鼠标悬停在链接处显示下划线

9.标签页的效果

 1 //label1/label2/label3/lable4分别是标签页li元素的对应展示div块id
 2 var tabsArray = ["label1","label2","label3","label4"];
 3 //obj为标签页元素,index为展示元素块序号,即上面的div块在tabsArray中的序号
 4 function showTable(obj,index){
 5     //获取父节点(即列表ul)下的每个li元素
 6     var liobj = liobj.parentNode.getElementsByTagName("li");
 7     for (var i= 0; i<tabsArray.length; i++ ){
 8         var tab = document.getElementById(tabsArray[i]);
 9         if(index == i){
10             tab.style.display = "block";
11         }
12         else{
13             tab.style.display = "none";
14         }
15     }
16 }

先写这么多吧。希望自己能够坚持下去。

js/css/html初学感想以及知识点总结

标签：

原文地址：http://www.cnblogs.com/Mirac1e/p/5043586.html