- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://p1.so.qhimgs1.com/t0148db23e6d9b288ad.jpg" target>
</head>
<body>
</body>
<nav>
<a href=""><img src="http://p1.so.qhimgs1.com/t0148db23e6d9b288ad.jpg">首页</a>
<a href="http://www.gzcc.cn">欢迎</a>
<input type="text"name="search">
<button type="submit">搜索</button>
<a href="">登陆</a>
<a href="">注册</a>
</nav>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" type="text/css" href="test1.css.html">-->
<style type="text/css">
p{
color: red;
}
.zidingyi{
color: blue;
}
#commentcount{
background-color: aquamarine;
}
</style>
</head>
<body>
<p>双11全部商品</p>
<p>双11全部商品5折</p>
<h1 class="zidingyi">双11全部商品5折</h1>
<h2><span id="commentcount" >1000</span>点赞</h2>
</body>
</html>
p{
color: red;
}
.zidingyi{
color: blue;
}
#commentcount{
background-color: aquamarine;
}
![]()
![]()