YWEIEN

导航

导航,头部,CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素:
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表:
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. 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>

 

 

posted on 2017-10-17 22:00  YWEIEN  阅读(221)  评论(0编辑  收藏  举报