今天的内容有点意思,学习了如何在网页上添加图片,以及如何赋予图片或文字连接。
首先接触一下编辑命令:<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>中命令父子关系的罗列表达即可。到今天的学习便可制作简单的网页了。