網頁留白
*{
padding: 0;
margin: 0;
}
.wrapper{
height: 30px;
background-color: #123;
}
.content{
margin: 0 auto;
width: 1200px;
height: 30px;
background-color: #0f0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 16px;
vertical-align: -19px;
}
小三角
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 16px;
line-height: 16px;
font-size: 16px;
background: black;
color: white;
font-family: arial;
padding: 10px 10px;
}
div::before{
content: "";
display: inline-block;
width: 12px;
height: 11px;
background-image: url("https://s2.zimgs.cn/ims?kt=url&at=smstruct&key=aHR0cDovL3d3dy4xNjMuY29tL2Zhdmljb24uaWNv&sign=yx:e23489h_LixFNB1pADUsshh80Aw=&tv=400_400");
background-size: 100% 100%;
margin-right: 4px;
vertical-align: -2px;
}
div::after{
content: "";
display: inline-block;
width: 12px;
height: 11px;
background-image: url("https://s2.zimgs.cn/ims?kt=url&at=smstruct&key=aHR0cDovL3d3dy4xNjMuY29tL2Zhdmljb24uaWNv&sign=yx:e23489h_LixFNB1pADUsshh80Aw=&tv=400_400");
background-size: 100% 100%;
vertical-align: -2px;
float: right;
margin-top: 5px;
}
</style>
</head>
<body>
<div>王藝璋貼吧</div>
</body>
</html>
背景圖片處理
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url(https://i0.hdslb.com/bfs/archive/f680f1cd91873688e9e2de36e0ee2a359e2e62ff.png@620w_220h.webp);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center center;
}
板塊測試
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
float: left;
width: 320px;
}
.wrapper:hover{
width: 400px;
}
.wrapper .img{
width: 100px;
height: 100px;
background-image: url(https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9QbjRTbTBSc0F1akZiSlRSdHlueWlhaWJwU2Vua1UxdnJTdktiTkpJdDZON1daeWJEbUNNZFhna05IbHJwWWtiM0UyVW9jTVZ6bTJpYW11MGJ2ZVFUdFpMdy82NDA?x-oss-process=image/format,png);
background-size: 100% 100%;
float: left;
}
.wrapper .content1{
font-size: 20px;
line-height: 20px;
height: 40px;
color: #333;
overflow: hidden;
margin-bottom: 8px;
}
.wrapper .content2{
font-size: 12px;
color: #666;
line-height: 1.2em;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="img">
<p class="content1">dasdasdas</p>
<p class="content2">sdfsfdfas</p>
</div>
</body>
</html>
