- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>大型综艺节目</title><base href=https://baike.baidu.com/item/极限挑战/17558221?fr=aladdin"target="_blank"><link rel="stylesheet"type="text/css"href="a.css"><style type="text/css">p{color:brown;}h1{background-color:lightskyblue;}.textblue{color:skyblue</style> </head> <body> <h1>大型综艺节目</h1> <nav><a href="https://baike.baidu.com/item/极限挑战/17558221?fr=aladdin">首页</a><a href="">登录</a><a href="">注册</a><a href="">退出</a><input type="text"name="search"><button type="submit">搜索</button><a href="">下载</a><a href="">播放记录</a><a href="">最新咨讯</a> </nav><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507723247150&di=5090a56eaf6868257edee9295813b943&imgtype=0&src=http%3A%2F%2F365jia.cn%2Fuploads%2Fnews%2Ffolder_1890088%2Fimages%2F4102ec499b570873d3cd46df47bb208f.png" width="450" height="250" > <body bgcolor="#eee8aa"align="center"> <p id="a">欢迎进入极限挑战</p> <p class="textblue">想要了解更多吗？</p> <p><span style="background-color:red;font-family:'Microsoft YaHei UI', Helvetica, Arial, sans-serif;font-size: 30px" >重点！</span>来了！</p> <p><span style="background-color:lightpink;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 40px">登录观看海量高清视频</span></p> <p>》会员登录可观看更多精彩视频《</p><div id="container" style="width: 1500px"><div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">会员登录</h2></div><div id="content" style="background-color:lightpink;height:200px;width:1500px;float:left;"><p></p><form action="">Username:<input type="text" name="username"placeholder="请输入用户名"><br><p></p>Password:<input type="password" name="password"placeholder="请输入登录密码"><br><p></p><input type="radio">普通会员<input type="radio">金牌会员<input type="radio">钻石会员<br><p></p><input type="button" value="登录"style="margin-right:10px;font-size:14px";><input type="button" value="取消" style="margin-right:10px;font-size:14px"></form> </div><div id="footer" style="background-color: gray;clear: both;text-align: center;height:50px;width:1500px;">版权@duym</div> </div> <hr><P>友情链接</P><a href="https://baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin">极限挑战<br><img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=9750cc7bac64034f1bc0ca54ceaa1254/9f2f070828381f30358f8f0fae014c086f06f086.jpg"width="200" height="200" alt="/baike.baidu.com/item/%E6%9E%81%E9%99%90%E6%8C%91%E6%88%98/17558221?fr=aladdin" ></a> </body> </html>
截图如下：
转载于:https://www.cnblogs.com/222ya/p/7683982.html
