zoukankan      html  css  js  c++  java
  • 零基础学css

    选择器:标签选择器、id选择器、类选择器

    ----------------------------------------------------------------------------

    标签中:

    <p style="color:blue;"></p>:修饰p标签的字体颜色

    <p style="color:#BC8F8F"></p>

    <p style="color:rgb(205,92,92)"></p>

    ----------------------------------------------------------------------------

    <head>中:

    <style type="text/css">
        p{
           color: red;
        }
     </style>

    color: red;                   :标签内字体颜色

    background: green;    :背景色

    ------------------------------------------------------------------------------

    单独的css文件:

    html中引入css:<link rel="stylesheet" type="text/css" href="index.css">

    html代码:

    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti repellendus omnis, voluptatibus dicta quidem aliquam doloribus illum, ex a harum maiores. Sed quo deleniti debitis blanditiis itaque qui totam facilis?</p>
        <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde recusandae accusantium consequatur ex laboriosam tempora ipsa blanditiis, explicabo, quo aliquam temporibus enim natus sapiente provident eaque molestiae amet. Ut, molestiae.</p>
        <p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, perferendis est, itaque, aut aliquid nisi iure soluta quisquam quibusdam sint cumque ducimus error, commodi aliquam. Quis culpa temporibus officia libero.</p>

    css代码:

    p{
        color: lightblue;
        /*background: green;*/
    }
    #p1{
        color: red;
    }
    .p2{
        color: blue;
    }

    ----------------------------------------------------------------------------------

    div:

    ------------------------------------------------------------------------------------------------------------------------

    登录界面

    css代码:

    #container{
        height: 300px;
         400px;
        border: 1px solid;
        margin-top: 300px;
        margin-left: 40%;
        background-image: url("../img/qq.jpg");
        background-repeat: no-repeat;
        background-position: center center;
    }
    .input{
        height: 40px;
         280px;
        margin-top: 50px;
        margin-left: 50px;
    }
    .button{
        margin-top: 10px;
        margin-left: 100px;
    }
    .btn{
        margin-left: 30px;
    }
    #user{
        background-image: url("../img/head.png");
        background-repeat: no-repeat;/*图片背景取消平铺*/
        padding-left: 30px;
    }
    #password{
        background-image: url("../img/key.jpg");
        background-repeat: no-repeat;
        padding-left: 30px;
    }

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>QQ登录界面</title>
        <link rel="stylesheet" type="text/css" href="css/index4.css">
    </head>
    <body>
        <div id="container">
            <div class="input">
                用户名:<input type="text" id="user">
            </div>
            <div class="input">&nbsp;码:<input type="password" id="password">
            </div>
            <div class="button">
                <input type="button" class="btn" value="登录">
                <input type="button" class="btn" value="注册">
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    dddd
    asp.net web api rest风格与RPC风格调用
    使用ASP.NET WEB API文档来上传异步文件
    Fiddler2
    asp.net mvc3 局部页面@RenderBody @RenderPage@RenderSection使用方法详细说明
    paip.提升性能3倍使用栈跟VirtualAlloc代替堆的使用.
    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
    paip.关于动画特效原理 html js 框架总结
    paip.utf8,unicode编码的本质输出unicode文件原理 python
    paip. 混合编程的实现resin4 (自带Quercus ) 配置 php 环境
  • 原文地址:https://www.cnblogs.com/makangning/p/9364975.html
Copyright © 2011-2022 走看看