导航,头部,CSS基础
- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>教务系统</title> <base href="http:www.gzcc.cn/"target="_blank"> <link rel="stylesheet"type="text/css"href="171.css"> <style type="text/css"> p { font-size: 20px; background-color: lightcyan; } #tt{ color:#FFD700; } .x1{ color: red; } </style> </head> <body> <nav> <a href="">官方首页</a> <a href="">校内咨询</a> <a href="http://www.gzcc.cn/">下载APP</a> <input type="text"name="search"> <button type="submit">搜索</button> <a href="">返回</a> <a href="">注销</a> </nav> <hr> <h1 style="color:cyan ">广州商学院</h1> <div id="container" style="width: 400px"> <div id="header" style="background-color: #FFA500"><h2 align="center" style="margin-bottom: 0;">登录</h2></div> <div id="content" style="bheight: 150px;width: 400px;float: left;"> <form action=""> <select> <option>校内入口</option> <option>校外入口</option> </select><br> 账号:<input type="text" name="账号"placeholder="请输入学号"><br> 密码:<input type="password" name="密码"placeholder="请输入密码"> <br> <input type="radio"name="role"value="stu">学生 <input type="radio"name="vehicle"value="tea">教师<br> <input type="button" value="登录"> <input type="button" value="取消"> </form> <div id="container" style="width: 400px"> <div id="header" style="background-color: lightcyan"><h2 align="center" style="margin-bottom: 0;"></h2></div> <div id="content" style="height: 150px;width: 400px;float: left;"> <form action=""> <p>交通指南</p> <P class="x1">人才招聘</P> <p id="tt">合作院校</p> </div> <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">版权。duym</div> </div> <div> </div> </body> </html>
p { font-size: 20px; background-color: lightcyan; } #tt{ color:#FFD700; } .x1{font-size: 20px; border-color: orangered;} h1{ background-color:cyan; }