选择器：标签选择器、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;

    width: 400px;

    border: 1px solid;

    margin-top: 300px;

    margin-left: %;

    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>

零基础学css的更多相关文章

  1. 零基础学css第二天

    内边距与外边距: <!DOCTYPE html> <html> <head> <title></title> <style type= ...

  2. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  3. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  4. 《Windows编程零基础学》第零节

    首先很开心申请到了这一个专栏<Windows编程零基础学> 这是第一篇文章,在这里,我将讲述一些基础的知识. 什么是Windows编程 所谓Windows编程就是在Windows平台上开发 ...

  5. 【视频】零基础学Android开发：蓝牙聊天室APP（四）

    零基础学Android开发:蓝牙聊天室APP第四讲 4.1 ListView控件的使用 4.2 BaseAdapter具体解释 4.3 ListView分布与滚动事件 4.4 ListView事件监听 ...

  6. 【视频】零基础学Android开发：蓝牙聊天室APP（二）

    零基础学Android开发:蓝牙聊天室APP第二讲 2.1 课程内容应用场景 2.2 Android UI设计 2.3 组件布局:LinearLayout和RelativeLayout 2.4 Tex ...

  7. [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念

    上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...

  8. [Python] 文科生零基础学编程系列三——数据运算符的基本类别

    上一篇:[Python] 文科生零基础学编程系列二--数据类型.变量.常量的基础概念 下一篇: ※ 程序的执行过程,就是对数据进行运算的过程. 不同的数据类型,可以进行不同的运算, 按照数据运算类型的 ...

  9. 零基础学python-2.8 字典

    字典类型,事实上就是相当于java的map,通过key-value来记录数据,工作原理类似于哈希表 差点儿全部的python对象都能够作为key,可是一般最经常使用的还是数字和字符串 字典元素使用{} ...

随机推荐

  1. 栅格那点儿事（四C）

    栅格渲染之拉伸(Stretch) 现在我们知道如何在ArcGIS中渲染栅格数据了,但是还有一个常常会碰到的问题,尤其是在使用老版本的ArcGIS的时候,为啥我加了一个栅格数据进来,啥也看不见,是黑色的 ...

  2. Go编程语言学习笔记

    go如何组织代码?它有一个工作空间的概念.所谓工作空间其实就是一个目录,其中包含三个子目录. src目录包含Go的源文件,它们被组织成包(每个目录都对应一个包), pkg目录包含包对象, bin目录包 ...

  3. “System.OutOfMemoryException”类型的未经处理的异常在 mscorlib.dll 中发生

    在VS中写程序遇到这样的问题.但数据规模小的时候不出现,但数据规模大的时候就出现.但我的电脑用32G内存.处理的文本也不是很多,在文本alignment时出错.

  4. Java 线程生命周期

    |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此 ...

  5. [转]Android时间获取与使用

    编写Android网络程序时难免会遇到手机时间不准确的问题,本文总结了一些常用的时间获取与校正方法: 转载请注明:http://blog.csdn.net/xzy2046 1.获取本机当前时间: Ti ...

  6. Node.js-npm安装包目录修改

    请借我一个哭的表情....=.= 等我发现的时候为时已晚~所有安装的包都去了C盘,而强迫症的我想卸载了之前所有的包再重新下一遍!!! 切记!安装好npm后,记得修改: 原始路径: 修改后的路径(如果没 ...

  7. phpStudy：使用localhost无法访问的解决方案

    今天遇到新的问题,很有意思,当使用Localhost时,发现报403错误: 百度找到问题所在:没有权限问题 所以我们打开phpStudy,找到配置文件“vhosts-conf”,看到的情况是这样的 接 ...

  8. 二叉索引树，LA2191，LA5902，LA4329

    利用了二进制,二分的思想的一个很巧妙的数据结构,一个lowbit(x):二进制表示下的最右边的一个1开始对应的数值. 那么如果一个节点的为x左孩子,父亲节点就是 x + lowbit(x),如果是右孩 ...

  9. python 最简单的web应用(一)

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. server.py文件 #!/usr/bin/env python # -*- coding: ...

  10. Git版本控制的原理

    Git工作区域 工作目录(Working Directory) 暂存区(Stage/Index) 资源库(Repository或Git Directory) 远程的git仓库(Remote Direc ...