HTML前端--各种⼩案例
;
;
案例⼀：
隐藏扩展域，并去掉after，并去掉⾼度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{  /*善⽤after和defore*/
content: "111";  /*注意加引号*/
clear: both;
display: block;
visibility: hidden;  /*隐藏并有⾼度*/
height: 0;  /*去掉⾼度*/
}
.c{
width: 100px;
/*height: 100px;*/
background-color:red;
}
.c .item{
float:left;
width:30px;
background-color: green ;
}
</style>
</head>
<body>
<div class='c clearfix'>
<div class='item'>123</div>
<div class='item'>456</div>
</div>
<div class="test">内容</div>
</body>
</html>
更新后的代码
案例⼆：
当⿏标放在⼀个图⽚上显⽰这个商品的信息，或者⼀些别的东西，⽐如
.touch:hover .content{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.touch{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.touch .content{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0,.6);
color: white;
text-align: center;
visibility: hidden;
}
.touch:hover .content{
visibility: inherit;
}
</style>
</head>
<body>
<div class="touch">
<div><img src="2.jpg"></div>
html滚动效果代码
<div class="content">
<div class="c1">ALEX</div>
<div class="c1">500-1000(⽇)</div>
</div>
</div>
</body>
</html>
案例及代码
案例三：
要求在当前页⾯不超出多余内容，超出了变成滚动条显⽰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.pg_top{
height: 48px;
background-color: #dddddd;
}
.pg_body_menu{
position: absolute;
width: 180px;
background-color: blueviolet;
left: 0;
}
.pg_body_content{
position: absolute;
top: 48px;
left: 190px;
right: 0;
bottom: 0;
background-color: blueviolet;
overflow: auto;  /*可以利⽤overflow变导航条*/
}
</style>
</head>
<body>
<div class="pg_top">
</div>
<div class="pg_body">
<div class="pg_body_menu">
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div>
<div class="pg_body_content">
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div>
</div>
</body>
</html>
代码
尖⾓图标，尖⾓符号是向上，当⿏标点的时候尖⾓符号向下
.c1{ /*这个是⿇烦写法*/
border-top: 30px solid yellow ;
border-left: 30px solid green;
border-bottom: 30px solid blue;
border-right: 30px solid black;
display: inline-block;
}
.c1{ /*半个*/
border-top: 30px solid yellow ;
border-left: 30px solid green;
border-bottom: 0px solid blue;
border-right: 30px solid black;
display: inline-block;
}
部分代码-学习的第⼀阶段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*.c1{ 这个是⿇烦写法
border-top: 30px solid yellow ;
border-left: 30px solid green;
border-bottom: 0px solid blue;
border-right: 30px solid black;
display: inline-block;
}*/
.c1{
border: 30px solid transparent ;
border-top: 30px solid yellow ;
display: inline-block;
margin-top: 40px;
}
.c1:hover{
border:  30px solid transparent;
border-bottom: 30px solid yellow ;
margin-top:10px ;
}
</style>
</head>
<body>
<div >
<div class="c1"></div>
</div>
</body>
</html>
代码
案例五：
就是弹出⼀个框，然后显⽰⼀些内容（其实是分为三层）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.model{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
.content{
height: 300px;
width: 400px;
background-color: white;
color: #000000;
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
margin-left: -200px;
margin-top: -200px;
font-size:32px ;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div >
<h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1> <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1> </div>
<div class="model"></div>
<div class="content">悲伤那么⼤</div>
</body>
</html>
View Code
案例六：
输⼊框⾥⾯有图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。