导航,头部,CSS基础

2021-05-23 17:29

阅读:490

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

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

 

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

 

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>BIG SALE in TBtitle>
    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


评论


亲,登录后才可以留言!