导航，头部，CSS基础

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

分别练习定义三类选择器：

HTML 选择器
CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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:yellow;
            text-decoration: underline;
        }
        .tea{
            background-color:white;
        }
        c{
            color:red;
        }
    </style>

</head>
<body>
     <nav>
         <img src="w_02_08_00.png">
         <a href="http://www.gzcc.cn/">首页</a>
         <a href="">下载</a>
         <input type="text" name="search">
         <button type="submit">搜索</button>
         <a href="">登录</a>
         <a href="">注册</a>
     </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
     id选择器和class选择器
<p>  双11全部商品</p>
<p class="tea">  双11全部商品</p>
<p class="textblue">  双11全部商品</p>
<p class="tea">双11五折商品</p>

     <hr>
     行内样式
<div style="width:500px;height:50px;background:black;"></div>
内嵌样式
<style type="text/css">
#div{width:500px;height:50px;background:black;}
</style>
<div id="div"></div>
     外部样式
<div id="div"></div>
     <hr>
</body>
</html>

posted @ 2017-10-17 19:08 066谢平坚阅读(118) 评论(0) 收藏举报

刷新页面返回顶部

066谢平坚

导航，头部，CSS基础

公告