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= ...
随机推荐
- uva12716 GCD XOR
个人博客:http://acbingo.cn/2015/06/04/uva12716/ 被紫薯上*和素数筛法类似*这句话给误解了= =,一直以为存在某种关系,在枚举c或者a时,可以根据当前的答案,筛掉 ...
- 如何才能通俗易懂的解释javascript里面的"闭包"?
看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...
- 温故而知新 Volley源码解读与思考
相比新的网络请求框架Volley真的很落后,一无是处吗,要知道Volley是由google官方推出的,虽然推出的时间很久了,但是其中依然有值得学习的地方. 从命名我们就能看出一些端倪,volley中 ...
- 4天精通arcgis
真是掉进了一个史无前例的坑 --ArcGIS产品线为用户提供一个可伸缩的,全面的GIS平台. 这是百科的介绍,简单来讲,这就是一个地图,可以搞事情. 学的是ArcGIS API for JavaScr ...
- JQ编写楼层效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Problem J
Problem Description 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? Input 输入数据首先包含一个整数N,表示测试实例的个数,然后是 ...
- 关于01背包求第k优解
引用:http://szy961124.blog.163.com/blog/static/132346674201092775320970/ 求次优解.第K优解 对于求次优解.第K优解类的问题,如果相 ...
- 有道云翻译接口 Show类
package com.yangchong.fanyi; import java.awt.EventQueue;import java.awt.Toolkit; import javax.swing. ...
- Linux系列教程(十四)——Linux用户和用户组管理之相关配置文件
前面我们介绍了软件包管理.首先介绍了rpm包的相关命令,但是我们发现直接安装rpm包会被其依赖性折磨的不行,然后解决办法是yum在线管理,通过yum命令安装rpm包能自动帮助我们解决依赖性.最后又介绍 ...
- 关于Spring在多线程下的个人疑问
在Web开发中,不可避免的是需要遇到并发操作的,并发操作就有可能会引发我们的多线程安全问题.比如说,我们多线程下访问同一个变量并且有一个线程做出修改那么就会使得我们另外的线程在不知情的情况下被修改自己 ...