css一些简单的例子
1.http协议
一：HTTP协议：hypertext transport protocol(超文本传输协议)
特点：
1.请求与响应
2.无状态的协议
请求协议：
请求首行：
请求头信息：
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9
Connection:keep-alive
Cookie:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598
Host:www.baidu.com
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
空行：
请求体：
--如果是get方式提交，数据是存放在UTL后面；而post是放在请求体中。
响应：
Bdpagetype:1
Bdqid:0x8f6422cd00053969
Bduserid:0
Cache-Control:private
Connection:Keep-Alive
Content-Encoding:gzip
Content-Type:text/html; charset=utf-8
Cxy_all:baidu+10365439d71d1527700dadaf75cc64b2
Date:Wed, 08 Nov 2017 10:05:53 GMT
Expires:Wed, 08 Nov 2017 10:05:32 GMT
Server:BWS/1.1
Set-Cookie:BDSVRTM=0; path=/
Set-Cookie:BD_HOME=0; path=/
Set-Cookie:H_PS_PSSID=1424_24866_24558_21107_24879_22159; path=/; domain=.baidu.com
Strict-Transport-Security:max-age=172800
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:HPHP
X-Ua-Compatible:IE=Edge,chrome=1
2.css选择器（标签名，id,类，属性，伪类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title> <style>
#div2{
color:red;
background:gray
}
#div1{
color:green;
background:blue
} </style>
<!--注意这里必须加上rel='stylesheet'，外部文件才能生效，告诉浏览器是层叠样式表-->
<!--在css选择器中有一个加载顺序，简单说就是就近原则。作用域越小，优先级越高-->
<link type="text/css" rel="stylesheet" href="mycss.css" />
</head>
<body>
<div id="div2">hello world</div>
<div id="div1">nihao</div>
<div id="div3">hellllll</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<!--四种选择器：
1.通用选择器
2.标签名选择器
3.id选择器（唯一值）
4.class类选择器(可以有多个，这多个成为一类)
5.基本组合选择器比如：#outer .c1{}---后代选择器
#outer,.c1{}---并列选择器
#outer>.c1>.c2{}---子代选择器
#outer+.c1{}----相邻标签选择器（必须是紧挨着才有用）
6.属性选择器：
-->
<style>
*{
font-size:45px;
}
p{
background-color:yellow;
}
div{
color:green;
}
#p1{
color:red;
}
.c1{
color:gray;
background-color:#8ABCD8
}
</style>
</head>
<body>
<p >hello</p>
<div >hello div hello span</div>
<p id="p1">你好</p>
<div class="c1">我子啊</div>
<div class="c1" >你们</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title> <style >
a:link{
color:red;
}
a:hover{
color:yellow;
}
a:visited{
color:purple;
}
a:active{
color:green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
3.外边框和内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距</title> <style>
body{
border:dashed 5px red; }
.div1{
border:dashed 2px black;
height:200px;
width:30%;
background-color:purple;
margin:10px;
padding:10px;
}
.div2{
border:dashed 2px black;
height:200px;
width:20%;
background-color:green;
margin:20px;
padding:20px
}
.div3{
border:dashed 2px black;
height:300px;
width:20%;
background-color:blue;
margin:30px;
padding:30px
}
</style>
</head>
<body>
<!--在css中一切都是盒子模型-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
body{
margin:0px;
border:solid 2px
}
.div1{
height:300px;
width:300px;
background-color:green;
border:1px solid black;
padding:20px;
}
.div2{
height:100px;
width:100px;
background-color:red;
margin:100px
}
</style>
</head>
<body>
<!--练习：300px*300px的盒子装着100px*100px的盒子，通过margin和padding设置小盒子移动到大盒子的中间--> <div class="div1">11
<div class="div2"> </div>
</div> </body>
</html>
css一些简单的例子的更多相关文章
- CSS雪碧，即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- Html5 和 CSS的简单应用
本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...
- 跨站脚本功攻击，xss，一个简单的例子让你知道什么是xss攻击
跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击 一.总结 一句话总结:比如用户留言功能,用户留言中写的是网页可执行代码,例如js代码,然后这段代码在可看到这段留言的不同一户的显示上就会 ...
- 简单的例子了解自定义ViewGroup(一)
在Android中,控件可以分为ViewGroup控件与View控件.自定义View控件,我之前的文章已经说过.这次我们主要说一下自定义ViewGroup控件.ViewGroup是作为父控件可以包含多 ...
- CSharpGL(1)从最简单的例子开始使用CSharpGL
CSharpGL(1)从最简单的例子开始使用CSharpGL 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo ...
- 用一个简单的例子来理解python高阶函数
============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...
- Spring-Context之一:一个简单的例子
很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...
- C#调用存储过程简单完整例子
CREATE PROC P_TEST@Name VARCHAR(20),@Rowcount INT OUTPUTASBEGIN SELECT * FROM T_Customer WHERE NAME= ...
随机推荐
- ubuntu 下修改文件访问权限chmod 777 -R *血的教训！没事别乱开权限！用谁开谁的就行。。。最后不要用这个命令，文件操作全部改用终端
本文转自: 个人建议 Ubuntu下修改目录权限命令如下:chmod 600 name (只有所有者有读和写的权限)chmod 644 name (所有者有读和写的权限,组用户只有读的权限)chmod ...
- Kotlin——最详细的数据类型介绍
任意一种开发语言都有其数据类型,并且数据类型对于一门开发语言来说是最基本的构成,同时也是最基础的语法.当然,kotlin也不例外.kotlin的数据类型和Java是大致相同的,但是他们的写法不同,并且 ...
- SGU 223 Little Kings（状压DP）
Description 用字符矩阵来表示一个8x8的棋盘,'.'表示是空格,'P'表示人质,'K'表示骑士.每一步,骑士可以移动到他周围的8个方格中的任意一格.如果你移动到的格子中有人质(即'P'), ...
- LINUX 笔记-netstat命令
netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...
- Entity Framework Core 2.0 使用代码进行自动迁移
一.前言 我们在使用EF进行开发的时候,肯定会遇到将迁移更新到生产数据库这个问题,前面写了一篇文章介绍了Entity Framework Core 2.0的入门使用,这里面介绍了使用命令生成迁移所需的 ...
- VirtualBox虚拟磁盘文件.vdi从C盘转移到D盘
起因很简单:C盘快爆满了,用PS修个图的都无法保存.用Everything搜索了下C盘,发现有个WIN7的.vdi文件,竟然占据了15G的宝贵C盘空间!记得有一次,我直接把.vdi文件转移,然后在Vi ...
- JavaScript的function参数的解释
在js里面写function时其参数在内部表示为一个数组.也就是说:我们定义一个function,里面的参数和将来调用这个function时传入的实参是毫无关系的,如果我们要定义一个function ...
- 学习笔记TF052:卷积网络，神经网络发展，AlexNet的TensorFlow实现
卷积神经网络(convolutional neural network,CNN),权值共享(weight sharing)网络结构降低模型复杂度,减少权值数量,是语音分析.图像识别热点.无须人工特征提 ...
- CentOS设置系统时间、硬件时间、以及定时校对时间
CentOS设置系统时间和时区 一.设置时区 方法一:使用setup工具 setup 选择Timezone configuration 选择Asia/Shanghai 空格键勾选上System clo ...
- 读书笔记-你不知道的JS上-闭包与模块
闭包定义 当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行. 看一段最简单的闭包代码: function foo() { var a = 2; //闭包 fun ...