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= ...
随机推荐
- 【NOIP模拟】LCS及方案数（DP）
Description 对于一个序列
- vue-cli + sass 的正确打开方式
关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案: 但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法.且不说node-sass安装过程的 ...
- C#常用单元测试框架比较：XUnit, NUnit, 和 Visual Studio(MSTest)
做过单元测试的同学大概都知道以上几种测试框架,但我一直很好奇它们到底有什么不同,然后搜到了一篇不错的文章清楚地解释了这几种框架的最大不同之处. 地址在这里:http://www.tuicool.com ...
- LeetCode 18. 4Sum （四数之和）
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- require.js实现js模块化编程（二）：RequireJS Optimizer
require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...
- hibernate的集合映射（详细笔记）
- Ionic3 遇到的一些错误- Error: Your isarray platform does not have Api.js
执行:ionic cordova resources android --icon -i 生成应用图标时,出现下面的错误: 尝试解决方案: 删掉整个项目,重新创建,竟然好了....
- Linux学习（十三）du、df、fdisk磁盘分区
一.du du命令是查看文件或者目录大小的命令. 一般使用du -sh 查看,不用-sh参数意义也不大,应为不用这个参数,它会把目录下的所有文件大小递归的显示出来,就像这样: 如果用-sh参数: [r ...
- C++ primer第五版随笔--2015年1月6日
记录自己看这本书时的一些内容. 一.引用(reference) 引用为对象起了另外一个名字.例如: int ival=1024: int &relVal1=ival;//对,注意尽量不要用这方 ...
- K - Kia's Calculation (贪心）
Kia's Calculation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...