导航,头部,CSS基础

2021-05-23 20:30

阅读:21331

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

 

制作自己的导航条。

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

                a href="">首页a>
                a href="">HTMLa>
                a href="">CSSa>
                a href="">pythona>
                a href="">更多……a>

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

    nav>
div>
h1 align="center">MIS互问平台h1>
h6>2017h6>
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">teacherbr>
            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>pythonli>
        li>javali>
        li>htmlli>
    ul>
    ol>
        li>pythonli>
        li>javali>
        li>htmlli>
    ol>
div>
div id="container" style="width:400px ">
        div id="header" style="background-color: lightpink; ">h2 align="center" style="margin-bottom:0;">Searchh2>div>
        div id="content" style="background-color: lightpink;height:150px;width:400px;float: left;">

           dl>
                dt>Coffeedt>
                dd>Black hot drinkdd>dl>

        div>
div>
body>
html>

技术分享

 

HTML头部元素:

    1.   定义了页面链接标签的默认链接地址
    2.   定义了一个文档和外部资源之间的关系

 

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="">HTMLa>
                a href="">CSSa>
                a href="">pythona>
                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>Helloh1>
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>Helloh1>
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


评论


亲,登录后才可以留言!