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

导航,头部,CSS基础

时间:2017-10-17 23:02:31      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:页面   ges   enter   教师   radio   text   clear   doctype   一个   

  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>
      </head>
      <body>
        <style type="text/css">
      p{
          color:deepskyblue;size: 50px;
            }
            .textblue{
              color:gold;size: 50px;
            }
          #zg{
            color:red;size: 50px;
             }
      </style>
        <p id="zg">十九大</p>
      <p>以优异的成绩迎接党的十九大胜利召开</p>
      <p class="textblue">砥砺奋进 继往开来 共筑中共梦</p>
      <nav>
          <a href="http://www.gzcc.cn/">首页</a>
          <a href="">下载</a>
          <input type="text" name="search">
          <button type="submit">搜索</button>
          <a href="">登录</a>
          <a href="">注册</a>
          <a href="">意见反馈</a>
      </nav>
      
      <a href="http://www.gzcc.cn/">广州商学院
            <br>
            <img src="http://www.gzcc.cn/2016/images/banner.png" width="500" height="39" alt="gzcc.cn"/></a>
      <hr>
      <div id="container" style="width: 400px">
          <div id="header" style="background-color: aquamarine"><h2 align="center" style="margin-bottom: 0;">登录页面</h2></div>
      
      <div id="content" style="background-color: yellow;height: 150px;width: 400px;float: left;">
          <form action="">
              账 号:<input type="" name="账号" placeholder="请输入用户名"><br>
              密 码:<input type="" name="密码" placeholder="请输入密码"><br>
              <br>
              <input type="radio"name="role" value="stu">学生
              <input type="radio" name="role" value="tea">教师
              <input type="radio" name="role" value="tea">游客<br>
                  <input type="button" value="登录">
                  <input type="button" value="取消">
                  <input type="button" value="重置">
          </form>
      </div>
          <div id="footer" style="background-color: aquamarine;clear: both;text-align: center;">版权 ? duym</div>
      </div>
      <hr>
      
      <div id="container" style="width:400px">
          <div id="header" style="background-color:aquamarine;"><h2 align="center" style="margin-bottom:0;">搜索页面</h2></div>
      
            <div id="contant" style="background-color:yellow;height:220px;width:400px;float:left;">
              <form action=" "...></form>
             <form>
          <select >
              <option>学生</option>
              <option>教师</option>
              <option>游客</option>
          </select>
      </form>
              <ul>
                  <li>学校简介</li>
                  <li>大事记</li>
                  <li>全景校园</li>
              </ul>
              <ol>
                  <li>会计学院</li>
                  <li>信息技术与工程学院</li>
                  <li>旅游学院</li>
              </ol>
                <div id="footer" style="background-color:aquamarine;clear:both;text-align:center;">版权? duym</div>
      </body>
      </html>
      

        

      p{
         color:deepskyblue;
      }
      .textblue{
          color:gold;
          background-color: aqua;
        }
       #zg{
           color:red;
       }
      

        

导航,头部,CSS基础

标签:页面   ges   enter   教师   radio   text   clear   doctype   一个   

原文地址:http://www.cnblogs.com/lhw1997/p/7684167.html

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