今天的内容有点意思,学习了如何在网页上添加图片,以及如何赋予图片或文字连接。

  首先接触一下编辑命令:<img>图片标签、src标记图片位置,alt标记图片属性,这两个命令都是<img>的属性,<a></a>超链接,其属性href添加链接地址,这个命令有三个作用:1、作为本地文件的超链接 2、连接到网站网址 3、标记连接的锚点 target可以打开新的网页保留原来网页,在制作文字链接时,会出现下划线标识,可以用text-decoration编辑除去样式。

  下以制作百度、宜搜、搜狐等链接为例:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

h2{

width: 100%;

height: 50px;

background-color: pink;

}

ul{

width: 660px;

height: 50px;

background-color: yellow;

margin: 0px auto;

}

li{

color: white;

background-color: grey;

width: 100px;

height: 50px;

float: left;

/*列表样式*/

list-style: none;

/*文本水平居中*/

text-align: center;

/*行高*/

line-height: 50px;

/*右外边框*/

margin-right: 10px;

/*链接样式*/

text-decoration: none;


}

li:hover{

background-color: red;

}

</style>

</head>

<body>

<h2>

<ul>

<!-- target打开新网页保留原网页 -->

<a target="blank" href="http://www.baidu.com"><li>百度</li></a>

<!-- href超链接 -->

<a target="blank" href="http://www.easou.com"><li>宜搜</li></a>

<a target="blank" href="http://www.souhu.com"><li>搜狐</li></a>

<a target="blank" href="http://www.3g.qq.com"><li>QQ</li></a>

<a target="blank" href="http://www.taobao.com"><li>淘宝</li></a>

<a target="blank" href="http://www.jd.com"><li>京东</li></a>


</ul>

</h2>

         <!-- src添加图片地址,.代表当前文件所在文件夹,..表示当前文件所在文件夹的             上层文件夹         -->

<img src="./a/1.jpg" alt="图片描述">

<!-- alt表示对图片的描述,这里有占位的作用,也利于SEO(搜索引擎) -->

<img src="./a/1.jpg" alt="图片描述">

</body>

</html>

  这样便可编辑出网页标头,其实只要条理清晰便不会很繁琐,只需注意区分样式中要编辑的对象,以及<body>中命令父子关系的罗列表达即可。到今天的学习便可制作简单的网页了。