首页 > Web开发 > 详细

导航,头部,css基础

时间:2017-10-18 22:02:44      阅读:235      评论:0      收藏:0      [点我收藏+]

1.制作自己的导航条。

HTML头部元素:

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

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

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

练习样式表:

行内样式表

内嵌样式表

外部样式表

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

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基础

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!