- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<base target="_blank"> ???<title>Title</title> ???<link rel="stylesheet" href="t.css" type="text/css"> ???<style> ???????????p{ ??????????color:fuchsia; ???????} ????.kk{ ?????color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px; ????} ????#abc{ ????????color: darkblue;text-decoration: underline;font-size: 25px; ????} ???</style>></head><body ><nav> ???<img src="http://s4.sinaimg.cn/mw690/6e3c5180gd7e41fd99ef3&690" height="50" width="50"> ???<a href="http://www.41vs.com/WerewolfWeb/41vs/TotalFlow.do?website=36041">狼人杀官网首页</a> ???<a href="http://zhushou.360.cn/detail/index/soft_id/3583525">一键安装APP</a><br> ????<img src="http://upload.chinaz.com/2017/0329/17032914121881842.jpg" height="50" width="50"> ???<a href="">登录</a> ???<a href="">注册</a> ???<input type="text"placeholder="请输入搜索内容"> ???<input type="button"value="搜索"></nav><hr><div ?id="container" style="width:400px " > ???<div id="header" style="background-color:skyblue;"><h2 align="center" style="margin-bottom:0;">狼人杀用户登录</h2></div> ???<div id="content" style="background-color:#EEEEEE;height: 210px;width:400px;float:left;text-align:center;"> ???????<form> ???????????<br>用户名<input type="text" name="user" placeholder="请输入用户账号"><br> ???????????<br>密码<input type="password" name="pass"><br> ???????????<br><input type="radio">普通用户 ???????????<input type="radio">VIP用户<br> ???????????<br><input type="button"value="登录"> ???????????<input type="button"value="注册"> ???????</form> ???</div> ???<div id="footer" style="background-color:skyblue;clear:both;text-align:center;">版权*liuda</div></div><hr><div> ???<p>火爆游戏狼人杀!</p> ???<p class="kk">火爆游戏狼人杀!</p> ???<p id="abc">火爆游戏狼人杀!</p> ???<p>火爆游戏<span style="background-color:grey;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 35px;color:red">狼人杀!</span></p></div></body></html>
???p{ ??????????color:fuchsia; ???????} ????.kk{ ?????color:darkcyan;font-weight: bold;font-style: italic;font-size: 20px; ????} ????#abc{ ????????color: darkblue;text-decoration: underline;font-size: 25px; ????}
导航,头部,CSS基础
原文地址:http://www.cnblogs.com/1996liuda/p/7683878.html