盒子模型
CSS
/* 清空默认样式 */
body,div{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f1f1f1;
}
div.card{
width: 270px;
height: 255px;
background-color: #fff;
border-radius: 15px;
/* 块级盒子水平居中 */
margin:100px auto;
/* 文字或图片水平居中 */
text-align: center;
padding-top: 40px;
}
div.card h4{
font-weight: 400;
margin: 15px 0 10px 0;
}
div.card p{
font-size: 14px;
color: #666;
}
div.card:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.3);
}HTML
<body>
<div class="card">
<img src="/home/broadcast.svg">
<h4>
抖音直播
</h4>
<p>
包含抖音直播看播功能
</p>
</div>
</body>CSS
div,body,html{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.box{
width: 360px;
height: 190px;
background-color: pink;
margin: 100px auto;
}
header{
height: 34px;
background-color: #eee;
border: 1px solid #dbdee1;
border-left: 0;
}
header a {
display: block;
width: 50px;
height: 34px;
background-color: #fff;
text-align: center;
line-height: 31px;
font-size: 14px;
color: #333;
text-decoration: none;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
/* 值为负值，往上走 */
margin-top: -1px;
}
ul li{
line-height: 26px;
padding-left: 15px;
}
ul li a{
font-size: 14px;
text-decoration: none;
color: #333;
background:url(/home/tinyimage.jpg) no-repeat left center;
padding-left: 20px;
}
ul li a:hover{
color: #ff8400;
text-decoration: underline;
}HTML
<body>
<div class="box">
<header>
<a href="#">新闻</a>
</header>
<ul>
<li><a href="#">新农村人，温暖的双手</a></li>
<li><a href="#">新农村人，温暖的双手</a></li>
<li><a href="#">新农村人，温暖的双手</a></li>
<li><a href="#">新农村人，温暖的双手</a></li>
<li><a href="#">新农村人，温暖的双手</a></li>
</ul>
</div>
</body>注
学习flex布局后
子盒子水平和垂直居中
<!DOCTYPE html>
<html>
<head>
<style>
.father{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: lightblue;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>