1.制作自己的导航条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <nav> <a href=""><img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" width="258" height="39">首页</a> <a href="http://www.jianshu.com/">下载app</a> <input type="text"name="search"> <button type="submit">搜索</button> <a href="">登录</a> <a href="">注册</a> </nav>
运行结果：
2.HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式
- <link> 定义了一个文档和外部资源之间的关系
3.练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
4.分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <base href="../static/" target="_blank"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <nav> <a href=""><img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" width="258" height="39">首页</a> <a href="http://www.jianshu.com/">下载app</a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="">登录</a> <a href="">注册</a> </nav> <style type="text/css"> p { color: blue; } .starone{ color: blueviolet; } #content{ color: coral; } </style> </head> <body> <p>今天天气真好</p> <p>今天天气真好</p> <p>今天天气真好</p> <h1 class="textblue">今天天气真好</h1> <h1 class="starone">今天天气真好</h1> <span id="content">晴天</span> <p>十九大<span style="background: crimson;font-size:30px;font-family: 微软雅黑">召开</span></p> </body> </head> <body> <h1>陈华斐pink</h1> <p>小猪佩奇</p> <div id="header" style="background-color: chocolate"><h2 align="center">登录</h2></div> <div id="content"> <form setion=""> 用户名：<input type="text" name+="username" placeholder="请输入用户名"><br> 密码：<input type="password"> <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('')"> </input> </form> 登录验证 </div> <div> <select>评论 <option>收藏</option> <option>点赞</option> <option></option> </select>评论 <ul> <li>python</li> <li>html</li> </ul> </div> <div id="footer" style="background-color: chocolate"><p align="center"><i>版权@chf96</i></p></div> <a href="http://image.so.com/v?q=小猪佩奇图片&cmsid=380851e6494219daf0f9e42637e2ca63&cmran=0&cmras=0&i=2&cmg=5fa9918b43bdd880a720ad048811374f&src=360pic_strong&z=1#q=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87%E5%9B%BE%E7%89%87&i=2&src=360pic_strong&z=1&lightboxindex=0&id=9a99e6fee214ae9faf1913bd48d9d8a2&multiple=0&itemindex=0&dataindex=0&prevsn=0&currsn=0&jdx=0">小猪佩奇<img src="http://i2.hunantv.com/p1/20160801/1059291401.jpg" width="258" height="39"></a> <hr> </body> </html>
p {
color: blue;
}
.starone{
color: blueviolet;
}
#content{
color: coral;
}