博客静态网页 ------网站整体布局分析设计和导航与Banner的实现

最新推荐文章于 2023-04-03 13:09:09 发布

chiwan2912

最新推荐文章于 2023-04-03 13:09:09 发布

阅读量1.1k

点赞数 2

原文链接：https://my.oschina.net/u/4090471/blog/3020968

版权

本节课我们学习了博客静态网页，重点是网站整体布局分析设计和导航与Banner的实现。

在网站整体布局分析设计中

#banner	一张头部图片	#footer	尾部的部分
#left	中间的左边部分	#menu	导航菜单
#main	中间主要部分	#right	中间的右边部分

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

中间主题 div main 最外层div box

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>

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的实现

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

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

图片标签<img>：

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

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

src属性：图像文件的路径

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

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

超链接标签<a>：

①成对出现<a></a>、用于从一个页面跳转到另一个页面

②<a>最重要的属性href，跳转的连接目标。若没有目标，可用#表示空链接

<a href=“http://www.baidu.com”>去百度

</a> <a href=“#”>哪也不去</a>

③列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol>

列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。

a<!– 有序列表 -->
<ol>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ol>
<!– 无序列表 -->
<ul>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ul>

<!–导航 -->
<div id="menu"
<ul>
<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>

<!– css样式：全局都默认设成无边距 -->
* {
	margin:0;
	padding:0;
}
通配符-选择器  * 代表应用到页面所有的标签上

导航菜单样式：

#menu{
	<!– 吸管工具，十六进制-->
	background-color:#328048; 
	height:50px;
}
#menu ul{
	<!– 去掉那个点-->
	list-style:none; 
	width:430px;
	height:50px;
	 <!– 设置行高，可以让li中的内容居中-->
	line-height:50px ;
	<!–整个ul标签向右浮动-->
 	float:right;
}
#menu ul li{
	<!–每个li标签向左浮动，一个挨一个，知道ul的宽度放不下了，就掉下去了-->
	float:left;
	margin-left:20px;
}

超链接样式四个链接状态，可以对每一种状态添加样式（可去菜鸟教程学习下）

a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻

#menu ul li a{
	 <!– 去掉下划线-->
	text-decoration:none;
	font-size:16px;
	color:#FFF;
	font-family:"微软雅黑"
}

#menu ul li a:hover{
	color:#F60;
}

接下来是本节课学习的代码如下

建立一个blog.css

@charset "utf-8";
/* CSS Document */
#box{
	background-color:#F00;
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#C3F;
	height:50px;
}
#main{
	background-color:#6F0;
	height:1000px;
}
#left{
	background-color:#33C;
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}
#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#txt{background-color:#F36 !important;width:800px;}
</style>
</head>
<!--  注释  -->
<body>
<div id="text" style="width:770px; background-color:#6F6; margin:0 auto;">
<h1>你好，秋天</h1>
<p>zhaoqi @ 2018-10-08</p>
<p>春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态，但是秋天的叶则更令我喜欢。</p>
<p>秋天的叶是凄凉的飘飘洒洒的落叶如一只蝴蝶，飞舞着，飘到大地母亲的怀抱里。</p>
<p>秋天的叶是一位化妆师，把世界渲染，把大地变成金黄色；秋天的叶，默 默无闻，春天夏天，树叶的绿叶衬托使鸟儿莺歌燕舞，秋天的你，默默而去， 但你不伤心，因为你熟知"落红不是无情物，化作春泥更护花。"</p>
<p>秋日的叶是富有诗意的，你好，秋天，你好！</p>
<p>浏览[1051]|评论[105]</p>
<p>注：文字摘自网络</p>

</div>
</body>
</html>











@charset "utf-8";
/* CSS Document */

#txt{
	background-color:#C36 !important;
	whdth:800px;
}

.myclass{
	text-align:center;
	color:#CCC;
	font-family:楷体;
	font-style:italic;
}

p{
	color:#39C;
	text-indent:2em;
	line-height:35px;
}

转载于:https://my.oschina.net/u/4090471/blog/3020968