博客静态网页

1 网站整体布局分析设计

知识点：

（1） HTML中的标签：div标签<div>

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

Css样式：

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

css样式写法：选择器{属性1：属性1的值；...}

选择器分为：id选择器（#id）、class选择器（.class)、标签选择器（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的实现

知识点：

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

  (2)  css样式中的：背景色、超链接样式、列表样式的写法

图片标签<img>：

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

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

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

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

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

超链接标签<a>：

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

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

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

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

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

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

<!– 有序列表 -->

<ol>

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

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

</ol>

<!– 无序列表 -->

<ul>

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

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

</ul>

HTML代码（超链接+列表）：

<!–导航 -->

<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;

}

 

转载于:https://my.oschina.net/u/4090431/blog/3021003