码迷,mamicode.com
首页 > Web开发 > 详细

导航,头部,CSS基础

时间:2017-10-19 12:32:02      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:copy   1.5   import   back   ack   col   set   class   orange   

  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="http:www.gzcc.cn/"target="_blank">
          <link rel="stylesheet"type="text/css"href="171.css">
          <style type="text/css">
      p {
          font-size: 20px;
          background-color: lightcyan;
      }
      
      #tt{
      color:#FFD700;
      }
      .x1{
          color: red;
      }
      
      </style>
      </head>
      <body>
       <nav>
      
              <a href="">官方首页</a>
           <a href="">校内咨询</a>
              <a href="http://www.gzcc.cn/">下载APP</a>
              <input type="text"name="search">
              <button type="submit">搜索</button>
          <a href="">返回</a>
          <a href="">注销</a>
          </nav>
      
      <hr>
      <h1 style="color:cyan ">广州商学院</h1>
      <div id="container" style="width: 400px">
          <div id="header" style=" line-height: 1.5 !important;">"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>
      
      <div id="content" style="bheight: 150px;width: 400px;float: left;">
          <form action="">
                  <select>
                    <option>校内入口</option>
                    <option>校外入口</option>
      
                </select><br>
            账号:<input type="text" name="账号"placeholder="请输入学号"><br>
                  密码:<input type="password" name="密码"placeholder="请输入密码">
                  <br>
              <input type="radio"name="role"value="stu">学生
              <input type="radio"name="vehicle"value="tea">教师<br>
                  <input type="button" value="登录">
                  <input type="button" value="取消">
      
          </form>
      
      
      <div id="container" style="width: 400px">
          <div id="header" style=" line-height: 1.5 !important;">"><h2 align="center" style="margin-bottom: 0;"></h2></div>
      
      <div id="content" style="height: 150px;width: 400px;float: left;">
          <form action="">
          <p>交通指南</p>
              <P class="x1">人才招聘</P>
              <p id="tt">合作院校</p>
      
       </div>
          <div id="footer" style="clear: both;text-align: center;">版权。duym</div>
      </div>
       <div>
      
      
          </div>
      
      
      </body>
      </html>
      技术分享
      技术分享
      p {
          font-size: 20px;
          background-color: lightcyan;
      }
      
      #tt{
      color:#FFD700;
      }
      .x1{font-size: 20px;
          border-color: orangered;}
      h1{
      
      background-color:cyan;
      
      }

      技术分享

       

      
      

导航,头部,CSS基础

标签:copy   1.5   import   back   ack   col   set   class   orange   

原文地址:http://www.cnblogs.com/Carrie-chong/p/7691392.html

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