您的位置：首页 > 其它

16-11-10

2016-11-10 20:24 204 查看

今天的内容有点意思，学习了如何在网页上添加图片，以及如何赋予图片或文字连接。
首先接触一下编辑命令：<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>

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

<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>

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

<img src="./a/1.jpg" alt="图片描述">
</body>
</html>
这样便可编辑出网页标头，其实只要条理清晰便不会很繁琐，只需注意区分样式中要编辑的对象，以及<body>中命令父子关系的罗列表达即可。到今天的学习便可制作简单的网页了。

附件：http://down.51cto.com/data/2368367

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片文字链接

相关文章推荐

新的分享

章节导航