- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lh-three</title> </head> <style type="text/css"> h2{ text-align: center;margin-bottom:0;} #headertwo{background-color:antiquewhite;} #contenttwo{background-color:pink;height:200px;width:400px;float:left;} #footertwo{background-color:antiquewhite;clear:both;text-align:center;} #wedang{width:400px;float:right} #school{width:400px;float:left} </style> <body> <nav> <a href="">Home</a> <a href="">Doenload</a> <input type="text"name="search"> <input type="submit"value="search"> <a href="">login</a> <a href="">register</a> </nav> <h2 style="text-align: center">login</h2> <div id="denglu" style="width:400px"> <div id="headerone" style="background-color:antiquewhite;"><h2>login</h2></div> <div id="contentone" style="background-color:plum;height:150px;width:400px;float:left;"> <form> firstname:<input type="text"name="firstname"placeholder="please enter your firstname"><br> password:<input type="password"name="password"placeholder="please enter your password"><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:palevioletred;clear:both;text-align:center;">copyright@yjl</div> </div> <div id="wedang"style="background-color:plum;height:150px;width:400px;float:left;"> <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> <li>理解课程内容</li> </ol> </div> <div id="footertwo">copyright@yjl</div> </div> <div id="school" > <div id="headertwo"><h2>学校构成</h2></div> <div id="contenttwo"> <dl> <dt>学院类别</dt> <dd>信息学院</dd> <dd>法律学院</dd> <dd>经融学院</dd> </dl> </div> <div id="footertwo">copyright@yjl </div> <br> <p>参考链接</p> <a href="http://www.gzcc.cn/">广州商学院<br> </body> </html>
转载于:https://www.cnblogs.com/yangjlee/p/7680848.html