1.制作自己的导航条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0076设计之作</title> </head> <body> <nav> <img src="http://img.zcool.cn/community/01b9bd574c5bbc6ac72525ae97b9f5.jpg"width="65" height="40"> <a href="">首页</a> <a href="http://www.jianshu.com/">下载APP</a> <input type="text"name="serach"> <button type="submit">搜索</button> <a href="">登录</a> <a href="">注册</a> </nav> <body style="text-align:center"> <h1></h1> <h3 style="text-align:center">每日一句</h3> <p>无数琐事侵蚀着我们的精力。今日是健身计划的开始，明天又到了预定中的减肥成效检验日。京东天猫的狂欢节，又让很多人兴奋了一个通宵。美剧韩剧国产剧，一剧又一剧。</p> <p>虽然活的苟且，但生活一定还要有梦想。于是，我们来回奔波于梦想和理想之间，时而做做这个，时而做做那个。仿佛只有这样用力地生活，我们才觉得生活得很有价值</p> <p>但是你有没有发现：我们每天这样忙碌，生活反而乱糟糟的？</p> <img src="//upload-images.jianshu.io/upload_images/3682352-d575dbb033a47a7e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="300" height="300"></a> <br><a style="text-align:center" href="http://www.tingclass.net/show-506-365316-1.html"></a> <hr> </body> </html>
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>lh-three</title> </head> <div id="container" style="400px;margin:0px auto;" > <div id="header" style="background-color:lightyellow"><h2 align="center" style="margin-bottom: 0;">Login System</h2></div> <div id="content" style="background-color:lightgreen;height:150px;400px;float:left;text-align:center;line-height:40px;"> <form action=""><p></p> Username:<input type="text" name="user"placeholder="请输入你的用户名"><br> Password:<input type="password" name="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 id="footerone" style="background-color:#0080ff;clear:both;text-align:center;">版权 duym</div> </body> </html>
<div id="container" style=" 400px"> <div id="header" style="background-color: lightskyblue"><h2 align="center" style="margin-bottom: 0;"></h2>相关栏目 related sections</div> <div id="content" style="background-color: lightskyblue;height: 250px; 400px;float: left;"> <from> <select> <option>问答</option> <option>提问</option> <option>收藏</option> </select> </from> <ul> <li>教师常用表格</li> <li>学生常用表格</li> <li>教学管理表格</li> <li>教学管理文件</li> <li>参考资料</li> </ul> <ol> <li>教师常用表格</li> <li>学生常用表格</li> <li>教学管理表格</li> <li>教学管理文件</li> <li>参考资料</li> </ol>
<h1>剁手啦!!!</h1> <div id="container" style="400px " > <p>双十一全部商品<span style="font-family: 'Consolas','Deja Vu Sans Mono','Bitstream Vera Sans Mono',monospace;font-size: 50px;background-color: aqua">50%OFF</span></p> <p>双十一全部商品50%OFF</p> <p class="textyellowgreen">双十一全部商品50%OFF</p> <p id="blue">双十一全部商品50%OFF</p>
<style type="text/css"> h1{color:darkgrey} p{color:darkred;} .textyellowgreen{color:yellowgreen;} #blue{color:blue;} </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="c.css"> <p>双十一全部商品50%OFF</p> <p class="textyellowgreen">双十一全部商品50%OFF</p> <p id="blue">双十一全部商品50%OFF</p> </body> </html>
