导航，头部，css基础

时间：2017-10-18 22:10:29 阅读：243 评论：0 收藏：0 [点我收藏+]

标签：link efault and ges lan images bar alt col

1.制作自己的导航条。

HTML头部元素：

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

练习样式表：

行内样式表

内嵌样式表

外部样式表

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

HTML 选择器

CLASS 类选择器

ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎你，请先登陆！</title>
    <base href="http://www.baidu.com"/>
    <base target="_blank">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="">登录页面</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
</nav>
<h2 id="green">请先登录！</h2>
<div id="container" style="width: 400px" align="center">
    <div id="header" style="background-color: aquamarine">
        <h2 align="center">登陆</h2>
    </div>
    <div id="content">
        <form>
            <p align="center">账号:
                <input type="text" name="user" placeholder="请输入用户名">
            </p>
            <p align="center">密码:
                <input type="password" name="psw">
            </p>
            <input type="radio" checked="checked">学生
            <input type="radio">老师
            <br>
            <input type="checkbox"> 记住密码<a
                href="https://passport.baidu.com/?getpassindex&tt=1508203677420&gid=01CB309-BEA2-415B-9B05-262DB927F635&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2Findex.php%3Ftn%3Dsite888_3_pg%26ssl_s%3D1%26ssl_c%3Dssl1_15f27f1bbc4">&nbsp登陆遇到问题？</a>
            <br>
            <input type="button" name="login" value="登陆">&nbsp&nbsp&nbsp
            <input type="button" name="regist" value="注册">
        </form>
    </div>
    <div style="background-color: aquamarine">
        <i>版权信息@</i>
    </div>
    <p>
        <select>
            <option>收藏</option>
            <option>点赞</option>
            <option>评论</option>

        </select>
    </p>
    <ul>
        <li>python</li>
        <li>c++</li>
        <li>html</li>

    </ul>
    <ol>
        <li>python</li>
        <li>c<span style="color: red">++</span></li>
        >
        <li>html</li>
    </ol>
</div>
</body>
</html>
<style>
    p {
        color: red;
        align-content: center;
    }

    #red {
        color: red;
    }

    #green {
        color: green;
    }
</style>

运行截图：

技术分享

导航，头部，css基础

标签：link efault and ges lan images bar alt col

原文地址：http://www.cnblogs.com/yishhaoo/p/7689275.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行