Div+CSS 合理布局新手入门实例教程之2 搭建网站

日期:2021-01-20 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

最先必须整体规划网站,本实例教程将下列图为例搭建网站。

其基础合理布局见下图:


关键由5个一部分组成:
1.Main Navigation 导航栏条,具备按钮殊效。 Width: 760px Height: 50px
2.Header 网站头顶部标志,包括网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的关键內容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框,1些额外信息内容。 Width: 280px Height: Changes depending on
5.Footer 网站底栏,包括版权信息内容等。 Width: 760px Height: 66px



第2步:建立html模版及文档文件目录等

1.建立html模版。编码以下:

<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF⑻" />
<title>Div+Css</title>
<meta http-equiv="Content-Language" content="en-us" /> 
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" /> 
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" /> 
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>

 

将其储存为index.html,并建立文档夹css,images,网站构造以下:


2.建立网站的大框:
创建1个宽760px的盒子,它将包括网站的全部元素。
在html文档的和之间写入

<!--Example Source Code-->
<div id="page-container">
Hello world.
</div>

建立css文档,取名为master.css,储存在/css/文档夹下。写入:

/*Example Source Code*/
#page-container {
width: 760px;
background: red;
}

操纵html的id为page-container的盒子的宽为760px,情况为鲜红色。

如今以便让盒子垂直居中,写入margin: auto;,使css文档为:

/*Example Source Code*/
#page-container {
width: 760px;
margin: auto;
background: red;
}

如今你能够看到盒子和访问器的顶端有8px宽的间隙。这是因为访问器的默认设置的填充和界限导致的。清除这个间隙,就必须在css文档中写入:

/*Example Source Code*/
{
margin: 0;
padding: 0;
}




第3步:将网站分成5个div,网页页面基础合理布局的基本:

1.将“第1步”提到的5个一部分都放入盒子中,在html文档中写入:

<!--Example Source Code-->
<div id="page-container">
<div id="main-nav">Main Nav</div> 
<div id="header">Header</div> 
<div id="sidebar-a">Sidebar A</div> 
<div id="content">Content</div> 
<div id="footer">Footer</div>
</div>

 

2.以便将5个一部分区别起来,大家将这5个一部分用不一样的情况色调标识出来,在css文档写入:

/*Example Source Code*/
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

 

主要表现以下:





第4步:网页页面合理布局与div波动等

1.波动:最先让边框波动到关键內容的右侧。用css操纵波动。

 

/*Example Source Code*/
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

 

主要表现以下:


2.往关键內容的盒子中写入1些文本。在html文档中写入:

 

<!--Example Source Code-->
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

 



可是你能够看到关键內容的盒子占有了全部page-container的宽度,大家必须将#content的右侧界设为280px。以使其不和边框产生矛盾。css编码以下:

 

/*Example Source Code*/
#content {
margin-right: 280px;
background: green;
}

 

另外往边框里写入1些文本。在html文档中写入:

<!--Example Source Code-->
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

 

主要表现以下:


这也并不是大家要想的,网站的底框跑到边框的下边去了。这是因为大家将边框向右波动,因为是波动,因此能够了解为它坐落于全部盒子之上的另外一层。因而,底框和內容盒子对齐了。
因而大家往css中写入:

 

/*Example Source Code*/
#footer {
clear: both;
background: orange;
height: 66px;
}

 

主要表现以下:

上一篇:css之全自动换行完成编码 返回下一篇:没有了