网址导航
今天做的是用css框模型写一个网址导航，用到了类选择器，这里面也捎带了一个背景图片的填充，边框的上下左右颜色设置，整个框模型的尺寸（border关键词）；以及超链接的位置取消默认所带下划线，当然这些都是一些小的细节问题。
其中“line-height”设置边框线的高度，设置css背景的时候需要有“url”，图片的话最好存放在代码所在的目录，也就是相对路径性的存放。
最后下面的超链接内有一个“target”和“blank”两个关键字，意思是：点击当前的超链接会打开一个新的窗口。
源代码：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>超网址导航</title>
<style type="text/css">
.box1{ width:300px; height: 600px;
border-color: red gold green yellow;
border-style: solid; border-width: 10px; background-image: url('1-菜单背景.jpg');
} a{ text-decoration: none; text-indent: 2em; line-height: 10px;
} .wz{ color:gold; line-height: 4px; text-decoration-line: 20px;
} </style></head><body>
<center>
<div class='box1'>
<h1 class="wz">网址导航</h1>
<hr>
<a >百度</a></br>
<a >酷狗音乐</a></br>
<a >凤凰网</a></br>
<a >新浪</a></br>
<a >谷歌翻译</a></br>
<a >CSDN社区</a></br>
<a >简书</a></br>
<a >GIT库</a></br>
<a >W3 school html</a></br>
</div>
</center></body></html>效果图
image.png
作者：托马斯比伯
链接：https://www.jianshu.com/p/cf12d6860955
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦