导航，头部，CSS基础

时间：2017-10-17 21:52:03 阅读：236 评论：0 收藏：0 [点我收藏+]

标签：font url href put space images col tar char

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式文件
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BIG SALE in TB</title>
    <base href="https://ai.taobao.com/?pid=mm_12351394_2325537_70732358" target="_blank">
    <style...></style...>
</head>
<body>

<nav>

           <a class="logo" href="/">
              <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a>

           <a href="">我爱淘宝</a>
           <a href="">春夏款</a>
           <a href="">秋冬款</a>
           <a href="">男款</a>
           <a href="">女款</a>
           <a href="">童装</a>

           <input type="text"name="search">
           <button type="submit">搜索</button>
       </nav>

       <p></p>

       <div>
           <p><span style="font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace;font-size: 40px;color: crimson">双11全部商品</span>
               <span style="font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 60px;color: crimson">50%OFF!!!</span></p>
       </div>

       <p></p>
       <p></p>

       <h1>LOOK AT HERE!!!</h1>
       <p>双11全部商品50%OFF!!</p>
       <p>双11全部商品50%OFF!!</p>
       <p>双11全部商品50%OFF!!</p>

<p></p>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOB!!!</title>
    <style type="text/css">
        p{
            color: chocolate;
        }
        h1{
            color: darkred;
            background-color: antiquewhite;
        }
        .textblue{
            color: burlywood;
        }
    </style>
</head>
<body>
      <h1>NOTE!!</h1>
      <p>BIG SALE!!! 50%OFF!!!</p>
      <p>BIG SALE!!! 50%OFF!!!</p>
      <p>BIG SALE!!! 50%OFF!!!</p>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOB!!!</title>
    <style type="text/css">
        p{
            color: chocolate;
        }
        h1{
            color: darkred;
            background-color: antiquewhite;
        }
        .textblue{
            color: dimgrey;
        }
    </style>
</head>
<body>
      <h1>NOTE!!</h1>
      <p>BIG SALE!!! 50%OFF!!!</p>
      <p>BIG SALE!!! 50%OFF!!!</p>
      <p class="textblue">BIG SALE!!! 50%OFF!!!</p>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="hw017.css">
    <title>BOB!!!</title>

</head>
<body>
      <h1>NOTE!!</h1>
      <p>BIG SALE!!! 50%OFF!!!</p>
      <p id="brown">BIG SALE!!! 50%OFF!!!</p>
      <p class="textorange">BIG SALE!!! 50%OFF!!!</p>

</body>
</html>

h1{color: brown}
        p{color: chocolate;}
        .textorange{color: khaki;}
        #brown{color: navajowhite;}

技术分享

导航，头部，CSS基础

标签：font url href put space images col tar char

原文地址：http://www.cnblogs.com/laifai666/p/7683075.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行