web前端开发学习之二

搭建第一个商业化主页（上）

 试着写一个建议的HTML文档，看一下淘宝的导航栏，那么我们也可以开始做一个简易的HTML网页

打开hbuilder进行操作，在hbuilder里面，可以通过tab键快速补齐代码，比如要打一个

只需要输入div三个字母，然后通过点击键盘上的Tab键，就可以快速补齐。或者要得到三个li，只需要输入ul>li*3再按tab键

具体操作 

网页上显示的结果为

 已经得到的是HTML输出的内容，但是他和我们的截图中淘宝首页并不相同，原因是因为缺少了CSS中的代码

 可以发现前面的小数点消失了

style中设置li的style中的float属性为left

 可以看见此时的网页发生了变化，文字变成了横向，但是文字内容全部接在了一起

下面继续更改style中的内容 ，li中添加一个属性，margin

 添加背景颜色，以及字体颜色

 

         居中

整体代码 

	
		
		
		
	
	
		

			

				
天猫
   
				
聚划算
				
天猫超市
			
			
		
	

 块状元素与内联元素

        

接下来进行具体操作，可以发现块元素和内联元素并没有出现在同一行  

 

 那么有一个问题，如何让一个内联元素能够有大小、有宽高，只需要给内联元素的css样式设置display:block即可，但是只要编程块状元素后，他后面就不能跟其他的元素了，此时，内联元素2就跑到了下一行，如下所示

 接下来给出代码，并在代码中已加以注释具体含义

	
		
		
		
	
	
		

			
块状元素
			
块状元素2
			内联元素
			内联元素2
		
		
	

浮动和定位

在body中添加两个块，并设置其css样式，记得div*2再按一下tab键，则可以出现两个

 

 其实绿色的块被置于红色的块的下方，我们将绿色的块的大小更改成400即可查看

其他浏览器：IE（IE7）浏览器，基本差不多

 但是有一点就是IE6中会出现一个小问题

再接着给css中添加其他属性，margin-left属性 

而IEtester中IE6

 原因是：

然后我们给他添加一个属性：display:inline;/*显示变成内联元素，只针对于IE6*/，根据上面的了解，inline内联元素是没有大小的，所以此处查看一下，他的大小会不会消失

再看一下IE浏览器 ，可以发现一样有大小，并且左边的间距也没有变成2倍

 

添加一个div块

			#div3{
				width: 100px;
				height: 100px;
				background-color: #009;
				margin-left: 10px;
				margin-top: 10px;
			}

 查看此时网页显示的状态，可以发现IE会自动把下一个块也当成float：left，但是Chrome会无视他。

那么怎么做，才能使得蓝色的块并排与绿色的块的后面 ，在div2和div3之间添加一个

，添加并在其css样式中添加，并查看结果

			.clear{/*class前面加小数点“.”,如果是一个id，则id前加一个#号*/
				clear:both;/*在Chrome中，让后续的块重启一行*/
			}

 在div3中，如果也添加float：left的话，那么蓝色的块就能继续在绿色的块后面显示，而clear:both的功能主要就是重启一行

但是如果设置了clear：both之后，就需要继续对div3添加一个display:inline的属性，否则，IE6中，块3前方的间距又会变成双倍，如下所示，所以记得重启一行后要加上display:inline