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

导航,头部,CSS基础

时间:2017-10-17 22:51:07      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:art   foo   containe   自己的   document   选择器   下载   back   文件   


  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/">
          <link rel="stylesheet"type="text/css"href="test1.css">
      
          <style type="text/css">
           p{
                  color: black;
              }
              h2{
           background-color: blue;
              }
             .textyellow{
                  color:green;
                         }
              #aa{
                  color: red;
              }
      </style>
      
      </head>
      <body >
      
      <nav>
          <img src="http://www.gzcc.cn/2016/images/banner.png"><br>
          <a href="">首页</a>
          <a href="">下载</a>
          <input type="text"name="search">
          <button type="submit">搜索</button>
          <a href="">登录</a>
          <a href="">注册</a>
          </nav>
      
       <p style="color: red;margin-left: 20px;">校园新闻</p>
             <p>校园新闻</p>
      
             <h3 id="2015">2015</h3>
             <script>
                 document.write(Date())
          document.getElementById("2015").innerHTML="";
             </script>
      
      <br>
      
             <div id="container" style="width: 400px ">
          <div id="header" style="background-color:blue"><h2 align="center" style="margin-bottom: 0;">用户登录</h2></div>
             <div id="content" style="background-color:#EEEEEE;height: 180px;width: 400px;float: left;text-align:center;">
                 <form >
                 用户名:<input type="text" name="username"placeholder="请输入用户名"><br><br>
             密码:<input type="Password" name="passname"placeholde=""><br><br>
                  <input type="radio" value="student">学生
                  <input type="radio" value="teacher">教师 <br>
                  <input type="button" value="登录" >
                  <input type="button" value="重置">
                  </form>
             </div>
                 <div id="footer" style="background-color:blue;clear:both;text-align:center;">版权 ? 广州商学院</div>
      
      <br><br>
      <h2>通知</h2>
                 <p id="aa">广州商学院即将举办校运会放假3天!</p>
                 <p >当天是双十一!</p>
      <p class="textyellow">购物车又要满了!!</p>
      <div>广州商学院即将举办校运会<span style="background-color: red;font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;font-size: 50px;color: black">放假3天!</span></div>
      </body>
      </html>
      

        技术分享

       

导航,头部,CSS基础

标签:art   foo   containe   自己的   document   选择器   下载   back   文件   

原文地址:http://www.cnblogs.com/suxihong/p/7680840.html

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