导航，头部，CSS基础
- 制作自己的导航条。
- HTML头部元素：
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表：
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>youku</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">
h1{
color:gray}
p{
color:darkcyan;font-size: 20px;
}
.textblue{
color:pink;
text-decoration: underline;
}
c{
color:yellow;
}
</style>
</head>
<body>
<nav>
<img src="w_02_08_00.png">
<a href="http://www.youku.com//">首页</a>
<a href="">download</a>
<input type="text" name="search">
<button type="submit">搜索</button>
<a href="">登录</a>
<a href="">注册</a>
</nav>
<hr>
类型
<p> 电视剧</p>
<p > 电影</p>
<p > 综艺</p>
<p > MV《6》</p>
<h1>第一次</h1>
<h2>2017</h2>
<p></p>
<div>
<p><span style="background-color: white;font-size: 20px"; fon>不懂就问</span></p>
</div>
<hr>
<h2> 优酷登录页面</h2>
<div id="container" style="width: 400px">
<div id="header" style="background-color: pink"><h2 align="center"
style="margin-bottom: 0;">登录</h2></div>
<div id="content" style="background-color: lightgreen;height: 150px;width: 400px;float: left;"align="center">
<from>
username<input type="text" name="firstname"> <br>
password<input type="password" name="pwd" > <br>
<input type="radio" name="role" value="stu" center >普通会员
<input type="radio" name="vehicle" value="Bike">VIP<br>
<input type="button" value="login">
<input type="button" value="cancle">
</from>
</div>
<div id="footer" style="background-color: pink;clear: both;text-align: center;"> duym</div>
</div>
<hr>
<div id="container" style="width: 400px">
<div id="header" style="background-color:skyblue"><h2 align="center"
style="margin-bottom: 0;"></h2>相关节目related</div>
<div id="content" style="background-color:gray;height: 300px;width: 400px;float: left;">
<from>
<select>
<option>问答</option>
<option>提问</option>
<option>收藏</option>
</select>
</from>
<ul>
<li>小手牵小狗</li>
<li>阿拉蕾</li>
<li>公主</li>
<li>小涵涵</li>
<li>青克乐</li>
</ul>
<ol>
<li>小手牵小狗</li>
<li>阿拉蕾</li>
<li>公主</li>
<li>小涵涵</li>
<li>青克乐</li>
</ol>
</div>
</div>
<div id="footer" style="background-color: skyblue;clear: both;text-align: center;"></div>
<hr>
</body>
</html>
浙公网安备 33010602011771号