课堂课后心得

博客静态网页

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

#banner:一张头部图片

#menu:导航菜单

#main:中间主要部分

#left:中间的左边部分

#right:中间的右边部分

#footer:尾部的部分

知识点： HTML中的标签：div标签<div> CSS样式中的：如何使用样式、设置div的样式（宽、高、背景、div并排）

div标签： Html的标签，成对出现<div></div> <div>定义页面上的一块区域，对整个页面划分区域用 常用的有id和class属性：<div id=“menu”></div>

Css样式： 引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" /> css样式写法：选择器{ 属性1:属性1的值;… } 选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）

2、导航与Banner的实现

知识点： HTML中的3个新标签：图片标签<img>、超链接标签<a>、列表标签<ul><li> CSS样式中的：背景色、超链接样式、列表样式的写法

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

超链接标签<a>： 成对出现<a></a>、用于从一个页面跳转到另一个页面 <a>最重要的属性href，跳转的连接目标。若没有目标，可用#表示空链接 <a href=“http://www.baidu.com”>去百度</a> <a href=“#”>哪也不去</a> 列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol> 列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。

超链接样式 四个链接状态，可以对每一种状态添加样式（可去菜鸟教程学习下） a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻

以上就是我对本次课堂的理解

转载于:https://my.oschina.net/u/4091195/blog/3022220