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= ...
随机推荐
- WebService的简单运用添加删除
WebService是一种跨编程语言和跨操作系统平台的远程调用技术,简单来说就是将数据存储到项目的文件夹下 .NET中基于DOM核心类 XmlDocument 表示一个XML文档 XmlNode表示X ...
- 关于NOIP2014“无线网络发射器选址”一题的衍生题目的思考及思维方向
无线网络发射器选址 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形 ...
- ASP.NET Core 企业级开发架构简介及框架汇总
企业开发框架包括垂直方向架构和水平方向架构.垂直方向架构是指一个应用程序的由下到上叠加多层的架构,同时这样的程序又叫整体式程序.水平方向架构是指将大应用分成若干小的应用实现系统功能的架构,同时这样的系 ...
- LeetCode 485. Max Consecutive Ones （最长连续1）
Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...
- swift之函数式编程（三）
文章来源于<Functional Programing in Swift>,本系列仅仅是观后概括的一些内容 Wrapping Core Image 上一篇文章我们介绍了 高阶函数并且展示了 ...
- [转]Java - 集合框架完全解析
数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.Java提供了几个能有效地组织和操作数据的数据结构,这些数据结构通常称为Java集合框架.在平常的学习开发中,灵 ...
- 执行计划查看，autotrace工具的使用
---工具的简单介绍 001啥是autotrace,翻译自动跟踪,跟踪什么额? SQL的执行过程 我们老是讲ORACLE体系结构里面,共享池有个组件库高速缓存,存放SQL语句执行计划 什么 ...
- Lua如何管理”package”
Lua如何管理"package" 方式一: 私有方法和变量都需要显式定义为local类型的,这很容易造成错误.一旦不小心漏写,就又将方法定义为全局的了. "package ...
- HDU1166 敌兵布阵(树状数组)
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- 用正则表达式（regex）匹配多项式（polynomial）
因为作业的要求,我需要识别用户从命令行输入的多项式,并且要提取出其中的系数.指数以便用于后续计算. 曾经想过用一个数组把用户所有的输入全部存进来,然后在写逻辑判断.但想想那复杂的逻辑,头皮都发麻,这时 ...