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

    一、制作自己的导航条。

    二、HTML头部元素:

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

     

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

     

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

     

    三、练习样式表:

    行内样式表

    内嵌样式表

    外部样式表

    四、分别练习定义三类选择器:

    HTML 选择器

    CLASS 类选择器

    ID 选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title >江苏卫视</title>
        <base href="http://www.360kan.com/va/YsEmcHNx8Zk4DD.html">
        <link rel="stylesheet"type="text/css"href="171.css">
    </head>
    <body >
    <!--这是一个注释-->
    <h1 >蒙面唱将猜猜猜<span style="font-size: larger";>5</span></h1>
    <style type="text/css">
         p{
                color: skyblue;
            }
            h2{
         background-color: darkred;
            }
            .textyellow{
                color: pink;
                       }
            #tt{
                color: grey;
            }
    </style>
    
    <nav>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508238468810&di=322f24861e0b0762fee55e7d2b4799a7&imgtype=0&src=http%3A%2F%2Fimge.kugou.com%2Fsoft%2Fcollection%2F400%2F20160918%2F20160918215143740618.jpg"><br>
        <a href="http://list.youku.com/show/id_zefbfbd66efbfbd365eef.html?tpa=dW5pb25faWQ9MTAzNzUzXzEwMDAwMV8wMV8wMQ&refer=baiduald1705">首页</a>
        <a href="http://v.youku.com/v_show/id_XMzA4NzU3Nzg4MA==.html?spm=a2h1n.8261147.0.0">下载APP</a>
        <input type="text"name="search"placeholder="搜索歌手">
        <button type="submit">搜索</button>
        <a href="">登录</a>
        <a href="">注册</a>
        </nav>
    <a href="#2">1</a>
     <div>看蒙面唱将猜猜猜<span style="background-color: skyblue;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 50px;color: darkred">猜猜歌手是谁!</span></div>
    
    
    
           <h3 id="2015">2015</h3>
           <script>
               document.write(Date())
               document.getElementById("2015").innerHTML="????";
           </script>
           <p style="color: blueviolet;margin-left: 20px;">This is a paragraph</p>
           <p>This is a paragraph</p>
           <a href="#2">2</a>
           <div id="container" style=" 400px">
        <div id="header" style="background-color:pink"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>
           <div id="content" style="background-color: skyblue;height: 180px; 400px;float: left;">
               <form align="center">
               Username:<input type="text" name="username"placeholder="请输入账号"><br><br>
               Password:<input type="Password" name="passname"placeholder="8位密码"><br><br>
                <input type="radio" value="student">会员
                <input type="radio" value="teacher">非会员<br>
                   <input type="checkbox"value="true"><span>记住我</span><a href="">登录遇到问题</a><br>
                <input type="button" value="login" onclick=" alert('验证码')">
                <input type="button" value="cancel">
                </form>
    
    <h2 align="center">通知</h2>
    <p id="tt">你猜到“断肠人在天涯”是谁吗?</p>
    <p >你猜到“粉红的淘气女郎”是谁吗?</p>
    <p class="textyellow">你猜到“冷场王驾到”是谁吗?</p>
           </div>
                </div>
    </body>
    </html>

  • 相关阅读:
    [k8s微服务作业]-day2-Docker基础
    运维常用命令记录
    【莫比乌斯反演】学习笔记
    2021牛客OI赛前集训营-提高组(第一场)
    NOIP 计划 · 模拟赛 #10
    2021牛客OI赛前集训营-提高组(第二场)
    10.5 模拟赛题解报告
    组合数学
    线段树合并
    2021, 9,26 模拟赛
  • 原文地址:https://www.cnblogs.com/hxl316/p/7680921.html
Copyright © 2011-2022 走看看