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= ...
随机推荐
- keepalived实现nginx高可用
keepalived是什么 keepalived直译就是保持存活,在网络里面就是保持在线了,也就是所谓的高可用或热备,用来防止单点故障(单点故障是指一旦某一点出现故障就会导致整个系统架构的不可用)的发 ...
- python + selenium 自动化测试框架
分享一个网站自动化测试框架 结构如下: test_project|--logs|---pages |---register_page.py| |---base_page.py|---test ...
- 实验之-----------修改oracle实例名
--查询当前数据库实例名称: SQL> select instance_name,status from v$instance; INSTANCE_NAME STATUS------------ ...
- 分布式数据库TiDB的部署
转自:https://my.oschina.net/Kenyon/blog/908370 一.环境 CentOS Linux release 7.3.1611 (Core)172.26.11.91 ...
- Windows Message Queue
Windows Message Queue Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- hdu 3555 Bomb(不要49，数位DP)
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submi ...
- 一款超好用轻量级JS框架——Zepto.js(上)
前 言 絮叨絮叨 之前我们介绍过JQuery怎么自定义一个插件,但没有详细介绍过JQuery,那么今天呢....我们还是不说JQuery,哈哈哈哈 但是今天我们介绍一款和JQuery超级像的一 ...
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- JAVA 后台SSM框架接收安卓端的json数据
最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...
- 从成本角度看Java微服务
近年来,微服务因其良好的灵活性和伸缩性等特点备受追捧,很多公司开始采用微服务架构或将已有的单体系统改造成微服务.IBM也于近日开源了轻量级Java微服务应用服务器 Open Liberty .但是采用 ...