导航，头部，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>
    <link rel="stylesheet" href="dao.css" type="text/css">
     <base target="_blank" />
</head>
<body >
<nav class="nav">
    <ul>
        <li><a href=""><img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508251463981&di=1d8e9eccad48cc4154895846c19850d6&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F38%2F40%2F01300542658130140593408122952_s.png">首页</a></li>
    <li><a href=""><img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508241260&di=b5536e6833e2da3f92baf4e3770ddcc7&src=http://www.yooyoo360.com/photo/2009-1-1/20090112122027672.jpg">下载</a></li>
    <li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508250905764&di=f9604efd81d162d59c11a29e31757e03&imgtype=0&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fsoft%2Fimages%2F2012%2F0424%2F20120424041554637.jpg">新闻</a></li>
        <li><a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508241071&di=8a1a78dc3c3fbdde46b85c88b9392486&src=http://pica.nipic.com/2007-10-12/200710128331170_2.jpg">登录</a></li>
        <li><a href=""><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3605377444,2155870739&fm=27&gp=0.jpg">短消息</a></li>
        <button style="float: right;margin: 5px auto;border-radius: 5px;height: 30px" type="submit">搜索</button>
        <input style="float: right;margin: 5px auto;border-radius: 8px;width: 200px;height: 20px;"  type="text" name="search"PLACEHOLDER="输入要搜索的内容">
    </ul>
</nav>
 </div>
</body>
</html>

#header{
            background-color:darkslategray;
            text-align:center;
            font-family: "华文彩云";
            color:white;
            font-size: 50px;
        }
        #content{
            background-color: blanchedalmond;
            width: 400px;
            float: left;
            line-height: 40px;
        }
        .nav ul{
            width: 1000px;
            border: 1px solid hotpink;
            margin: 50px auto 0px auto;
        }
        .nav ul li{
            float: left;
        }
        .nav ul li a{

            width: 80px;
            height: 28px;
            line-height: 28px;
            background-color: hotpink;
            color: aliceblue;
            margin: 5px 35px;
            font-size: 12px;
            display: block;
            text-align: center;
            text-decoration: none;
        }
        .nav ul li a:hover{
            width: 78px;
            height: 26px;
            line-height: 28px;
            border: 1px solid hotpink;
            background: #FFF;
        }
        img{
            height: 28px;
            width:28px;
            float: left
        }

鼠标经过导航时的效果：

posted @ 2017-10-17 20:08 078刘凯敏阅读(175) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

肥牛

导航，头部，CSS基础

公告