导航,头部,CSS基础
- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- 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%; }