导航,头部,CSS基础

2021-05-23 17:28

阅读:535

1.制作自己的导航条。

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>MIS问答平台title>
head>
body>
nav>
    a href="">img src="w_02_08_00.png">首页a>
    a href="http://www.gzcc.cn/">下载appa>
    input type="text"name="search">
    button type="submit">搜索button>
    a href="">登录a>
    a href="">注册a>
nav>
body>
html>

技术分享

 

2.HTML头部元素:

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

2.

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

 

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>MIS问答平台title>
     base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
    link rel="stylesheet" type="text/css" href="T5.css">
    style type="text/css">
        p{
            color:darkcyan;font-size: 10px;
        }
        .textblue{
            color:blue;
            text-decoration: underline;
        }
        .tea{
            background-color:yellow;
        }
        c{
            color:yellow;
        }
    style>
head>
body>
nav>
    a href="">img src="w_02_08_00.png">首页a>
    a href="http://www.gzcc.cn/">下载appa>
    input type="text"name="search">
    button type="submit">搜索button>
    a href="">登录a>
    a href="">注册a>
nav>
body>
html>

技术分享

3.练习样式表:

 a.行内样式表

 b.内嵌样式表

 c.外部样式表

 

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

 a.HTML 选择器

 b.CLASS 类选择器

 c.ID 选择器

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>MIStitle>
head>
body>
h1>MIS问答平台h1>

行内样式: div>
p>双11全部商品span style="font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace; font-size: 50px;background-color: #FFD700">50%OFF!span>p>
div>
hr>

内嵌样式表:style type="text/css">

  p{
    color:red;
    }
    h1{
    background-color:green;
    }
    .textblue{
    color:blue;
    }
style>
p>  双11全部商品50%OFF!p>
p>  双11全部商品50%OFF!p>
p class="textblue">  双11全部商品50%OFF!p>

 外部样式表:

通知


双11全部商品50%OFF!


双11全部商品50%OFF!


双11全部商品50%OFF!

 body> html>

技术分享

 css

 p{
    color:red;
    }
    h1{
    background-color:green;
    }
    .textblue{
    color:blue;
    tt{
            background-color:#FFD700;
    }

 

 

 


评论


亲,登录后才可以留言!