网址导航

今天做的是用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 href="https://www.baidu.com" target="_blank">百度</a></br>
            <a href='https://www.kugou.com' target="_blank">酷狗音乐</a></br>
            <a href="https://www.ifeng.com/" target="_blank">凤凰网</a></br>
            <a href="https://www.sina.com.cn/" target="_blank">新浪</a></br>
            <a href="https://translate.google.cn/" target="_blank">谷歌翻译</a></br>
            <a href="https://www.csdn.net/" target="_blank">CSDN社区</a></br>
            <a href="//www.greatytc.com/" target="_blank">简书</a></br>
            <a href="https://github.com/" target="_blank">GIT库</a></br>
            <a href="http://www.w3school.com.cn/" target="_blank">W3 school html</a></br>
        </div>
        </center>
</body>
</html>

效果图

image.png

css框模型

网址导航

推荐阅读更多精彩内容