web网页开发第三课学习总结

这一节课是对上一节课的框架进行更细化的装饰。

主要讲解内容：

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

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

详细列出具体知识内容：

1.图片标签<img>：

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

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

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

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

2.超链接标签<a>：

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

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

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

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

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

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

超链接+列表代码：

<!–导航 -->
<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>

导航菜单样式：

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

3.超链接样式

四个链接状态，可以对每一种状态添加样式

①:link - 正常，未访问过的链接

②:visited - 用户已访问过的链接

③:hover - 当用户鼠标放在链接上时

④:active - 链接被点击的那一刻

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

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

4.左侧列表的实现-----CSS

对图片需要设置：

内边距padding:一圈都是8px;

设置绿色的、实线的边border：1px solid #096

css代码：

#zuozhe{
	text-align:center;
	padding-left:15px;
	padding-top:15px;
}
#zuozhe img{
	border:1px solid #096;
	padding:8px;
	border-radius:8px;/*设置圆角CSS3新特性*	
}

 

转载于:https://my.oschina.net/u/4090404/blog/3024289