- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title >广州商学院</title> ???<base href="http://www.gzcc.cn/"> ???<link rel="stylesheet"type="text/css"href="test1.css"> ???<style type="text/css"> ????p{ ???????????color: black; ???????} ???????h2{ ????background-color: blue; ???????} ??????.textyellow{ ???????????color:green; ??????????????????} ???????#aa{ ???????????color: red; ???????}</style></head><body ><nav> ???<img src="http://www.gzcc.cn/2016/images/banner.png"><br> ???<a href="">首页</a> ???<a href="">下载</a> ???<input type="text"name="search"> ???<button type="submit">搜索</button> ???<a href="">登录</a> ???<a href="">注册</a> ???</nav> <p style="color: red;margin-left: 20px;">校园新闻</p> ??????<p>校园新闻</p> ??????<h3 id="2015">2015</h3> ??????<script> ??????????document.write(Date()) ???document.getElementById("2015").innerHTML=""; ??????</script><br> ??????<div id="container" style="width: 400px "> ???<div id="header" style="background-color:blue"><h2 align="center" style="margin-bottom: 0;">用户登录</h2></div> ??????<div id="content" style="background-color:#EEEEEE;height: 180px;width: 400px;float: left;text-align:center;"> ??????????<form > ??????????用户名:<input type="text" name="username"placeholder="请输入用户名"><br><br> ??????密码:<input type="Password" name="passname"placeholde=""><br><br> ???????????<input type="radio" value="student">学生 ???????????<input type="radio" value="teacher">教师 <br> ???????????<input type="button" value="登录" > ???????????<input type="button" value="重置"> ???????????</form> ??????</div> ??????????<div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 ? 广州商学院</div><br><br><h2>通知</h2> ??????????<p id="aa">广州商学院即将举办校运会放假3天!</p> ??????????<p >当天是双十一!</p><p class="textyellow">购物车又要满了!!</p><div>广州商学院即将举办校运会<span style="background-color: red;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 50px;color: black">放假3天!</span></div></body></html>
导航,头部,CSS基础
原文地址:http://www.cnblogs.com/suxihong/p/7680840.html