导航，头部，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>JOOX超强音乐库</title>

    <link rel="stylesheet" type="text/css" href="t4.css">
    <base href="http://res.music.wechat.com/joox/zh_hk/image/limits/">
</head>
<body>


<nav>
    <img src="logo.png" width=50,height=50>
    <a href="">发现</a>
    <a href="">我的音乐</a>
    <a href="">下载客户端</a>
    <a href="">VIP服务</a>
    <input type="text" name="search" placeholder="搜索歌名、歌手、专辑">
    <input type="submit" value="搜索">
    <a href="">登录</a>
    <a href="">注册</a>
</nav>
<h1>通知</h1>
<p id="a">常见问题</p>
<p class="textblue">联系我们</p>
<p>用户意见</p>
<p><span style="background-color: crimson;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px">超强音乐，免费任你听</span></p>
<div  id="container" style="width:400px " >
    <div id="header" style="background-color:cyan"><h2 align="center" style="margin-bottom:0;">登录</h2></div>
    <div id="content" style="background-color:navajowhite;height:150px;width:400px;float:left;">
                <form>
    username:<input type="text" name="username" placeholder="请输入用户名"><br>
            password:<input type="password" name="password"><br>
                    <input type="radio">用户
                    <input type="radio">会员<br>
                    <input type="button" value="登录">
                    <input type="button" value="重置">

</form>
    </div>
    </div>

</body>
</html>

      css：

       p{
     color: aqua;
 }
        .textblue{
            color: blueviolet
        }
        #a{
            color: brown
        }

       

posted on 2017-10-17 18:51  087陆倩霞  阅读(210)  评论(0)    收藏  举报