零基础学css

最新推荐文章于 2024-02-07 17:24:10 发布

dengshixiang4897

最新推荐文章于 2024-02-07 17:24:10 发布

阅读量127

点赞数

原文链接：http://www.cnblogs.com/makangning/p/9364975.html

版权

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

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

标签中：

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

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

<head>中：

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;
    width: 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;
    width: 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>