盒子模型
背景相关
background-clip：设置背景覆盖的范围
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 10px dotted #444;
padding: 12px;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url('右.png');">
测试文字
</div>
background-clip: no-clipe
<div style="background-image: url('右.png');background-clip: no-clipe;">
测试文字
</div>
background-clip: padding-box
<div style="background-image: url('右.png');background-clip: padding-box;">
测试文字
</div>
background-clip: content-box
<div style="background-image: url('右.png');background-clip: content-box;">
测试文字
</div>
</body>
</html>
效果图示：
使用linear-gradient设置背景渐变
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="d" style="height: 300px;width: 300px;background: linear-gradient(red,blue);">
<button οnclick="change(this.innerHTML);">to top</button>
<button οnclick="change(this.innerHTML);">to bottom</button>
<button οnclick="change(this.innerHTML);">to left</button>
<button οnclick="change(this.innerHTML);">to right</button>
<button οnclick="change(this.innerHTML);">to left top</button>
<button οnclick="change(this.innerHTML);">to left bottom</button>
<button οnclick="change(this.innerHTML);">to right bottom</button>
<button οnclick="change(this.innerHTML);">to right top</button>
</div>
<script>
function change(data){
document.getElementById("d").style.background=
"linear-gradient("+data+", red,blue)";
}
</script>
</body>
</html>
设置渐变色自动改变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="d" style="height: 300px;width: 300px;border-radius:50% ; background: linear-gradient(0deg,red,blue,yellow);">
</div>
角度：<input type="range" style="width: 360px;" min="0" max="360" value="0" οninput="change(this.value);">
οnchange="change(this.value);"
<script>
// function change(val){
// //var s ="linear-gradient("+val+",red,blue)";
// document.getElementById("d").style.background=
// "linear-gradient("+val+"deg, red,blue,yellow)";
// }
var count = 0;
var change=function (){
document.getElementById("d").style.background=
"linear-gradient("+ count++ +"deg, red,blue,yellow)";
}
window.setInterval(change,1)
</script>
</body>
</html>
渐变色控制位置：
控制颜色位置
<div id="d" style="height: 300px;width: 300px; background: linear-gradient(red 20%,blue 70%,yellow 90%);"></div>
使用百分数和像素共同动态控制元素大小，calc()计算函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
overflow: auto;
resize: both;
border: 2px solid #555;
}
div>div{
border: 1px solid black;
display: inline-block;
margin: 5px;
box-sizing: border-box;
width: calc(50% - 14px);
/*百分数和像素之间 空格一定要有 */
height: calc(100% - 10px);
}
</style>
</head>
<body>
<div style="width: 200px;height: 40px;background-color: #dddddd;">
HTML5学习
</div>
<div style="width: 200px;height: 40px;background-color: #dddddd;background-clip: content-box;border: 30px solid #555;padding: 30px;">
HTML5学习
</div>
</body>
</html>
resize属性，指定可以调整元素的大小
<div style="width: 200px;height: 100px;background-color: #eee;resize: both; overflow: auto;border: 2px solid #555555;">
resize :both 指定可以在两个方向上调整大小
</div>
<div style="width: 200px;height: 100px;background-color: #eee;resize: horizontal; overflow: auto;border: 2px solid #555555;">
resize :horizontal 指定可以在横向上调整大小
</div>
<div style="width: 200px;height: 100px;background-color: #eee;resize: vertical; overflow: auto;border: 2px solid #555555;">
resize :vertical 指定可以在纵向上调整大小
</div>
滤镜部分
<div style="display: flex;text-align: center;">
<figure>
<img src="bg.jpg" alt="" style="width: 300px;">
<figcaption>原始图片</figcaption>
</figure>
<figure id="t">
<img src="bg.jpg" alt="" style="width: 300px;">
<figcaption>滤镜图片</figcaption>
</figure>
</div>
blur: <input type="range" style="width: 520px;" min="0" max="20" value="0" id="blur" name="px" οninput="change(this)"><br>
brightness: <input type="range" style="width: 520px;" min="0" max="300" value="100" name="%" id="brightness" οninput="change(this)"><br>
contrast: <input type="range" style="width: 520px;" min="0" max="300" value="100" name="%" id="contrast" οninput="change(this)"><br>
drop-shadow: <input type="range" style="width: 520px;" min="0" max="20" value="0" name="px" id="drop-shadow" οninput="change(this)"><br>
grayscale: <input type="range" style="width: 520px;" min="0" max="100" value="0" name="%" id="grayscale" οninput="change(this)"><br>
hue-rotate: <input type="range" style="width: 520px;" min="0" max="360" value="0" name="deg" id="hue-rotate" οninput="change(this)"><br>
invert: <input type="range" style="width: 520px;" min="0" max="100" value="0" name="%" id="invert" οninput="change(this)"><br>
opacity: <input type="range" style="width: 520px;" min="0" max="100" value="100" name="%" id="opacity" οninput="change(this)"><br>
saturate: <input type="range" style="width: 520px;" min="0" max="300" value="100" name="%" id="saturate" οninput="change(this)"><br>
sepia: <input type="range" style="width: 520px;" min="0" max="100" value="0" name="%" id="sepia" οninput="change(this)"><br>
<script>
function change(data){
if(data.id=='drop-shadow'){
document.getElementById('t').style.filter=data.id+'('+data.value+data.name+' 1px rgba(255,0,0,0.5))';
}
document.getElementById('t').style.filter=data.id+'('+data.value+data.name+')';
}
</script>
none值和visibility属性
inline-block值
table表格
盒阴影
布局相关属性
clear实现换行
overflow实现滚动条
使用overflow-style控制滚动方式
LIST列表
鼠标光标显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="float: left; width: 100px;height: 100px;text-align: center;cursor: all-scroll;">一</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: col-resize;">二</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: crosshair;">三</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: move;"> 四</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: help;"> 五</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: no-drop;"> 六</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: not-allowed;"> 七</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: pointer;"> 八</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: progress;"> 九</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: row-resize;">十 </div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: text;"> 十一</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: vertical-text;"> 十二</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor: wait;"> 十三</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor:n-resize ;"> 十四</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor:ne-resize ;"> 十五</div>
<div style="float: left;width: 100px;height: 100px;text-align: center;cursor:se-resize ;"> 十六</div>
</body>
</html>
响应式布局
根据显示设备宽度的不同从而自动调整显示css的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
text-align: center;
margin: auto;
width: 750px;
}
#container>div{
border: 1px solid #aaaaff;
text-align: left;
box-sizing: border-box;
border-radius: 12px 12px 0 0;
padding: 5px;
}
div#left{
width: 300px;
height: 260px;
float: left;
}
div#main{
width: 450px;
height: 260px;
float: left;
clear: right;
}
div#right{
width: 750px;
float: left;
}
@media screen and (min-width:1000px){
#container{
text-align: center;
margin: auto;
width: 960px;
}
#container>div{
border: 1px solid #aaaaff;
box-sizing: border-box;
border-radius: 12px 12px 0 0;
padding: 5px;
}
div#left{
width: 240px;
height: 260px;
float: left;
}
div#main{
width: 460px;
height: 260px;
float: left;
clear: none;
}
div#right{
width: 260px;
float: left;
height: 260px;
}
}
@media screen and (max-width:480px){
#container{
text-align: center;
margin: auto;
width: 450px;
}
#container>div{
border: 1px solid #aaaaff;
box-sizing: border-box;
border-radius: 12px 12px 0 0;
padding: 5px;
}
div#left{
width: 450px;
height: 150px;
float: left;
}
div#main{
width: 450px;
height: 260px;
float: left;
clear: both;
}
div#right{
width: 450px;
float: left;
height: 170px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h2>疯狂软件开班信息</h2>
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
<div id="main">
<h2>疯狂软件介绍</h2>
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
<div id="right">
<h2>公司动态</h2>
示例文字示例例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>
</div>
</body>
</html>
扫一扫
1359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
