导航,头部,CSS基础
- 制作自己的导航条。
<nav>
<a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/0901/20170901030703376.jpg" width="80px">首页</a>
<a href="www.gzcc.cn">下载App</a>
<input type="text"name="search">
<button typw="submit">搜索</button>
<select>
<option>学校</option>
<option>图书馆</option>
<option>教学楼</option>
<option>教务处</option>
<option>宿舍</option>
</select>
<a href="">登录</a>
<a href=""></a>
</nav> -
HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式
- <link> 定义了一个文档和外部资源之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广州商学院</title>
<style type="text/css">
p{
color: blue;
}
textblue{
color: blue;
}
textblue{
color:red;
}
#commentcount{
background-color: cornsilk;
}
</style>
<base href="http://i1.sinaimg.cn/dy/weather/main/indexl4/007/icons_32_yl/"target="_blank">
<style>
body
{
background-color: antiquewhite;
}
h1
{
color:blue;
text-align: center;
}
</style>
</head> - 练习样式表:
- 行内样式表
<div id="header" style="background-color: coral;"><h2 align="center" ></div>
- 内嵌样式表
<h3><span id="good">nice</span>评论</h3>
- 外部样式表
<h1 align="center">欢迎您的到来</h1>
<h2 i="2015">2015</h2>
<div id="container"style="width: 400px">
<div id="header"style="background-color: aqua"><h2 align="center" >欢迎登录</h2></div>
<div id="content"style="background-color: coral";height:150px,width:400px;float:left>
<from>
用户名:<input type="text"name="username"placeholder="请输入用户名"><br>
密码:<input type="password">
<input type="radio"name="role"value="stu">学生
<input type="radio"name="role"value="tea">老师
<br>
<input type="checkbox"value="true">记住我
<input type="button"value="登录";onclick="alert('登录')">
<input type="button"value="退出">
</from>
</div>
<div id="footer"style="background-color: burlywood"><p align="center" ><i>版权@</i></div>
</div>
<div>
- 行内样式表
- 分别练习定义三类选择器:
- HTML 选择器
p{
color: blue;
} - CLASS 类选择器
textblue{
color: blue;
}
textblue{
color:red;
} - ID 选择器
#commentcount{
background-color: cornsilk;
}
- HTML 选择器