导航，头部，CSS基础
制作自己的导航条。
HTML头部元素：
<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式文件
<link> 定义了一个文档和外部资源之间的关系
练习样式表：
行内样式表
内嵌样式表
外部样式表分别练习
定义三类选择器：
HTML 选择器
CLASS 类选择器
ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <base href="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508245690&di=03b37b2a3cb105efb7e070dc8c046954&src=http://imgsrc.baidu.com/imgad/pic/item/d788d43f8794a4c2d22eca0d04f41bd5ad6e3982.jpg" target="_blank"> <style type="text/css"> p{color:red;} .nino{color:skyblue;} #jun{color:yellow} </style> <link rel="stylesheet" type="text/css" href="jun.css"> </head> <body> <nav> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508245690&di=03b37b2a3cb105efb7e070dc8c046954&src=http://imgsrc.baidu.com/imgad/pic/item/d788d43f8794a4c2d22eca0d04f41bd5ad6e3982.jpg" width="20"height="20"> <a href="">首页</a> <input type="text" placeholder="搜索"> <input type="submit" value="搜索"class="sign-in-button" data-disable-with="搜索"> <a href="">登录</a> <a href="">注册</a> </nav> <div> <p class="nino">欢迎进入<span style="font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-size: 50px;background-color: yellow">登录界面</span></p> <p id="jun">邮箱手机号各类昵称都可以当用户名~ </div> <div id="container" style="width:400px " > <div id="header" style="background-color:pink;"><h2 align="center" style="margin-bottom:0;">登录</h2></div> <div id="content" style="background-color:white;height:150px;width:400px;float:left;text-align:center;"> <from> <form action=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507898961998&di=a0160f2f9187d18c30f89e79ccac8c02&imgtype=0&src=http%3A%2F%2F58pic.ooopic.com%2F58pic%2F16%2F59%2F11%2F35T58PICFjm.png" width="20" height="20" > <input placeholder="用户名" type="text" name="session[email_or_mobile_number]" id="session_email_or_mobile_number"> <br> <img src="http://pic.58pic.com/58pic/15/57/07/67q58PICH6y_1024.png" width="20" height="20" > <input placeholder="密码" type="password" name="session[password]" id="session_password"> <br> <input type="radio">教师 <input type="radio">学生 <br> <input type="checkbox">记住我 <input type="submit" name="commit" value="登录" class="sign-in-button" data-disable-with="登录"> </form> </div> <div id="footer" style="background-color:pink;clear:both;text-align:center;">版权 © handa</div> </div> </body> </html>
效果如下：