导航,头部,CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素:
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表:
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    a{font:"宋体";color:LightSkyBlue;font-size:150% }
    </style>
    <link href="nav.css" rel="stylesheet" type="text/css">
    <base href="https://www.bilibili.com/" />
        <base target="_blank" />
</head>
<body>
<div type="text">
    <P id="p" ><span style="font-size:230%;">BiliBili弹幕网</span></P>

    <nav>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508217272597&di=7eb3aa2c4450966e910fcdb855bbf3e3&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201602%2F10%2F20160210140725_4PCSG.thumb.700_0.jpeg">
        <a href="https://passport.bilibili.com/login" class="a">登陆</a>
        <a href="https://passport.bilibili.com/register/phone.html"class="a">注册</a><br>
        <a href="https://www.bilibili.com/">首页</a>
        <a href="https://www.bilibili.com/video/douga.html">动画</a>
        <a href="https://bangumi.bilibili.com/22/">番剧</a>
        <a href="https://www.bilibili.com/video/music.html">音乐</a>
        <a href="https://www.bilibili.com/video/dance.html">舞蹈</a>
        <a href="https://www.bilibili.com/video/game.html">游戏</a>
    </nav></div>



<hr>
</body>
</html>
#p{
    color:LightBlue ;
}

.a{
    color:LightGrey ;
    font-size:190%;
}

 

posted on 2017-10-17 19:31  069王国栋  阅读(552)  评论(0编辑  收藏  举报

导航