DIV+CSS基础DIV+CSS十日教程3:用HTML代码布局一个简单的页面

DIV+CSS十日教程3:用HTML代码布局一个简单的页面

刚开始学习的时候,并不可能记住所有CSS语言中出现的“英文词”,只要能看懂意思就行了,以后慢慢就会熟练的,下面我们一起来做一个div+css的简单页面,效果如图“网站主页图.png”所示:

127335.png

这个网页很简单,顶部包含LOGO和导航栏,接下来是一张banner图片,然后主体分为两部分,左边是文字列表,右边是图片列表。下方有一行文字,最下面是底部版权信息,可以通过一个结构图来表示如下:

941062.png

对整体结构清晰的了解之后,网页的制作正式开始:

1. 首先在电脑上建立一个文件夹,命名为“简约企业网站”,然后打开记事本,复制以下代码到记事本内:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<meta name="renderer" content="webkit" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> 
<title>简约企业网站主页</title> 
<link rel="stylesheet" type="text/css" href="style/theme.css" /> 
</head> 
<body>
</body>
</html>

2. 点击记事本-文件-另存为-文件类型选择“所有文件”,编码设置为UTF-8,文件名设置为index.html,将文件保存到刚建立的文件夹里,这里写出了页面的基本代码,并定义了网页的标题,以及定义了关联的CSS文件为style文件夹下的theme.css文件;

3. 接着在刚建立的文件夹里建立一个子文件夹重命名为style,在style文件夹里建立一个文本文件,重命名为theme.css,保存为UTF-8编码;

4. 返回上一层,在“简约企业网站”文件夹根目录建立一个名为images的文件夹,准备6张“产品”图片,分别为1.jpg - 6.jpg,LOGO图片logo.png以及banner图片1.png ;

5. 准备工作做好之后,开始对html进行编辑,网页顶部,定义一个id为top的区块:

<div id="top"></div>

为了便于内容的居中显示,我们在top内定义一个head区块:

<div class="head"></div>

在head内部,包含logo和导航,我们分别定义

<div class="logo"></div>
<div class="nav"></div>

在logo区块内写入表示logo的图片标签:

<img alt="简约企业网站" src="images/logo.png" />

在nav区块内定义一个无序列表来列出导航菜单中的各项,如:

 <ul class="menu"> 
   <li><a href="/">首页</a></li>
   <li><a href="/">公司简介</a></li>
   <li><a href="/">服务流程</a></li>
   <li><a href="/">成功案例</a></li>
   <li><a href="/">联系我们</a></li> 
 </ul>

在head标签结束后,写上一个空标签用于清除浮动:

<div class="clear"></div>

关于清除浮动的方法有很多,这里暂时先用这个标签,在其他文章里还会经常遇到……

6. 接下来为了使网页主体部分居中显示,这里定义一个整体容器<div id="all"></div>,预备将网页主体放在这个框内;

我们定义一个div放置banner图片:

<div class="banner"> 
 <img src="images/1.png" alt="banner图片" /> 
</div>

在banner图片的下方,分别是左右两个列表,这里定义一个大的div框包含这两者,然后在分别定义两个div分别表示这两个列表:

<div id="news_picul"> 
 <div class="news"> 
 </div> 
 <div class="picul">
 </div> 
</div>

用h5标签分别写上两个列表的标题:<h5>公司动态 News</h5><h5>公司产品 Product</h5>,文字列表是一个无序列表,用ul标签来写:

 <ul> 
  <li><a href="#">不要等到明天,明天太遥远,今天就行动</a></li> 
  <li><a href="#">200亿美金,新浪微博的凤凰涅槃式重生</a></li> 
  <li><a href="#">今天很残酷 明天更残酷 后天很美好...</a></li> 
  <li><a href="#">寒冷的时候,学会用自己的左手温暖右手</a></li> 
  <li><a href="#">人还是要有梦想的,万一实现了呢</a></li> 
  <li><a href="#">没有优秀的理念,只有脚踏实地的结果</a></li> 
  <li><a href="#">没有绝对幸福的人,只有不肯快乐的心</a></li> 
  <li><a href="#">人生的长河,我们只是一粒粒尘埃</a></li> 
  <li><a href="#">花开一季的芬芳,谁来许我一世的忧伤</a></li> 
  <li><a href="#">东边日出西边雨,道是无晴却有晴</a></li> 
  <li><a href="#">善于利用时间的人,永远找得到充裕的时间</a></li> 
  <li><a href="#">竹外桃花三两枝,春江水暖鸭先知</a></li> 
  <li><a href="#">智慧是无穷的,青春短暂,去学无穷智慧</a></li> 
 </ul>

图片列表也是一个无序列表,只不过链接的对象同时包含了图片和小标题,给小标题加上h6标签,方便控制样式,整体的写法是:

<ul> 
<li><a href="/"><img alt="x" src="images/1.jpg" /><h6>简介1</h6></a></li>
<li><a href="/"><img alt="x" src="images/2.jpg" /><h6>简介2</h6></a></li>
<li><a href="/"><img alt="x" src="images/3.jpg" /><h6>简介3</h6></a></li>
<li><a href="/"><img alt="x" src="images/4.jpg" /><h6>简介4</h6></a></li>
<li><a href="/"><img alt="x" src="images/5.jpg" /><h6>简介5</h6></a></li>
<li><a href="/"><img alt="x" src="images/6.jpg" /><h6>简介6</h6></a></li>
</ul>

由于图片列表是每行三个,所以即将在CSS里对图片列表设置向左浮动,所以在列表结束后加上<div class="clear"></div>清除浮动,综合起来,网页主体部分左右两个列表的html代码为:

<div id="news_picul"> 
 <div class="news"> 
 <h5>公司动态 News</h5> 
 <ul> 
<li><a href="#">不要等到明天,明天太遥远,今天就行动</a></li> 
<li><a href="#">200亿美金,新浪微博的凤凰涅槃式重生</a></li> 
<li><a href="#">今天很残酷 明天更残酷 后天很美好...</a></li> 
<li><a href="#">寒冷的时候,学会用自己的左手温暖右手</a></li> 
<li><a href="#">人还是要有梦想的,万一实现了呢</a></li> 
<li><a href="#">没有优秀的理念,只有脚踏实地的结果</a></li> 
<li><a href="#">没有绝对幸福的人,只有不肯快乐的心</a></li> 
<li><a href="#">人生的长河,我们只是一粒粒尘埃</a></li> 
<li><a href="#">花开一季的芬芳,谁来许我一世的忧伤</a></li> 
<li><a href="#">东边日出西边雨,道是无晴却有晴</a></li> 
<li><a href="#">善于利用时间的人,永远找得到充裕的时间</a></li> 
<li><a href="#">竹外桃花三两枝,春江水暖鸭先知</a></li> 
<li><a href="#">智慧是无穷的,青春短暂,去学无穷智慧</a></li> 
 </ul> 
 </div> 
 <div class="picul">
 <h5>公司产品 Product</h5>
<ul> 
<li><a href="/"><img alt="x" src="images/1.jpg" /><h6>简介1</h6></a></li>
<li><a href="/"><img alt="x" src="images/2.jpg" /><h6>简介2</h6></a></li>
<li><a href="/"><img alt="x" src="images/3.jpg" /><h6>简介3</h6></a></li>
<li><a href="/"><img alt="x" src="images/4.jpg" /><h6>简介4</h6></a></li>
<li><a href="/"><img alt="x" src="images/5.jpg" /><h6>简介5</h6></a></li>
<li><a href="/"><img alt="x" src="images/6.jpg" /><h6>简介6</h6></a></li>
</ul>
 <div class="clear"></div> 
 </div> 
</div>

7. 接下来定义一个div来显示下方的联系方式:

   <div id="tel"> 
    <p>欢迎联系我们 电话 88888888</p>
   </div>

8. 最后定义一个div来显示网页的底部,然后再定义一个div来显示页脚的版权信息,整理的写法为:

  <div id="footer"> 
   <div class="foot">
    <p>XXXX公司 版权所有 All Rights Reserved</p>
   </div> 
  </div>

9. 至此,整个页面的html部分全部完成,综合起来如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<meta name="renderer" content="webkit" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> 
<title>简约企业网站主页</title> 
<link rel="stylesheet" type="text/css" href="style/theme.css" /> 
</head> 
<body> 
<div id="top"> 
<div class="head"> 
<div class="logo">
<img alt="简约企业网站" src="images/logo.png" /> 
</div> 
<div class="nav"> 
<ul class="menu"> 
<li><a href="/">首页</a></li>
<li><a href="/">公司简介</a></li>
<li><a href="/">服务流程</a></li>
<li><a href="/">成功案例</a></li>
<li><a href="/">联系我们</a></li> 
</ul> 
</div> 
<div class="clear"></div> 
</div> 
</div> 
<div id="all"> 
<div class="banner"> 
<img src="images/1.png" alt="banner图片" /> 
</div> 
<div id="news_picul"> 
<div class="news"> 
<h5>公司动态 News</h5> 
<ul> 
<li><a href="#">不要等到明天,明天太遥远,今天就行动</a></li> 
<li><a href="#">200亿美金,新浪微博的凤凰涅槃式重生</a></li> 
<li><a href="#">今天很残酷 明天更残酷 后天很美好...</a></li> 
<li><a href="#">寒冷的时候,学会用自己的左手温暖右手</a></li> 
<li><a href="#">人还是要有梦想的,万一实现了呢</a></li> 
<li><a href="#">没有优秀的理念,只有脚踏实地的结果</a></li> 
<li><a href="#">没有绝对幸福的人,只有不肯快乐的心</a></li> 
<li><a href="#">人生的长河,我们只是一粒粒尘埃</a></li> 
<li><a href="#">花开一季的芬芳,谁来许我一世的忧伤</a></li> 
<li><a href="#">东边日出西边雨,道是无晴却有晴</a></li> 
<li><a href="#">善于利用时间的人,永远找得到充裕的时间</a></li> 
<li><a href="#">竹外桃花三两枝,春江水暖鸭先知</a></li> 
<li><a href="#">智慧是无穷的,青春短暂,去学无穷智慧</a></li> 
</ul> 
</div> 
<div class="picul">
<h5>公司产品 Product</h5>
<ul> 
<li><a href="/"><img alt="x" src="images/1.jpg" /><h6>简介1</h6></a></li>
<li><a href="/"><img alt="x" src="images/2.jpg" /><h6>简介2</h6></a></li>
<li><a href="/"><img alt="x" src="images/3.jpg" /><h6>简介3</h6></a></li>
<li><a href="/"><img alt="x" src="images/4.jpg" /><h6>简介4</h6></a></li>
<li><a href="/"><img alt="x" src="images/5.jpg" /><h6>简介5</h6></a></li>
<li><a href="/"><img alt="x" src="images/6.jpg" /><h6>简介6</h6></a></li>
</ul>
<div class="clear"></div> 
</div> 
</div> 
<div id="tel"> 
<p>欢迎联系我们 电话 88888888</p>
</div> 
</div> 
<div id="footer"> 
<div class="foot">
<p>XXXX公司 版权所有 All Rights Reserved</p>
</div> 
</div> 
</body>
</html>

目前完成了页面的整理框架,这里并没有给页面的CSS加以定义,因此目前的网页是没有样式的,下一节,我们给CSS文件填入内容,让网页呈现出样式…

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