1.制作自己的导航条。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS问答平台</title></head><body><nav> ???<a href=""><img src="w_02_08_00.png">首页</a> ???<a href="http://www.gzcc.cn/">下载app</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a></nav></body></html>
2.HTML头部元素:
1.<base> 定义了页面链接标签的默认链接地址
2.<style> 定义了HTML文档的样式文件
3.<link> 定义了一个文档和外部资源之间的关系
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS问答平台</title> ????<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank"> ???<link rel="stylesheet" type="text/css" href="T5.css"> ???<style type="text/css"> ???????p{ ???????????color:darkcyan;font-size: 10px; ???????} ???????.textblue{ ???????????color:blue; ???????????text-decoration: underline; ???????} ???????.tea{ ???????????background-color:yellow; ???????} ???????c{ ???????????color:yellow; ???????} ???</style></head><body><nav> ???<a href=""><img src="w_02_08_00.png">首页</a> ???<a href="http://www.gzcc.cn/">下载app</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a></nav></body></html>
3.练习样式表:
a.行内样式表
b.内嵌样式表
c.外部样式表
4.分别练习定义三类选择器:
a.HTML 选择器
b.CLASS 类选择器
c.ID 选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>MIS</title></head><body><h1>MIS问答平台</h1>行内样式: <div><p>双11全部商品<span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 50px;background-color: #FFD700">50%OFF!</span></p></div><hr>内嵌样式表:<style type="text/css"> ?p{ ???color:red; ???} ???h1{ ???background-color:green; ???} ???.textblue{ ???color:blue; ???}</style><p> ?双11全部商品50%OFF!</p><p> ?双11全部商品50%OFF!</p><p class="textblue"> ?双11全部商品50%OFF!</p> 外部样式表:
<h1>通知</h1>
<p>双11全部商品50%OFF!</p>
<p id="tt">双11全部商品50%OFF!</p>
<p class="textblue">双11全部商品50%OFF!</p>
</body> </html>
css
p{ ???color:red; ???} ???h1{ ???background-color:green; ???} ???.textblue{ ???color:blue; ???tt{ ???????????background-color:#FFD700; ???}
导航,头部,CSS基础
原文地址:http://www.cnblogs.com/0020l/p/7682348.html