博客静态网页

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

div标签：

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

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

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

l 博 客网页布局的 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样式：

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

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

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

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

@charset "utf-8";

#box{

  width:1024px;/* 设置id是box的div，高度为1014px */

  height:1300px;

  margin:0 auto;/*居中*/

  background-color:#C00;

}

2.导航与Banner的实现

图片标签<img>：

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

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

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

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

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

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

超链接标签<a>：

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

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

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

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

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

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

<!– 有序列表 -->

<ol>

  <li><a href=“#”>阳光生活</a></li>

  <li><a href=“#”>校园梦想</a></li>

</ol>

<!– 无序列表 -->

<ul>

  <li><a href=“#”>阳光生活</a></li>

  <li><a href=“#”>校园梦想</a></li>

</ul>

超链接样式

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

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;

}

 

 

转载于:https://my.oschina.net/u/4090678/blog/3021620