CSS 实现头像图片右上角数字显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 实现图片右上角数字显示</title>
<style>
.box {
height: 60px;
width: 60px;
position: relative;
margin: 100px auto;
}
.box img {
width: 100%;
height: 100%;
}
.box .number {
position: absolute;
left: 80%;
top: -12px;
background-color: red;
color:
line-height: 23px;
width: 23px;
border-radius: 24px;
text-align: center;
font-size: 17px;
}
</style>
</head>
<body>
<div class="box">
<img src="https://res.shiguangkey.com/file/201910/15/20191015235235662873840.jpg" alt="">
<span class="number">2</span>
</div>
</body>
</html>
两种方法,让div里面的两个元素竖直排列,并相对于其水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让div里面的两个元素竖直排列,并相对于其水平垂直居中</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.outer {
width: 200px;
height: 200px;
border: 1px solid
display: table;
background-color:
}
.inner {
display: table-cell;
vertical-align: middle;
border: 1px solid
text-align: center;
}
</style>
</head>
<body>
<!-- 两个元素再包装一个元素,外部的div设为table,
内部的div设为table-cell,vertical-align:middle,
实现垂直居中;text-align:center,内部的元素水平居中 -->
<div class="outer">
<div class="inner">
<img style="width: 50px;height: 50px;"
src="http://beijingbiwans.oss-cn-beijing.aliyuncs.com/b44917e2f4577a90601d3ede4a065782.png">
<p>我爱中国</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让div里面的两个元素竖直排列,并相对于其水平垂直居中</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.outer {
width: 150px;
height: 150px;
border: 1px solid
position: relative;
}
.inner {
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<!-- 也是再包装一个元素,外部div设为相对定位,内部div设为inline-block,将两个元素包围起来,还要设为绝对定位,left、top给50%,然后用translate也给-50% -->
<div class="outer">
<div class="inner">
<img style="width: 50px;height: 50px;"
src="http://beijingbiwans.oss-cn-beijing.aliyuncs.com/b44917e2f4577a90601d3ede4a065782.png">
<p>我爱中国</p>
</div>
</div>
</body>
</html>
wap首页分类入口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../statics/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#bb_search1").click(function () {
console.dir('11111111111111');
});
});
</script>
<style type="text/css">
.aa_search1 {
width: 25%;
height: 230px;
background-color: rosybrown;
flex: 1;
padding: 15px;
}
.aa_search2 {
width: 25%;
height: 230px;
background-color: green;
flex: 1;
padding: 15px;
}
.outer {
width: 100%;
height: 100%;
display: table;
background-color: aqua;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-top: 18px;
}
.box {
width: 100%;
height: 2rem;
position: relative;
}
img {
width: 6rem;
height: 6rem;
margin-bottom: 5px;
}
.box .number {
position: absolute;
left: 95%;
top: -88px;
background-color: red;
color:
line-height: 24px;
width: 24px;
border-radius: 24px;
text-align: center;
font-size: 13px;
font-weight: bold;
font-style: normal;
}
</style>
</head>
<body>
<div style="display:flex;">
<div class="aa_search1">
<div class="outer">
<div class="inner" id="bb_search1">
<img src="https://res.shiguangkey.com/file/201910/15/20191015235235662873840.jpg">
<p>洗护爆款</p>
</div>
</div>
</div>
<div class="aa_search2">
<div class="outer">
<div class="inner">
<i class="box">
<img src="https://res.shiguangkey.com/file/201910/15/20191015235235662873840.jpg">
<span class="number" id="aa_search2_num">2</span>
</i>
<p>洗护爆款</p>
</div>
</div>
</div>
</div>
</body>
</html>
一个简单的欢迎页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
padding: 4px 48px;
}
body {
background:
font-family: "微软雅黑";
color:
}
h1 {
font-size: 100px;
font-weight: normal;
margin-bottom: 12px;
}
p {
line-height: 1.8em;
font-size: 36px
}
</style>
</head>
<div style="padding: 24px 48px;">
<h1>:)</h1>
<p>欢迎来到 <b>CSDN</b>!</p>
</div>
</html>