3.11企业实训

第2章 博客静态网页

    1 、网站整体布局分析设计

div   #banner  头部图片    div   #menu  导航菜单栏    div #left   div  #right   div   #footer 

HTML中的标签：div标签<div>

CSS样式中的：如何使用样式、设置div的样式（宽、高、背景、div并排）

    （1）、div标签：

Html的标签，成对出现<div></div>

<div>定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：<div id=“menu”></div>

博客网页布局的HTML代码如下：

 <div id="box">      
 <div id="banner"></div> 
 <!-- 头部：横幅的图片区域 banner  --> 
 <div id="menu“></div> 
 <!-- 头部：导航栏区域 menu -->  
 <div id="main"> 
 <!-- 中间主要的部分 main -->  
 <div id="left"> </div>         
 <div id="right"></div>    
 </div>       
 <div id="footer">
 </div> 
 <!-- 最下面尾部的区域：footer -->
 </div>

（2）、Css样式：

引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" />

css样式写法：选择器{ 属性1:属性1的值;… }

选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）

博客网页布局的CSS代码如下（需要设置每个div的宽、高、位置、背景色）：

 @charset "utf-8";
 #box{ 
  width:1024px;/* 设置id是box的div，高度为1014px */   
  height:1300px;   
  margin:0 auto;/*居中*/   
  background-color:#C00; 
}

<!– 图片区域的高、宽、背景色 -->
#banner{
	width:100%;
	height:209px;
	background-color:#6FF;
}
<!– 导航菜单区域的高、宽、背景色 -->
#menu{
	height:50px;
	background-color:#328048;
}
<!– 中间一大块主体区域的高、宽、背景色 -->
#main{
	height:1000px;
	padding-top:10px;
}
<!– 中间区域左边部分的的高、宽、背景色 -->
#left{
	height:1000px;
	width:250px;
	background-color:#6F9;
	float:left;
}
#right{
	height:1000px;
	width:744px;
	background-color:#FFC;
	float:right;
}
#footer{
	height:80px;
	background-color:#328048;	
}

2、导航与Banner的实现

HTML中的3个新标签：图片标签<img>、超链接标签<a>、列表标签<ul><li>

CSS样式中的：背景色、超链接样式、列表样式的写法

（1）、图片标签<img>：

<img>标签属于单标签：<img />

<img>标签有两个必要的属性： src属性：图像文件的路径        alt属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

博客网页-Banner区域的HTML代码如下：

<img src="images/bg.jpg" alt="这是我的图片" />

 

转载于:https://my.oschina.net/u/4090526/blog/3021664