导航,头部,CSS基础
- 制作自己的导航条。
- HTML头部元素:
- <base> 定义了页面链接标签的默认链接地址
- <style> 定义了HTML文档的样式文件
- <link> 定义了一个文档和外部资源之间的关系
- 练习样式表:
- 行内样式表
- 内嵌样式表
- 外部样式表
- 分别练习定义三类选择器:
- HTML 选择器
- CLASS 类选择器
- ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<base href="https://www.jd.com/?cu=true&utm_source=daohang.qq.com&utm_medium=tuiguang&utm_campaign=t_1000003625_qqmz&utm_term=89fb882cc9e940c6aa35790013ad4efd">
<link rel="stylesheet"type="text/css"href="171.css">
<style type="text/css">
p{
color: #e21037;
}
.textyellow{
color: #802104;
}
#t{
color: #ffdb1d;
}
</style>
</head>
<body>
<nav>
<img src="http://img00.hc360.com/home-a/201306/201306281422233199.jpg">
<a href="">首页</a>
<a href="">下载</a>
<input type="text"name="search"placeholder="关键词索引">
<input type="submit"value="搜索">
<a href="">登录</a>
<a href="">注册</a>
</nav>
<div>
<p>京东商城<span style="background-color:yellow ;font-family: '华文隶书', Helvetica, Arial, sans-serif;font-size: 50px;color:white">猜你喜欢</span></p>
</div>
<div id="denglu" style="width:400px">
<div id="headerone" style="background-color:lightblue;"><h2>登录</h2></div>
<div id="contentone" style="background-color:white;height:150px;width:400px;float:left;float:left;"align="center"">
<form>
用户名:<input type="text"name="用户名"placeholder="请输入用户名"><br>
密码:<input type="password"name="密码"placeholder="请输入密码"><br>
<input type="radio"name="role"value="stu">买家
<input type="radio"name="role"value="tch">卖家<br>
<input type="button"value="会员登录">
<input type="button"value="免费注册">
<input type="button"value="忘记密码">
</form></div>
<div id="footerone" style="background-color:lightblue;clear:both;text-align:center;">版权 duym</div>
</div>
<div id="wedang" >
<div id="headertwo"><h2>类别</h2></div>
<div id="contenttwo">
<form>
<select>
<option>加入购物车</option>
<option>加入收藏夹</option>
</select>
</form>
<ul>
<li>家用电器</li>
<li>数码用品</li>
<li>玩具乐器</li>
<li>医用保健</li>
<li>礼品鲜花</li>
<li>美妆个护</li>
</ul>
</div>
<div id="footertwo">版权 duym</div>
</div>
</body>
</html>