程序员敲代码之前端CSS,实现头像图片右上角数字显示,两种方法,让div里面的两个元素竖直排列，并相对于其水平垂直居中,wap首页分类入口,一个简单的欢迎页面,如何妙用弹性盒

本文主要是介绍程序员敲代码之前端CSS,实现头像图片右上角数字显示,两种方法,让div里面的两个元素竖直排列，并相对于其水平垂直居中,wap首页分类入口,一个简单的欢迎页面,如何妙用弹性盒，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS入门 | 大喵教程

- - ==CSS 实现头像图片右上角数字显示==
  - ==两种方法,让div里面的两个元素竖直排列，并相对于其水平垂直居中==
  - ==wap首页分类入口==
  - ==一个简单的欢迎页面==

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: #fff;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 #f00;display: table;background-color: #777;}.inner {display: table-cell;vertical-align: middle;border: 1px solid #777;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 #f00;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: #fff;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>

一个简单的欢迎页面

easygo

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style type="text/css">* {padding: 0;margin: 0;}div {padding: 4px 48px;}body {background: #fff;font-family: "微软雅黑";color: #333;}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>