div+css 学习笔记3

最新推荐文章于 2022-08-31 16:24:36 发布

Kang_Nian

最新推荐文章于 2022-08-31 16:24:36 发布

阅读量839

点赞数

分类专栏： Web开发文章标签： css web

本文链接：https://blog.csdn.net/kang_nian/article/details/17347785

版权

Web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、一个基本的网站布局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
	margin:0;
}
#header
{
	height:100px;
	width:80%;
	background:#ff0000;
	margin:auto;
}
#menu
{
	height:30px;
	width:80%;
	background:#0000ff;
	margin:auto;
	border-style:dotted;
	text-align:center;
}
#content
{
	width:80%;
	margin:0 auto;
}
#side
{
	background:#99ff99;
	height:300px;
	width:120px;
	float:left;
}
#main
{
	background:#99ffff;
	height:300px;
	wedth:70%;
	margin-left:122px;
}
#footer
{
	background:#00ff00;
	height:100px;
	width:80%;
	margin:auto;
}
</style>
</head>
<body>
<div id = "header">
当一个盒模型不设置宽度时，它默认是相对于浏览器显示的，或者说占满整个浏览器。
</div>
<div id = "menu">
菜单栏
</div>
<div id = "content">
<div id = "side">
<p>
当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。
这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉。
</p>
</div>
<div id = "main">
<p>
自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。
如果我们需要按浏览器的80%显示，那么设置宽度为80%，当改变浏览器窗口大小时，盒模型的宽度也会跟着改变。
</p>
</div>
</div>
<div id = "footer">
在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。
</div>
</body>
</html>

2、xhtml的块级元素(div)和内联元素(span)

块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>这是h1中的内容</h1>
<h2>这是h2中的内容</h2>
<div>
这是第一个div中的内容
	<div>
	这是第二个div中的内容
	<span>这是第二个div中的span内容</span>
	<em>这是第二个div中的em内容</em>
	</div>
</div>
</body>
</html>

显示效果如下：

从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。这就是块级元素和内联元素，正因为有了这些元素，才使我们的网页变得丰富多彩。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

3、float属性

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
	font-size:28px;
	line-height:200%;
}
#ihep
{
	float:left;
	width:400px;
}
</style>
</head>
<body>
<div id = "ihep">
	<img src = "./picture/ihep.jpg" height = "200" width = "380" />
</div>
<div id = "main">
类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，
如可以定义body{margin:0}，意思是 将body的外边距设置为0，h2{color:#f00}是将所有h2标签的文字颜色设置为红色；
高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，
不能作用于多个对象，优先级高于class，这是id和class的区别。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，
而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，
直到拥有足够放下它的空间。
</div>
</body>
</html>

运行效果如下图所示：

当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是380px，设置ihep为400px，中间将会有20px的空隙了。

Kang_Nian

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div+css 学习笔记3

1、一个基本的网站布局Insert title herebody{ margin:0;}#header{ height:100px; width:80%; background:#ff0000; margin:auto;}#menu{ height:30px; width:80%; background:#0000ff; margin:auto;
复制链接

扫一扫