DIV+CSS基础DIV+CSS十日教程2:了解DIV+CSS布局常用的代码

DIV+CSS十日教程2:了解DIV+CSS布局常用的代码

众所周知,标准的html网页是由head和body两部分组成的,而head中必须包含网页的标题标签title,也就是说最简单的网页结构应该是这样:

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>

作为文档的声明标签是必须写在第一行的,声明的写法有很多,但推荐大家按照HTML5的标准来写:

<!DOCTYPE HTML>

这个声明字母采用大小写都可以,根据自己的习惯即可。

在上一节《建立DIV+CSS的初步印象》中,在head标签内写了<meta charset="utf-8" />这句代码,这是对整个网页编码的定义,如果不写这句,有时候网页会出现乱码,所以一定要写上这一句。

在上一节也提到了CSS文件的引入方式,即下面这句代码:

<link href="style.css" rel="stylesheet" type="text/css" />

除此之外,head标签中还包括页面关键词、页面描述、页面版权及对浏览器内核的一些声明,综合起来一个最基本的网页头部一般是这样:

<head>
<meta charset="utf-8" />
<title>标题</title>
<meta name="keywords" content="关键词1,关键词2"/>
<meta name="description" content="页面的描述"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> 
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

在body标签内出现的,就是网页的具体内容,较常见的html标签有下面这些:

1. div标签——主要用于网页结构的布局,一般采用id和class区分不同的div,例如定义一个网页的底部版权信息,可以写为:

<div class="copy">XXX 版权所有</div>

2. p标签——表示段落,比如公司简介的文字可以写为:

<p>本公司成立于2005年,主要提供xxxx等业务。</p>

3. h1--h6标签——标题标签,权重由h1到h6依次递减,h1具有唯一性,每个页面只出现一次,例如,可以将网页主标题放在h1里,副标题放在h2里,相关内容放在h3里,等等……

4. ul标签——表示列表,与li标签配合使用,例如:

<ul><li>产品1</li><li>产品2</li><li>产品3</li></ul>

类似的还有有序列表ol,用法相似,一般网页的导航菜单就使用列表标签来实现……

5. img标签——图片表示,在网页中展示图片的时候用。如:

<img src="images/1.jpg" alt="产品图片" />

6. span标签——表示行内元素,比如:

<p>联系电话:<span>88888888</span></p>

文本中的某部分加上了span标签,便于在CSS中给它单独定义样式……

7. a标签——表示链接,例如:

<a href="http://www.google.com">Google搜索</a>

含义是给“Google搜索”这几个字加上对应的链接。如果是给图片加上链接,则应当写为:

<a href="http://www.google.com"><img src="logo.jpg" alt="产品图片" /></a>

8. strongem标签——表示强调,在文章中某个关键词或某句话比较重要,可以加上此标签,在没定义样式的情况下,一般强调的文本会显示粗体或斜体。

9. 此外还有一些标签,如表格标签table,以及表示音频或视频的标签audiovideo等等,在网页模板中用的较少的标签这里就不再赘述,将以上标签使用灵活的话,制作网页模板就基本够用了,其他的标签再慢慢研究就可以了。


关于CSS,也有很多定义各种样式的“代码”,下面我们先学习一些较常用的:

1. background——表示背景,例如给名为top的p标签定义背景,我们可以写为:

#top{background:#ccc;}

这表示背景是浅灰色,如果要用图片作为背景,则应写作:

#top{background: #00FF00 url(bg.png) no-repeat;}

这里的no-repeat表示不重复显示背景,如果需要重复,则去掉该属性即可;

2. text-align——表示文本居左、居右和居中的设置,最常用的:

p {text-align:center}

意思就是将这段文本居中;

3. font——定义字体和字号,例如:

#one {font:bold 12px/20px arial}

表示文字为粗体,12px大小,行间距为20px,字体为arial,如需单独定义字号和字体,则写为:

font-size:14px;font-family:arial;

单独定义是否加粗,则使用:

font-weight:bold;
font-weight:normal

单独设置行间距,则使用:

line-height:24px;
line-height:150%;

4. paddingmargin——分别定义内边距和外边距,例如:

#two {padding:0 5px 0 6px;margin:10px;}

表示two标签的内边距分别为0,5px,0,6px,四边外边据都为10px,当分别定义四边边距的时候,按照上、右、下、左的顺序,只定义两个数字,则表示上下,左右,只定义一个数字,则表示四边相同距离;

5. border——表示边框,一般写为:

#xxx {border:1px solid #eee}

则表示边框宽度为1px,颜色为#eee,如果单独定义下边框,则写为border-bottom,其他四边亦然;

6. 链接样式:我们可以分别定义链接文本的样式与鼠标指向链接时的样式,比如:

a {text-decoration: none;color:red;}
a:hover {text-decoration: underline;color:blue;}

意思是链接文本不显示下划线,颜色为红色,当鼠标指向时显示下划线,并显示为蓝色。此外还有a:visited标签定义已经访问过的链接样式,可以自己试一下;

7. 上述text-decoration定义文字是否加下划线,不一定针对链接使用,如果将给普通文本加下划线也是可以的,至于a:hover表示鼠标指向链接时的样式,同样的,也可以使用p:hover表示鼠标指向该段落时的样式;

8. heightwidth——表示高度和宽度,例如:

img {height:50px;width:200px;}

则定义了图片的宽和高,如果width:100%则表示宽度为整个屏幕的宽度;

9. float:leftfloat:right——常用来布局的浮动标签,它表示元素的流动方向,例如float:left表示向左浮动,下方的元素就会自动显示在右边;

10. display——定义元素的类型,最常用的display:none表示隐藏该元素,display:inline表示元素在行内显示,display:block表示元素以块状显示;

11. clear:both——表示清除浮动,不希望元素有浮动效果,则可以给元素加上此定义。

12. position:absoluteposition:relative——表示绝对定位,通常是父级定义position:relative,子级定义position:absolute绝对定位属性,子级使用left或right和top或bottom进行绝对定位。对于初学者来说这个可能不易理解,暂时可以不作研究,并不是每个网页模板都会用到绝对定位。

熟练掌握以上这些html标签和CSS的基本定义后,就可以简单的做一个图文并茂的网页了,下一节咱们就一起来做一个网页,试试这些简单的语言“代码”。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/3.html