页面布局和样式美化-创新互联

效果如下

我们可以看到，两个div都有了边框线，说明只要标签有class="content" 就会出现边框线，因为在style中定义了.content{border:1px solid;}

在css中我们可以定义各种各样的样式，字体大小，颜色，背景色，宽度，高度之类想到得几乎都可以实现。

那么到此简单的css入门了。

下面看下布局

html里面的标签都有一些默认的样式，我们可以利用这些默认的样式做出很多需要的效果。

先看简单的

标签分为：行级元素和块级元素，简单理解元素就是标签。

div是一个块级元素

块级样式的特征就是会占一整行

第二个div或者其他元素都会在下一行显示

下面写一个行级元素label，我把第一个div删除了，因为妨碍地方，代码如下

	
		
		
	
	
		
			DIV+CSS2
		
		姓名：51CTO
	

效果如下图

代码分析

1、我们可以看到body里面有两个label标签，内容分别为“姓名：”和“51CTO”，在页面上可以在一行中显示，没有分行显示，这就是行级元素的特征。

我们看下面用div写会怎么样

代码如下

	
		
		
	
	
		
			DIV+CSS2
		
		姓名：51CTO
		
姓名：
51CTO
	

显示效果如下

代码分析

我们可以看到，代码中用来两个div来包含内容，会换行显示，这就是块级元素的特征

好了，简单的布局，横的，竖的，就这样实现了，下一篇我们用更多的样式和简单的标签来一起做一个菜单。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。