CSS:

<style>
  <!--属性选择器-->
    .container input[type="text"][name="txt"]{
border: 3px solid red;
}
  <!--关联选择器-->
  .c1 #l1 a .cc1{}      空格:表示在某个标签的下一级,或者下下一级...去找某个或者某批标签
</style>
<div class="container">
<input type="checkbox"/>
<input type="radio"/>
<input type="text" name="txt"/>
<input type="file"/>
<input type="submit"/>
<input type="button"/>
<input type="image"/>
</div>

CSS中margin和padding的区别:

<!--在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。-->
<div style="border: 1px solid red;with:300px;height: 300px" id="d1" padding: 20px>
<div style="border: 1px solid yellow;margin: 20px;with:200px;height: 200px" id="d2"></div>
</div>
注:d1中padding内边距,当padding发生变化时,改变的是d1本身;d2中margin外边距,当margin发生变化时,改变的是d2本身

position
    fixed:固定在浏览器窗口的位置
relative:相对位置
absolute:一般与relative一起使用,相对于父级(relative)的绝对定位 <div id="content" style="height: 2000px;background-color: #ddd">
<div style="background-color: beige;width: 300px;position:relative;height:300px;margin: 0 auto">
<h1>修改数据</h1>
<a style="position: absolute;right: 0;bottom: 0">absolute</a>
</div>
</div>
<a style="position: fixed;right:30px;bottom: 30px;" href="#content">返回顶部</a>
margin: 0 auto          相对于父标签居中

 div:不加"<div style="clear: both"></div>" 背景颜色红色不显示

div中 style="overflow:auto" 出现滚动条;style="overflow:hidden" 隐藏滚动条
<div style="background-color: red">
<div style="float: left;">111</div>
<div style="float: right;">222</div>
<div style="clear: both"></div>
</div> display:
none: 隐藏不显示
block:      变成块级标签
inline:     变成内联标签 body{
  margin:0 auto;
} 整个页面居中

JS:

var name = 'eric';           局部变量
name = 'alex';         全局变量
自执行函数:
(function (arg) {
alert(arg);
})("888");
document.getElementById('l1');

document.getElementsByName('l1')

document.getElementsByTagName('div')
window.onload = function () {

}//页面加载完成

document.ready = function () {

}//页面框架加载完成
window.location.href = "http://www.baidu.com"
当前页面跳转 window.open('http://www.baidu.com')
打开新标签页跳转 JQ:
扩展方法:
$.extend({
"erbi":function () {
return "sb";
}
}); alert($.erbi())
响应式:当页面宽度大于768px时,.cls样式生效
@media screen AND(min-width: 768px){
.cls{
background-color: red;
}
}
圆角属性:border-radius: 50%;
伪类与伪元素


/*当鼠标移动到a标签上时,执行下面样式*/
.header .menu a:hover{
background-color: green;
}
以后遇到布局,float的问题时:
.clearfix:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
 
												

HTML,CSS,JS,JQ的更多相关文章

  1. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  2. javascript创建css、js,onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  3. js随笔,css和js禁止网页选择文本,table的class样式使得td的class样式失效,jquery获得元素坐标

    css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-us ...

  4. SSH框架整合,css、js会被过滤器过滤掉

    如果是默认状态 <!--struts2过滤器--> <filter> <filter-name>struts2</filter-name> <fi ...

  5. 缓存处理后,F5刷新页面,css和js返回200,为什么不是304?

    最近在Apache上做网站的静态资源缓存,但是各种配置之后,发现css和js返回的状态码都是200,为什么不是304? 找来找去在知乎上得到了答案. 来自知乎的一个回答 http://www.zhih ...

  6. 麦子学院bootstrap实战项目官网,后台,jquery.singlePageNav.min.js ,wow.min.js,animate.css使用

    1.源码笔记 我的源码+笔记(很重要):链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2 感谢麦子学院项目相关视频:链接: https://pan.baidu ...

  7. 不带插件 ,自己写js,实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  8. 各种demo:css实现三角形,css大小梯形,svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  9. 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

  10. 【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token <

    使用shiro搭建项目过程中,总是出现登录页面 登录第一次有效果,登陆第二次出现302状态码,第三次又有效果,第四次又没有效果的局面. 因此,采用ajax提交页面登录的用户名和密码,但是在引用js的过 ...

随机推荐

  1. C#大牛应该知道的一些知识

    任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...

  2. python 调用shell命令的方法

    在python程序中调用shell命令,是件很酷且常用的事情…… 1. os.system(command) 此函数会启动子进程,在子进程中执行command,并返回command命令执行完毕后的退出 ...

  3. 数组和Hash表

    数组和Hash表 当显示多条结果时,存储在变量中非常智能,变量类型会自动转换为一个数组. 在下面的例子中,使用GetType()可以看到$a变量已经不是我们常见的string或int类型,而是Obje ...

  4. ASP.NET MVC:会导致锁定的会话

    ASP.NET MVC:会导致锁定的会话 背景 一直没有意识到会话的访问会导致会话锁定,现在想想这样设计是非常合理的,不过某些情况下这样会导致同一个会话的并发访问非常低(只能串行化),好在MS提供了机 ...

  5. java用正则表达式获取domain

    在工作中经常用到获取url的来源和域名的黑白名单功能.前段时间写了一个获取url中域名的方法.但是在测试过程中发现有些小问题. /** * 根据URL获取domain * @param url * @ ...

  6. 一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法!

    一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法! 对于大中型网站,为了增强用户体验,往往需要根据不同城市站点的用户推送或展现相应个性化的内容,如对于一些大型门户网站的新闻会有 ...

  7. Python之路3Day

    3.python基础补充(集合,collection系列,深浅拷贝)   一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements ...

  8. win32多线程-重写消息循环

    最近正在学习<win32多线程程序设计>,这是其中一段重写消息循环的代码事例,以后可能用的上. while (!quit || gNumPrinting > 0) { // Wait ...

  9. 通过qsort(void * lineptr[], int left, int rifht, int (*comp)(void *, void *))解读指针函数和void指针

    原函数是<The C programint  language >5.11文本行排序的程序,如下: void qsort(void *v[], int left, int right, i ...

  10. 2440开发板linux系统移植3G拨号上网收发短信(三)

    一.用text查看模式 下面的“发”是指我敲的命令,“收”是指回车后显示的信息包括其他接收的信息. ~ >: microcom -s 115200 /dev/ttyUSB1 发:at 收:OK ...