本文介绍如何使用HTML和CSS创建一个个性化的导航条，并演示了如何使用不同类型的样式表及选择器来定制样式。
- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GZCC</title> <base href="" target="_blank"> <link rel="stylesheet" href="99.css"> </head> <body> <nav> <img src="http://img.mp.itc.cn/upload/20170720/25678b6966bf4a79ae9d7b85df4f3531_th.jpg" width="50" height="50" alt="img.mp.itc.cn"> <a herf="www.gzcc.cn" class="jun">首页</a> <input type="text"> <button type="submit">搜索</button> <a href="">登陆</a> <a href="">注册</a> <h3 id="commentcount">233333<span style="background-color: blueviolet;font-size: 50px;font-family:'Operator Mono','Source Sans Pro',Melo,Monaco,Consolas">评论</span></h3> </nav> <h1 class="jun">MIS问答平台</h1> <h2 id="2015" style="color: blueviolet">2015</h2> <div id="container" style="width:400px "> <div id="header" style="background-color: cornflowerblue"><h2 align="center">登陆</h2></div> <div id="content"> <form> 用户名：<input type="text" name="username" placeholder="请输入用户名"><br> 密码：<input type="password" name="passwork"><br> <input type="radio" name="role" value="stu">student <input type="radio" name="role" value="tea">teacher <br> <input type="checkbox" value="true"><span>记住我</span> <a href="">登陆遇到问题</a><br> <input type="button" value="login" onclick="alert('登陆验证')"> </form> </div> <div id="footer" style="background-color: cornflowerblue;clear: both;text-align: center"><i>版权@mis</i></div> </div> <div> <select> <option>收藏</option> <option>点赞</option> <option>评论</option> </select> <ul> <li>python</li> <li>html</li> </ul> <ol> <li>python</li> <li>html</li> </ol> <h3 id="学校概况">学校概况</h3> <d1> <dt>1学校简介</dt> <dd><a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">1学校简介</a></dd> <dt>2校徽校训</dt> <dd><a href="http://www.gzcc.cn/html/xygk/xhxx/">2校徽校训</a></dd> </d1> </div> <a href="#2">2</a> <hr> <br> <hr> <p style="color:darkgreen;fent-size:x-small;margin-left: 20px;">友情链接</p> <a href="http://www.gzcc.cn/"> <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/> <br>广州商学院</a> <a id='2'></a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: red; } .jun{ color: green; } #commentcount{ color:yellow; } </style> </head> <body> </body> </html>
p { color: red; } .jun { color: blue; } #commentcount { color: yellow; } body { background-color:#b0c4de; }
转载于:https://www.cnblogs.com/JUNJUNER/p/7689150.html
扫一扫
2986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
