码迷,mamicode.com
首页 > 其他好文 > 详细

10.19

时间:2017-10-19 14:03:13      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:min   mon   nav   选择器   net   ima   tar   base   enter   

  1. 制作自己的导航条。
    <nav class="orange">
    
        <a href="" target="_blank" ><img src="http://i04.pictn.sogoucdn.com/95e6c5ef6fe062ae" id="logo" alt="logo"></a>
        <a href="" target="_blank"><button type="submit" class="orange">首页</button></a>
        <button type="submit" class="orange">歌单</button>
        <button type="submit" class="orange">电台</button>
        <button type="submit" class="orange">音乐人</button>
        <input type="text" id="select"placeholder="音乐搜索,找人">
        <button type="submit" class="orange">搜索</button>
    </nav>

    技术分享

  2. HTML头部元素:
    1. <base>  定义了页面链接标签的默认链接地址
      <base href="http://www.xiami.com/">
       <a href="" target="_blank" ><img src="http://i04.pictn.sogoucdn.com/95e6c5ef6fe062ae" id="logo" alt="logo"></a>
          <a href="" target="_blank"><button type="submit" class="orange">首页</button></a>
    2. <style>  定义了HTML文档的样式
      <style>
          #logo{
              height: 70px;
              width: 100px;
          }
          #select{
              font-size:23px;
          }
      </style>
    3. <link>  定义了一个文档和外部资源之间的关系
      <link rel="stylesheet" href="xiami.css">
  3. 练习样式表:
    1. 行内样式表
      <div id="header" style="background-color: yellow"><h3 align="center">虾米音乐账号密码登录</h3></div>
    2. 内嵌样式表
      <style>
          #logo {
              height: 70px;
              width: 100px;
          }
      
          #select {
              font-size: 23px;
          }
          .font{
              font-family: "幼圆";
              font-size: 23px;
          }
          ol{
              font-family: "方正兰亭超细黑简体";
              font-size: 19px;
          }
      </style>
    3. 外部样式表
      .orange{
          background-color: orange;
          }
      button{
          font-size: 23px;
      }
  4. 分别练习定义三类选择器:
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器
      <style>
          #logo {
              height: 70px;
              width: 100px;
          }
      
          #select {
              font-size: 23px;
          }
          .font{
              font-family: "幼圆";
              font-size: 23px;
          }
          ol{
              font-family: "方正兰亭超细黑简体";
              font-size: 19px;
          }
      </style>

      完整代码

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>登陆界面</title>
          <link rel="stylesheet" href="xiami.css">
      </head>
      <base href="http://www.xiami.com/">
      
      <p>
          <nav class="orange">
      
              <a href="" target="_blank"><img src="http://i04.pictn.sogoucdn.com/95e6c5ef6fe062ae" id="logo" alt="logo"></a>
              <a href="" target="_blank">
                  <button type="submit" class="orange">首页</button>
              </a>
              <button type="submit" class="orange">歌单</button>
              <button type="submit" class="orange">电台</button>
              <button type="submit" class="orange">音乐人</button>
              <input type="text" id="select" placeholder="音乐搜索,找人">
              <button type="submit" class="orange">搜索</button>
          </nav>
      </p>
      <body>
      <img src="http://pic.xiami.net/images/common/uploadpic/42/1508152158142.jpg" alt="虾米音乐">
      <div id="container" style="width: 350px" align="center">
          <div id="header" style="background-color: yellow"><h3 align="center">虾米音乐账号密码登录</h3></div>
          <div id="content">
              <form>
                  <p>账号:<input type="text" name="user" placeholder="请输入用户名"></p>
                  <p>密码:<input type="password" name="password"></p>
                  <p>
                      <input type="radio" name="role" value="stu">微信登录
                      <input type="radio" name="role" value="tea">微博登录
                      <input type="radio" name="role" value="tea">QQ登录
                  </p>
                  <input type="checkbox">记住我
                  <br>
                  <a href="http://www.xiami.com/member/getpassword?spm=0.0.0.0.szUgoA" target="_blank">忘记密码?</a>
                  <p><input type="button" value="login">
                      <input type="button" value="register"></p>
              </form>
      
          </div>
          <div id="footer" style="background-color: yellow"><p align="center"><i>版权@vvae</i></p></div>
      </div>
      <div>
          <select>
              <option>收藏</option>
              <option>评论</option>
              <option>点赞</option>
          </select>
          <ul class="font">
              <li>歌手排行榜</li>
          </ul>
          <ol>
              <li>许嵩</li>
              <li>陈奕迅</li>
              <li>周杰伦</li>
          </ol>
          <ul class="font">
              <li>歌曲排行榜</li>
          </ul>
          <ol>
              <li>断桥残雪</li>
              <li>明年今日</li>
              <li>黑色毛衣</li>
          </ol>
      </div>
      <hr>
      <div>
          <a href="http://www.xiami.com/album/2102873289?spm=a1z1s.6843761.1478643741.4.5GKsih" target="_blank">
              <img src="http://pic.xiami.net/images/common/uploadpic/84/1508147010884.jpg" alt="TAEMIN"></a>
          <a href="http://www.xiami.com/album/2102873289?spm=a1z1s.6843761.1478643741.4.5GKsih" target="_blank"><h4
                  align="center">TAEMIN</h4></a>
      </div>
      </body>
      </html>
      .orange{
          background-color: orange;
          }
      button{
          font-size: 23px;
      }
          #logo {
              height: 70px;
              width: 100px;
          }
      
          #select {
              font-size: 23px;
          }
          .font{
              font-family: "幼圆";
              font-size: 23px;
          }
          ol{
              font-family: "方正兰亭超细黑简体";
              font-size: 19px;
          }

      截图:

技术分享

技术分享

 

10.19

标签:min   mon   nav   选择器   net   ima   tar   base   enter   

原文地址:http://www.cnblogs.com/liminghui3/p/7691926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!