建站知识

当前位置:首页 > 新闻资讯 > 建站知识 >

已阅读

html5常见知识

来源:admin       时间:2016-02-02 10:39         责任编辑:admin
1.媒体查询(media queries),可以针对设备特性(如手机/pc的浏览器视窗宽度)
1.1当屏幕尺寸是纵向放置的显示器(如手机)时加载样式portrait.css
 <link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
1.2 媒体查询追加not,相反结果。
<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait.css" />
1.3 只有视窗宽度大于800像素的显示屏或者投影才加载文件。
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px) , projection" href="portrait.css" />
Projection :投影仪  “,”逗号类似or的逻辑语句,两个满足一个条件及可。
1.4阻止移动浏览器自动调整页面大小,initial-scale缩放,width:设备宽度。
<meta name="viewport" content="initial-scale=1.0,width=device-width" />


各种设备兼容的写法
@media (min-width: 1200px) {
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (min-width: 481px) and (max-width: 767px) {
}
@media (max-width: 480px) {
}


=================================================================
1.5用em替换px主要是为了文字缩放。
1.3 弹性图片 
img { max-width:100%; } max-width:可以为实际宽度。
1.4文字自动对齐:
text-align:justify;text-justify:inter-ideograph;
1.5 IE定制特殊样式
div#content {width: 580px}
* html body div#content {width: 600px}
在div前面加上*号,这样你能为IE定制特殊样式


=========================================
CSS阴影
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
你能为块级元素或任何被div包裹的类或标签应用上面的样式。你需要设置水平和竖直偏移量、模糊半径和阴影填充色。你可以在这篇文章贴出的那张图片上看看这个例子。
===============================================
CSS首字放大
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
定义你的首字放大很容易,用CSS的first-letter属性就可以自动选定的博客的首字母,这样你可以定制CSS来设计首字母的样式了,像更大字号、斜体等等。


=========================================


用CSS翻转图像


#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}


============================================


元素透明


.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
使用透明属性,你可以让任何浏览器上的元素透明,这些属性可以在所有主流器上工作,甚至IE(PS:IE6略过?...)


==========================================
主要针对外贸网站的英文排版。
word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。


word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。


==============================================
css使文字显示两行后,后面的文字只显示...
content-title a {
    color: #000000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
==============================================


文字自适应:
<div style="width:50%;"> 
        <span style="font-size:0.75em">文字大小0.75em  /* 12 ÷ 16 */</span>
        <span style="font-size:12px">文字大小12px</span>
</div>


弹性图片:
img { max-width:100%;}
弹性视频,动画:
img,object,video,embed {  max-width:100%; }
<strong>限制无限扩张:</strong>


给弹性图片设置阈值
img { max-width:100%; max-width:202px} 100%是超大,最大宽度202px


不同浏览器兼容


为不同的屏幕尺寸提供不同的图片
.round {
-khtml-border-radius:4px; /* Konqueror */
    -moz-border-radius:4px;   /*  FireFox Mozilla */
    -o-border-radius:4px;   /*  Opera */
    -webkit-border-radius:4px;   /*  Webkit 如safari和chrome */
    border-radius:4px; /* W3C */


}
================================================


CSS3 多栏布局  (目前ie下不支持。)
#main { column-width:12em} //设定栏位宽度12em,或者数字如3
<div id="main" style="column-width:12em;"><p>aa和运营高铁的经验。aa</div>


===================================================


属性选择器
img[alt] { border:3px dashed #e15f5f} 选择器会匹配任意一个含有alt属性的图片标签。
属性选择器语法
匹配开头的属性选择器
Element[attribute^="value"]
实例:选择网页所有alt属性值以film开头的图片。alt后的“^”符号意思是“由此开头”。
img[alt^="film"] { border:3px dashed #e15f5f }
body[id^="20"] .navhis { color:red;} // body id="2012"...


匹配包括的属性选择器
Element[attribute*="value"]
img[alt*="film"] { border:3px dashed #e15f5f }
匹配结尾的属性选择器
Element[attribute$="value"]
img[alt$="film"] { border:3px dashed #e15f5f }


===================================================




伪类选择器


p:first-letter  //CSS首字英文前一个字符,中文一个汉字
li:before  在li之前插入文字
li:after  在li之后插入文字
<style type="text/css">
li:after{
    content: "(仅用于测试,请勿用于商业用途。)";
    font-size:12px;
    color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
<li><a href="movie2.mp4">精武风云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>




==============================================
li:first-child
li:last-child


:nth-child()可以选择某个的一个或多个特定的子元素
li:nth-child(even) //偶数行,实现交替样式
li:nth-child(odd) //奇数行,实现交替样式
li:nth-child(2){ background-color: yellow;} //指定顺序第2条背景为黄色
li:nth-last-child(2) //倒数第2条


not选择器
body *:not(h1) { background-color:red}  //除了h1背景都 设置成红色<br>
:empty{ display:none;}//为空的元素不显示


======================================
transform功能!!


1.rotate 旋转
顺时针旋转45度
div.te1{
        width: 300px;
        margin: 150px auto;
        background-color: yellow;
        text-align: center;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
}
<div class="tel">示例文字</div>


2.scale 缩放
缩小50%
<style type="text/css">
div{
        width: 300px;
        margin: 150px auto;
        background-color: yellow;
        text-align: center;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
}
</style><body><div>示例文字</div>
3.skew倾斜30度
<style>
div{
        width: 300px;
        margin: 150px auto;
        background-color: yellow;
        text-align: center;
        -webkit-transform: skew(30deg,30deg);
        -moz-transform: skew(30deg,30deg);
        -o-transform: skew(30deg,30deg);
}
</style>
<body>
<div>示例文字</div>


======================================