导航，头部，CSS基础

制作自己的导航条。

HTML头部元素：

<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式

<body>
<nav>
     <a href="http://localhost:59137/aaa/templates/lx.html?_ijt=piaotqep9pl034qe7m6iulfk3j">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508344569123&di=bef8
        c813e528b92c8e72afd15c00f8ec&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D7f8cb26d0b2442a7ae5bf5a1e473817d%2Fca1349540923dd54b7932f86d509b3de9d824878.jpg" width="30px" height="30px"></a>
    <a href="https://www.baidu.com/">百度</a>
    <input type="text" style="background-color: antiquewhite"  placeholder="Search">
    <select name="" id=""></select>
    <button type="submit">搜索</button>
</nav>

结果如下图所示：

练习样式表：

行内样式表

 <div id="header" p style="background-color: #ffcccc"> <h3 align="center">login in</h3></div>

内嵌样式表

<style>
    p{
    color:black;
    }
    .q{
    color:red;
    }
    #pq{
    color:#ff1a1a;
    }
</style>
<div>
    <p>全场五折起</p>
    <p>全场五折起</p>
    <p>全场五折起</p>
    <h1 class="p">全场3折起</h1>
    <span id="pq">199元起</span>
</div>

外部样式表

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

HTML 选择器
CLASS 类选择器

ID 选择器

{#        1  .HTML 选择器#}
    p{
    color:black;
    }
{#        2  .CLASS 类选择器#}
    .q{
    color:red;
    }
{#        3  .ID 选择器#}
    #pq{
    color:#ff1a1a;
    }

posted @ 2017-10-18 22:36 袁颖琳阅读(185) 评论(0) 收藏举报

刷新页面返回顶部

袁颖琳

导航，头部，CSS基础

公告