码迷,mamicode.com
首页 > 其他好文 > 详细

页面布局和样式美化

时间:2017-03-22 23:51:26      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:div   css   行级元素   块级元素   

在上一篇中我们事先了一个简单的Hello world页面。

在这一篇中,我们来认识下布局,和样式。

目前说的比较多的就是DIV+CSS

DIV 是一个html里面的标签,就好像h1一样。

看下面一段代码

<html>
	<head>
		<title>DIV+CSS</title>
	</head>
	<body>
		<div>
			DIV+CSS
		</div>
	</body>
</html>

里面的所有标签,除了div其他在上一节都说过。运行结果如下图技术分享

没有任何的惊喜。

下面我们通过css让它有点变化,给它加个边框

代码修改成下面的样子

<html>
    <head>
        <title>DIV+CSS</title>
        <style>
            .content{
                border:1px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            DIV+CSS
        </div>
    </body>
</html>

解析下代码:

1、我在head里面加入style标签,这是一个定义样式的标签,所有的样式都写在这个标签里面。而里面的样式代码就叫做css。


2、我在div里面加入了class="content"  ,这句代码的意思在这个div里面 加入一个class属性,而属性值是content。属性值可以随便写,但要有意义。不能起a,b,c 这些毫无意义的值。class属性是一个常用的属性。在标签里面还可以有其它属性,例如:id属性 ,我们写成

<div id="contentid" class="content">

当然,值可以随便取有意义的。


3、刚刚我们在div里面写了class=‘content‘ 而style里面有写了.content{border:1px solid;}  这里style里面的意思就是将class=‘content‘的标签的border(边框线)设置为1px (1像素) solid(实心的)。


运行效果如下,内容上面多了一条边框线

技术分享


现在我们再改改,加个背景颜色

<html>
    <head>
        <title>DIV+CSS</title>
        <style>
            .content{
                border:1px solid;
            }
            #contentid{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="contentid" class="content">
            DIV+CSS
        </div>
    </body>
</html>

代码解析

1、刚刚我们说了一个id的属性。现在代码里面就有一个id的属性。值为contentid。而style里面加入了#contentid{background-color:red;}。这里面的意思就是将id=contentid的标签的background-color(背景颜色) 设置为red(红色)

运行结果如下

技术分享


留意下,在div里面写id的时候,style前面用了#号,写class的时候前面用了英文句号.  就是这样用,没错。id用#号表示; class用.表示 这叫做“选择器”,#contentid 就是选择id为contentid的标签。

注意在一个页面中,id值是唯一的,class值可以多个。

就是说:已经定义了id=contentid,就不能再其他标签定义id=contentid,因为contentid 已经表示了一个标签,其他标签不能再用contentid,但可以用其他值,例如id=contentid2


但是class可以有多个,可以在多个标签上定义class=content都是没有问题的。

看下面的代码,就有两个一模一样的class,两个值不一样的id

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid" class="content">
			DIV+CSS
		</div>
		
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
	</body>
</html>

效果如下

技术分享

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


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


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


下面看下布局

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

先看简单的

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


div是一个块级元素

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

技术分享

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


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

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
		<label>姓名:</label><label>51CTO</label>
	</body>
</html>


效果如下图

技术分享代码分析

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


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

代码如下

<html>
	<head>
		<title>DIV+CSS</title>
		<style>
			.content{
				border:1px solid;
			}
			#contentid{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="contentid2" class="content">
			DIV+CSS2
		</div>
		<label>姓名:</label><label>51CTO</label>
		<div>姓名:</div><div>51CTO</div>
	</body>
</html>


显示效果如下

技术分享代码分析

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


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

本文出自 “简单开发者” 博客,请务必保留此出处http://zjm80230.blog.51cto.com/9905372/1909327

页面布局和样式美化

标签:div   css   行级元素   块级元素   

原文地址:http://zjm80230.blog.51cto.com/9905372/1909327

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!