zoukankan      html  css  js  c++  java
  • 导航,头部,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>管理信息系统</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=" 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; 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="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;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;
         }
        

          

  • 相关阅读:
    [noip2018]day1
    [CF1110d]JONGMAH
    BZOJ 2733 [HNOI2012]永无乡
    BZOJ 3123 [SDOI2013] 森林
    Nowcoder 练习赛26E 树上路径
    Luogu 2575 高手过招-SG函数
    BZOJ 1123[POI2008]BLO-Tarjan
    Nowcoder OI赛制测试2 F 假的数学题
    Luogu 2467[SDOI2010]地精部落
    Luogu 2216[HAOI2007]理想的正方形
  • 原文地址:https://www.cnblogs.com/lhw1997/p/7684167.html
Copyright © 2011-2022 走看看