1.制作自己的导航条。
2.HTML头部元素:
<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式
<link> 定义了一个文档和外部资源之间的关系
3.练习样式表:
行内样式表
内嵌样式表
外部样式表
4.分别练习定义三类选择器:
HTML 选择器
CLASS 类选择器
ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小假期</title> <base href="http://p2.so.qhimgs1.com/sdr/1417_900_/t01933a30d37fb4009e.jpg" target="_blank"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav> <h2>首页</h2> <img src="t01933a30d37fb4009e.jpg" height="20" width="20"> <input type="text" name="search"> <button type="submit">搜索</button> <a href="https://www.jianshu.com/sign_in">登录</a> <a href="https://www.jianshu.com/sign_up">注册</a> </nav> <style> p { color: blue; } .starone { collapse: red; } #id { color: pink; } </style> <div> <p><span>全场6折</span></p> <p><span>全场6折</span></p> <p><span>全场6折</span></p> <h2 class="starone">今天6折起</h2> <p><span id="content">666</span>点击</p> </div> <h1 align="center">Hello你好</h1> <h3>2015</h3> <hr> <div id="container" style=" 400px"> <div id="header" style="background-color: darkorange"><h2 align="center">登录</h2></div> <div id="content"> <form> username:<input type="text"name="username"placeholder="请输入用户名"><br> password:<input type="password"name="pwd"><br> <input type="radio"name="role"value="stu">student <input type="radio"name="role"value="tea">teacher<br> <input type="checkbox"name="vehicle"value="remember me">记住我<br> <input type="button" value="登录验证"> </form> </div> <div id="footer" style="background-color: darkorange"><p align="center"><i>版权@xiaojiaqi</i></p></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> </div> <hr> <a href="http://www.baidu.com/s?wd=多啦a梦&ie=UTF-8">多啦A梦<br> <img src="http://a.cphotos.bdimg.com/timg?image&quality=100&size=b4000_4000&sec=1507859219&di=3a04247590e4cf6d501bfd8f164e5101&src=http://pic72.nipic.com/file/20150716/21109289_143220717453_2.jpg" height="100" width="50 "></a> </body> </html>
p {
color: blue;
}
.starone {
collapse: red;
}
#id {
color: pink;
}