• 导航,头部,CSS基础



    1. 制作自己的导航条。
    <nav>
    
        <a href="http://www.gzcc.cn"><img src="http://www.logo71.com/uploads/allimg/130606/8-1306061335461b.jpg" width="80px;">首页</a>
        <input type="text">
        <button type="submit">搜素</button>
         <select>
            <option>学校概况</option>
            <option>教学单位</option>
            <option>管理服务</option>
            <option>招生就业</option>
            <option>国际教育</option>
        </select>
    </nav>
    <p class=

    运行结果是:

    1. HTML头部元素:
      1. <base>  定义了页面链接标签的默认链接地址
      2. <style>  定义了HTML文档的样式
      3. <link>  定义了一个文档和外部资源之间的关系
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>gzcc</title>
        <base href="" target="_blank">
        <link rel="stylesheet" href="web.css">
        <style>
            p {
                color: blue;
            }
    
            .bk {
                color: lavenderblush;
            }
    
            #ok {
                background-color: lightseagreen;
            }
        </style>
    
    
    </head>
    1. 练习样式表:

    行内样式表

    <div id="header" style="background-color: crimson;"><h2 align="center">登录</h2></div>

    内嵌样式表

    <head>
    <style>
    .bk {
    color: lavenderblush;
    }

    #ok {
    background-color: lightseagreen;
    }
    </style>

    </head>

    外部样式表

    
    
    <head>
    <link rel="stylesheet" href="web.css">
    </head>
     
    1. 分别练习定义三类选择器:
      1. HTML 选择器
      2. CLASS 类选择器
      3. ID 选择器
    {#        1  .HTML 选择器#}
            p {
                color: blue;
            }
    {#        2  .CLASS 类选择器#}
            .bk{
                color: lavenderblush;
            }
    {#        3  .ID 选择器#}
            #ok {
                color:  lightseagreen;
            }

    全部运行结果:

  • 相关阅读:
    python习题-用交集方式产生随机密码
    python习题-产生8位随机密码要包含大小写及数字
    python习题-替换敏感词
    python习题-注册用户程序
    Python习题-登录
    Python习题-统计日志中访问次数超过限制的IP
    PyCharm配置过程记录
    jmeter 多压力机并发测试过程
    Jmete基础使用
    Linux 中直接 I/O 机制的介绍
  • 原文地址:https://www.cnblogs.com/iamzhuangyuan/p/7688675.html
Copyright © 2020-2023  润新知