导航，头部，CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素：

<base>  定义了页面链接标签的默认链接地址

<style>  定义了HTML文档的样式

<link>  定义了一个文档和外部资源之间的关系

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.admin.css" rel="stylesheet">
    <style type="text/css">

        #banner {
            background: blue;
            height: 138px;
            width: 1583px;
        }

        .con {
            background: black;
            height: 67px;
            width: 1583px;
        }
    </style>
</head>
<body>

<div class="con">
    <div class="width-limit">
        <a class="btn write-btn" href="/writer#/" target="_blank">
            <i class="iconfont ic-write"></i>写文章
        </a> <a class="btn sign-up" href="/sign_up">注册</a>
        <a class="btn log-in" href="/sign_in">登录</a>
    </div>
    <nav>
        <a href="/">
            <span class="menu-text">首页</span>
            <base href="http://www.gzcc.cn/"/>
            <base target="_blank"/>
            <i class="iconfont ic-navigation-discover menu-icon"></i>
        </a>
        <input type="text" name="q" id="q" value="" autocomplete="off" placeholder="搜索" class="search-input">
    </nav>
</div>
<div id="banner">
    <div>
        <img src="http://www.gzcc.cn/2016/images/banner.png"/>
    </div>
</div>
</body>

　　

        3. 练习样式表：

行内样式表

内嵌样式表

外部样式表

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

HTML 选择器

CLASS 类选择器

ID 选择器

 #banner {
            background: blue;
            height: 138px;
            width: 1583px;
        }

        .con {
            background: black;
            height: 67px;
            width: 1583px;
        }
    </style>
</head>
<body>

<div class="con">
    <div class="width-limit">
        <a class="btn write-btn" href="/writer#/" target="_blank">
            <i class="iconfont ic-write"></i>写文章
        </a> <a class="btn sign-up" href="/sign_up">注册</a>
        <a class="btn log-in" href="/sign_in">登录</a>
    </div>
    <nav>
        <a href="/">
            <span class="menu-text">首页</span>
            <base href="http://www.gzcc.cn/"/>
            <base target="_blank"/>
            <i class="iconfont ic-navigation-discover menu-icon"></i>
        </a>
        <input type="text" name="q" id="q" value="" autocomplete="off" placeholder="搜索" class="search-input">
    </nav>
</div>
<div id="banner">
    <div>
        <img src="http://www.gzcc.cn/2016/images/banner.png"/>
    </div>
</div>
<div id="container" style="width: 400px">
    <div id="header" style="background-color: darkorange"><h2 align="center" style="margin-bottom: 0;">登录</h2></div>
</body>

　　

 

posted on 2017-10-18 21:45  043李庆  阅读(131)  评论(0)    收藏  举报

导航