- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hly</title>
<base href="https://www.qidian.com/">
<link rel="stylesheet"type="text/css"href="171.css">
<style type="text/css">
p{
color: blueviolet;
}
.textyellow{
color:green;
}
#t{
color: red;
}
</style>
</head>
<body>
<nav>
<img src="https://ps.ssl.qhimg.com/sdmt/173_135_100/t01a918e4b6ac171b50.jpg">
<a href="">首页</a>
<a href="">下载</a>
<input type="text"name="search"placeholder="图书索引">
<input type="submit"value="搜索">
<a href="">登录</a>
<a href="">注册</a>
</nav>
<div>
<p>起点读书网<span style="background-color:yellow ;font-family: '华文隶书', Helvetica, Arial, sans-serif;font-size: 50px;color:white">推荐</span></p>
</div>
<div id="denglu" style="width:400px">
<div id="headerone" style="background-color:lightblue;"><h2>登录</h2></div>
<div id="contentone" style="background-color:white;height:150px;width:400px;float:left;float:left;"align="center"">
<form>
用户名:<input type="text"name="用户名"placeholder="请输入用户名"><br>
密码:<input type="password"name="密码"placeholder="请输入密码"><br>
<input type="radio"name="role"value="stu">读者
<input type="radio"name="role"value="tch">管理员<br>
<input type="button"value="登录">
<input type="button"value="取消">
</form></div>
<div id="footerone" style="background-color:lightblue;clear:both;text-align:center;">版权 duym</div>
</div>
<div id="wedang" >
<div id="headertwo"><h2>各类图书</h2></div>
<div id="contenttwo">
<form>
<select>
<option>查询</option>
<option>收藏</option>
</select>
</form>
<ul>
<li>哲学类</li>
<li>教育类</li>
<li>文学类</li>
<li>杂志</li>
</ul>
<ol>
温馨提醒
<li>本网站支持在线阅读</li>
<li>没有想要查找的书可给小编留言</li>
</ol>
</div>
<div id="footertwo">版权 duym</div>
</div>
<p>参考链接</p>
<h4>点击图片可看更多的书籍哦</h4>
<br><a href=""><img src="https://qidian.qpic.cn/qdbimg/349573/1009265821/150"width="100" height="100" alt="起点读书" ></a>
</a>
<br>
<p id="t">起点读书网将会出更多新书！！！</p>
<p class=" .textyellow">欢迎阅览起点读书网！！！</p>
</body>
</html>
