1、制作自己的导航条。
2、HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系 3、练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 align="center">mis问答平台<span style="font-size: larger";></span></h1> <h2 align="center">广州商学院界面</h2> <style type="text/css"> p{ color: red; } h2{ background-color: cyan; } .textyellow{ color: blue; } #tt{ color: yellow; } </style> <nav> <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"><br> <a href="">首页</a> <a href="">下载APP</a> <input type="text"name="search"placeholder="输入内容"> <button type="submit">搜索</button> <a href="">登录</a> <a href="">注册</a> </nav> <div>广州商学院<span style="background-color: cyan;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: yellow">教务系统</span></div> <h3 id="2017">2017</h3> <script> document.write(Date()) document.getElementById("2017").innerHTML="????"; </script> <p style="color: blueviolet;margin-left: 20px;">he is a english teacher</p> <p>he is a english teacher</p> <div id="container" style="width:400px " > <div id="header" style="background-color:#FFA500;"><h2 align="center" style="margin-bottom:0;">登录</h2></div> <div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;"> <form> Username:<input type="text" name="username" placeholder="请输入用户名"><br> Password:<input type="password" name="passeword" placeholder="请输入密码"><br> <input type="radio" name="role" value="stu">student <input type="radio" name="role" value="Bike"> teacher<br> <input type="button" value="登录"> <input type="button" value="退出"> </form> </div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 kobe</div> </div> <h2 align="center">大新闻</h2> <p id="tt">广州商学院惊现陆地第四大毒蛇!!!</p> <p >广州商学院惊现陆地第四大毒蛇!!!</p> <p class="textyellow">广州商学院惊现陆地第四大毒蛇!!!</p> </body> </ht
css:
p{
color: red;
}
h2{
background-color: cyan;
}
.textyellow{
color: blue;
}
#tt{
color: yellow;
}