zoukankan      html  css  js  c++  java
  • 导航,头部,CSS基础

    1.制作自己的导航条。

    2.HTML头部元素:

    <base>  定义了页面链接标签的默认链接地址

    <style>  定义了HTML文档的样式

    <link>  定义了一个文档和外部资源之间的关系

    3.练习样式表:

    行内样式表

    内嵌样式表

    外部样式表

    4.分别练习定义三类选择器:

    HTML 选择器

    CLASS 类选择器

    ID 选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小假期</title>
            <base href="http://p2.so.qhimgs1.com/sdr/1417_900_/t01933a30d37fb4009e.jpg" target="_blank">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <nav>
        <h2>首页</h2>
        <img src="t01933a30d37fb4009e.jpg" height="20" width="20">
        <input type="text" name="search">
        <button type="submit">搜索</button>
        <a href="https://www.jianshu.com/sign_in">登录</a>
        <a href="https://www.jianshu.com/sign_up">注册</a>
    </nav>
    <style>
               p {
                color: blue;
            }
    
            .starone {
                collapse: red;
            }
    
            #id {
                color: pink;
            }
    </style>
    
    <div>
        <p><span>全场6折</span></p>
        <p><span>全场6折</span></p>
        <p><span>全场6折</span></p>
        <h2 class="starone">今天6折起</h2>
        <p><span id="content">666</span>点击</p>
    </div>
    
    
       <h1 align="center">Hello你好</h1>
       <h3>2015</h3>
       <hr>
       <div id="container" style=" 400px">
           <div id="header" style="background-color: darkorange"><h2 align="center">登录</h2></div>
           <div id="content">
               <form>
                   username:<input type="text"name="username"placeholder="请输入用户名"><br>
                   password:<input type="password"name="pwd"><br>
                   <input type="radio"name="role"value="stu">student
                   <input type="radio"name="role"value="tea">teacher<br>
                   <input type="checkbox"name="vehicle"value="remember me">记住我<br>
                   <input type="button" value="登录验证">
               </form>
           </div>
           <div id="footer" style="background-color: darkorange"><p align="center"><i>版权@xiaojiaqi</i></p></div>
       </div>
       <div>
           <select>
               <option>喜欢</option>
               <option>收藏</option>
               <option>点击</option>
           </select>
           <ul>
              <li>python</li>
               <li>html</li>
           </ul>
           <ol>
               <li>python</li>
               <li>html</li>
           </ol>
       </div>
       <hr>
       <a href="http://www.baidu.com/s?wd=多啦a梦&ie=UTF-8">多啦A梦<br>
           <img src="http://a.cphotos.bdimg.com/timg?image&quality=100&size=b4000_4000&sec=1507859219&di=3a04247590e4cf6d501bfd8f164e5101&src=http://pic72.nipic.com/file/20150716/21109289_143220717453_2.jpg" height="100" width="50
    "></a>
    </body>
    
    </html>
    

      

           p {
                color: blue;
            }
    
            .starone {
                collapse: red;
            }
    
            #id {
                color: pink;
            }
  • 相关阅读:
    Devops的衍生-腾讯优测
    如何评估软件测试的效率
    优测云服务平台如何破解兼容性测试操作难点
    测试工程师进阶面试题目大合集
    测试人员必看-做好自动化测试的7大技能
    史上最全软件开发|程序员必备的工具集
    腾讯优测优分享 | 高质量产品、高质量照片
    腾讯优测优分享 | 多媒体,多问题
    腾讯优测优分享 | 双卡双待-工程师难言的痛
    C#面向对象基础
  • 原文地址:https://www.cnblogs.com/xiaojiaqi/p/7689106.html
Copyright © 2011-2022 走看看