1.响应式视屏
在网页中嵌入视频,里面提供了许多css技巧,帮助你在页面中嵌入响应式视频DEMO
video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
video iframe,
video embed {
.position: absolute;
.top: 0;
.left: 0;
.width: 100%;
.height: 100%;
}
2.Rollover文本链接
人们在手机上浏览网页,这使得Rollover链接变得越来越流行。
<style type="text/css">
a:hover{
.color:red;
}
</style>
3. 根据边界线自动调整图片大小
img{
max-width:100%;
height: auto;
}
4.实现文本换行
<html>
<head>
<style type="text/css">
div{
width:300px;
word-wrap:break-work;
border:1px solid #000000; }
</style>
</head>
<body>
<div>sdfdsfdsfsdfsdfdsfdsfdsfdsfsdfsdfdsfdsfdsfdsfsdfdsfsdfsdfdsfdfdfdsffdsfdsfdfsfdfdsfsdff</div>
</body>
</html>