导航,头部,CSS基础
- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lh-three</title> <base href="http://www.gzcc.cn/"target="_blank"> <link rel="stylesheet"type="text/css"href="123.css"> <style> h2{ text-align: center;margin-bottom:0;} #headertwo{background-color:#66b3ff;} #contenttwo{background-color:#ffffce;height:200px;width:400px;float:left;} #footertwo{background-color:#66b3ff;clear:both;text-align:center;} #wedang{width:400px;float:right} #school{width:400px;float:left} </style> </head> <body> <nav> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508218922117&di=ac29aea7dcf936bb8b4094a968092a17&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201603%2F30%2F20160330185143_BLnaT.jpeg"width="60" height="35"> <a href="">首页</a> <a href="">下载</a> <input type="text"name="search"> <input type="submit"value="搜索"> <a href="">登录</a> <a href="">注册</a> </nav> <h2 style="text-align: center">登录</h2> <div> <p>请注意登录环境<span style="font-family: '', monospace; font-size: 25px;background-color:#bbffff">是否安全</span></p> </div> <div id="denglu" style="width:400px"> <div id="headerone" style="background-color:#0080ff;"><h2>登录</h2></div> <div id="contentone" style="background-color:#EEEEEE;height:150px;width:400px;float:left;"> <form> firstname:<input type="text"name="firstname"placeholder="请输入用户名"><br> password:<input type="password"name="password"placeholder="请输入密码"><br> <input type="radio"name="role"value="stu">student <input type="radio"name="role"value="tch">teacher<br> <input type="button"value="log in"> </form></div> <div id="footerone" style="background-color:#0080ff;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> <option>选择</option> </select> </form> <ul> <li>专业</li> <li>教学</li> <li>课程</li> </ul> 课程要求: <ol> <li>严格按照教学制度</li> <li>对课程严格监管</li> </ol> </div> <div id="footertwo">版权 duym</div> </div> <div id="school" > <div id="headertwo"><h2>学校构成</h2></div> <div id="contenttwo"> <dl> <dt>学院类别</dt> <dd>信息学院</dd> <dd>艺术学院</dd> </dl> </div> <div id="footertwo">版权 duym </div> <br> <p>参考链接</p> <a href="http://www.gzcc.cn/">广州商学院<br> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508316961&di=bb8764ce4ad8f8d52bfa3e8a96579948&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201508%2F17%2F20150817231259_Y8nR2.thumb.700_0.jpeg"width="100" height="100" alt="土间埋" > </a> </body> </html>
![](https://images2017.cnblogs.com/blog/1232548/201710/1232548-20171017131016037-778015126.png)