HTML网页与CSS

金留庆 · 发表于 2018-6-2 17:52:19

1、文本两端对齐 CSS ：

text-align: justify;

复制代码

2、内容为空、相邻兄弟元素：

article:empty + div{display:block;}

复制代码

也可以配合 :before 、 :after 使用。
3、自动省略号：

text-overflow:ellipsis;overflow:hidden;white-space:nowrap;

复制代码

金留庆 · 发表于 2018-6-7 15:26:39

css 中，长度值可以用 calc() 计算。
vh：窗口高度的 1%
vw：窗口宽度的 1%

金留庆 · 发表于 2018-6-16 15:52:18

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>标题</title>
<style>
html,body,table{margin:0;padding:0;width:100%;height:100%;}
#page{vertical-align:middle;text-align:center;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td id="page">

</td></tr></tbody>
</table>
</body>
</html>

金留庆 · 发表于 2018-6-18 11:36:45

HTTP 响应头控制下载
默认
Content-Disposition: inline
下载
Content-Disposition: attachment
下载，指定文件名
Content-Disposition: attachment; filename="filename.jpg"

金留庆 · 发表于 2018-6-25 16:32:56

跳转页面
<meta http-equiv="refresh" content="5;url=index.html">

金留庆 · 发表于 2018-7-2 09:29:40

相对定位与绝对定位

position:static;
静态定位是 position 的默认值，元素框正常生成，也就是没有定位时的正常显示。

position:relative;
相对定位：相对定位是相对于元素在文档中的初始位置；
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

position:absolute;
绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即非 static 的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

position:fixed;
固定定位是相对于浏览器窗口的绝对定位。

top、right、bottom、left

金留庆 · 发表于 2018-7-30 15:35:02

blob url，类似于 blob:http://www.qq.com/884da595-7816-4211-b6c3-607c444556ef

金留庆 · 发表于 2018-8-15 11:31:21

页面完全嵌入

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>标题</title>
<style>
html,body,iframe{margin:0;padding:0;width:100%;height:100%;}
html,body{overflow:hidden;}
</style>
</head>
<body>
<iframe src="要嵌入的网页" name="iframe" frameborder="no" border="0"></iframe>
</body>
</html>

或者不写 iframe 的 src，在下面用 script 脚本加上：
<script>iframe.location.href = "http://www.51garlic.com/";</script>

字符串可以拆分或者加密一下。

金留庆 · 发表于 2018-8-24 16:38:59

文字闪烁

<style>
@keyframes shake{
0%{opacity: 0.6;}
100%{opacity: 0.2;}
}
.shake{
animation: shake 0.25s linear infinite alternate;
}
</style>
hello world <span class="shake">hello world</span> hello world

金留庆 · 发表于 2018-9-13 11:44:42

div p 选择<div>元素内的所有<p>元素
div>p 选择所有父级是<div>元素的<p>元素
div+p 选择所有紧接着<div>元素之后的<p>元素
p~ul 同一父元素下的 p 元素之后的每一个 ul 元素
[target] 选择所有带有target属性元素
[target=-blank] 选择所有使用target="-blank"的元素
[title~=flower] 选择标题属性包含单词"flower"的所有元素
[lang|=en] 选择一个lang属性的起始值="EN"的所有元素
a[src^="https"] 选择每一个src属性的值以"https"开头的元素
a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素
p:before 在每个<p>元素之前插入内容
p:after 在每个<p>元素之后插入内容
p:first-letter 选择每一个<P>元素的第一个字母
p:first-line 选择每一个<P>元素的第一行
p:first-child 指定只有当<p>元素是其父级的第一个子级
p:last-child 选择每个p元素是其父级的最后一个子级
p:nth-child(2) 选择每个p元素是其父级的第二个子元素
p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
p:only-child 选择每个p元素是其父级的唯一子元素
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:last-of-type 选择每个p元素是其父级的最后一个p元素
p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
p:only-of-type 选择每个p元素是其父级的唯一p元素
p:empty 选择每个没有任何子级的p元素（包括文本节点）
:not(p) 选择每个并非p元素的元素

金留庆 · 发表于 2018-11-16 09:12:06

font-face定义webfont

@font-face {
      font-family: 'JXiaoSU'; /*字体名称*/
      src: url('../fonts/font.eot') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/font.woff') format('woff'),
            url('../fonts/font.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('../fonts/font.svg') format('svg'); /* iOS 4.1- */
      font-weight: normal;
      font-style: normal;
}

		自动登录	找回密码
密码			立即注册