3.11日企业实训第二节(导航与Banner的实现第一二部分)

最新推荐文章于 2020-09-16 14:36:14 发布

chufu0960

最新推荐文章于 2020-09-16 14:36:14 发布

阅读量255

点赞数

原文链接：https://my.oschina.net/u/4094999/blog/3021007

版权

网站整体布局分析设计

<div></div> 作用：划分页面的区域，布局

中间主体div main 最外层div box

知识点：

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

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

div标签：

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

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

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

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

</div>

</div>

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;

}

导航与Banner的实现

#banner:一张头部图片

#menu:导航菜单

知识点：

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

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

图片标签<img>：

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

● < img > 标签有两个必要的属性：

• src 属性：图像文件的路径

• alt 属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

● 博客网页 -Banner 区域的 HTML 代码如下：<img src="images/bg.jpg" alt=" 这是我的图片 " />

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet"/>



</head>

<body>
  <div id="box">
      <div id="banner">
          <img src="images/bg.jpg" alt="我的图片不见了/">
      </div>
     
      <div id="menu">  
          我是菜单
      </div>
     
      <div id="main">
         <!--左边区域-->
         <div id="left">
       	 	 左边区域
         </div>
         
         <!--右边区域-->
         <div id="right">
         	右边区域
         </div>
      </div>
      <div id="footer">
          foot
      </div>
     
     
    </div>



</body>
</html>

@charset "utf-8";
/*CSS Document*/
#box{
	background-color:#F9C;
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto
	}
	/*放图片，设置高度和图片一样高*/
	#banner{
		background-color:#6F6;
		height:209px;
	}
	#menu{
		background-color:#3C9;
		height:50px;
	}
	#main{
		background-color:#FCF;
		height:1000px;
	}
	#left{
		background-color:#C09;
		height:1000px;
		width:250px;
		float:left;
	}
	#right{
		background-color:#0CF;
		height:1000px;
		width:774px;
		float:right;
	}
	
	#footer{
		background-color:#F6F;
		height:80px;
	}

转载于:https://my.oschina.net/u/4094999/blog/3021007

chufu0960

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.11日企业实训第二节(导航与Banner的实现第一二部分)

网站整体布局分析设计 <div></div> 作用：划分页面的区域，布局中间主体div main 最外层div box 知识点： ● HTML中的标签： div 标签 <div> ● CSS样式中的：如...
复制链接

扫一扫