导航,头部,CSS基础
1.制作自己的导航条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星汇</title> </head> <body> <nav> <div id="container" style="background-color: hotpink;width: 600px"> <img src="http://img5.imgtn.bdimg.com/it/u=3180850167,1059107384&fm=27&gp=0.jpg"height="45px"width="60"> <a href="http://site.gzcc.cn/">首页</a> <a href="https://activity.idol001.com/">活动汇</a> <a href="https://idol001.com/app.html">下载APP </a> <input type="text" placeholder="请输入要搜索的内容"> <button>搜索</button> </div> </nav>
</body>
</html>
运行结果:
2.HTML头部元素:<base> 定义了页面链接标签的默认链接地址;<style> 定义了HTML文档的样式;<link> 定义了一个文档和外部资源之间的关系;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星汇</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <base href="http://img5.imgtn.bdimg.com/it/u=3180850167,1059107384&fm=27&gp=0.jpg" target="_blank"> <style type="text/css"> p{ color: crimson; } .textcolor{ color: crimson; } #commentcount{ background-color: orchid; } </style>
3.练习样式表:行内样式表;内嵌样式表;外部样式表
行内样式表:
<div id="container" style="width:400px"> <div id="header" style="background-color: darkorange"><h2 align=center style="margin-bottom: 0;">登录login in</h2></div> <div id="content" style="background-color: darkgray;height: 150px;width: 400px;float: left;">
内嵌样式表:
<p>信息技术与工程学院</p> <h2 class="textcolor">信息管理与信息系统</h2> <h3><span id="commentcount">管理信息系统课程</span> 周三56节</h3> </div>
外部样式表:
.
<head> <meta charset="UTF-8"> <title>星汇</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <base href="http://img5.imgtn.bdimg.com/it/u=3180850167,1059107384&fm=27&gp=0.jpg" target="_blank"> </head> <body> <nav> <div id="container" style="background-color: hotpink"> <img src="http://img5.imgtn.bdimg.com/it/u=3180850167,1059107384&fm=27&gp=0.jpg"height="45px"width="60px"> <a href="http://site.gzcc.cn/">首页</a> <a href="https://activity.idol001.com/">活动汇</a> <a href="https://idol001.com/app.html">下载APP</a> <input type="text" placeholder="请输入要搜索的内容"> <button>搜索</button> </div> </nav>
4.分别练习定义三类选择器:HTML 选择器;CLASS 类选择器;ID 选择器
<style type="text/css"> p{ color: crimson; } //HTML选择器 .textcolor{ color: crimson; } //class选择器 #commentcount{ background-color: orchid; } //id选择器 </style>