码迷,mamicode.com
首页 > Web开发 > 详细

导航,头部,CSS基础

时间:2017-10-17 18:55:44      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:pytho   button   搜索   css基础   utf-8   win   自己   首页   btn   

 

制作自己的导航条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIS</title>
</head>
<body bgcolor="#ffb6c1">
<div class="container navigation">
    <nav>

                <a href="">首页</a>
                <a href="">HTML</a>
                <a href="">CSS</a>
                <a href="">python</a>
                <a href="">更多……</a>

                <a href="javascript:;" class="runoob-pop">登录</a>

    </nav>
</div>
<h1 align="center">MIS互问平台</h1>
<h6>2017</h6>
<div id="container1" style="width:400px" >
    <div id="head" ><h2 align="center" style="margin-bottom:0;">登陆</h2></div>
    <div id="content1" style="backgroud-color:#ff5412;height:150px;width:400px;float:left;">
        <form>
            用户名:<input type="text" name="用户名" style="backgroud-color:black" placeholder="请输入用户名" ><br>
            密码:<input type="text" name="密码"placeholder="请输入密码"><br>
            <input type="radio">student
            <input type="radio">teacher<br>
            <input type="submit" name="Button1" value="登陆" id="Button1" class="btn_dl">
            <input type="submit" name="Button2" value="取消" id="Button2" class="btn_qx">
        </form>

    </div>
    <div id="head2" style="backgroud-color:#ff5412;"><h2 align="center" style="margin-bottom:0;">搜索</h2></div>
    <select>
        <option>问题</option>
        <option>答案</option>
    </select>
    <ul>
        <li>python</li>
        <li>java</li>
        <li>html</li>
    </ul>
    <ol>
        <li>python</li>
        <li>java</li>
        <li>html</li>
    </ol>
</div>
<div id="container" style="width:400px ">
        <div id="header" style="background-color: lightpink; "><h2 align="center" style="margin-bottom:0;">Search</h2></div>
        <div id="content" style="background-color: lightpink;height:150px;width:400px;float: left;">

           <dl>
                <dt>Coffee</dt>
                <dd>Black hot drink</dd></dl>

        </div>
</div>
</body>
</html>

技术分享

 

HTML头部元素:

    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式文件
    3. <link>  定义了一个文档和外部资源之间的关系

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="http://pic.qiantucdn.com/10/81/49/"target="_blank">

</head>
<body bgcolor="#ffb6c1">
<div class="container navigation">
    <nav>
                <img src="86bOOOPIC22.jpg!qt780" width="50" height="50">
                <a href="">首页</a>
                <a href="">HTML</a>
                <a href="">CSS</a>
                <a href="">python</a>
                <a href="">更多……</a>

                <a href="javascript:;" class="runoob-pop">登录</a>

    </nav>
</div>
</body>
</html>

技术分享

 

练习样式表:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        h1{color:firebrick}
        p{color:bisque;}
        .textorange{color:orangered;}
        #red{color:red;}
        </style>
</head>
<body bgcolor="#ffb6c1">
<h1>Hello</h1>
<p>When everything is gone with the wind, when all those special moments into eternity.
<p class="textorange">When everything is gone with the wind, when all those special moments into eternity.
<p id="red">When everything is gone with the wind, when all those special moments into eternity.
</body>
</html>

外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="c.css">
</head>
<body bgcolor="#ffb6c1">
<h1>Hello</h1>
<p>When everything is gone with the wind, when all those special moments into eternity.
<p class="textorange">When everything is gone with the wind, when all those special moments into eternity.
<p id="red">When everything is gone with the wind, when all those special moments into eternity.
</body>
</html>
h1{color:firebrick}
        p{color:bisque;}
        .textorange{color:orangered;}
        #red{color:red;}

技术分享

 

导航,头部,CSS基础

标签:pytho   button   搜索   css基础   utf-8   win   自己   首页   btn   

原文地址:http://www.cnblogs.com/xxxiaoxiannv/p/7680900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!