首页 > 代码库 > 16-11-10
16-11-10
今天的内容有点意思，学习了如何在网页上添加图片，以及如何赋予图片或文字连接。
首先接触一下编辑命令：<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="http://www.mamicode.com/a/1.jpg" alt="图片描述">
<!-- alt表示对图片的描述,这里有占位的作用,也利于SEO（搜索引擎） -->
<img src="http://www.mamicode.com/a/1.jpg" alt="图片描述">
</body>
</html>
这样便可编辑出网页标头，其实只要条理清晰便不会很繁琐，只需注意区分样式中要编辑的对象，以及<body>中命令父子关系的罗列表达即可。到今天的学习便可制作简单的网页了。
16-11-10