ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版

来源：互联网发布：淘宝买家旺旺提取编辑：程序博客网时间：2024/05/22 03:19

今天我们要介绍两种前端要用到的布局：第一种是ul li定制化圆点的样式，然后使其与文字居中排列，另外一种是文字与图片混排并居中排版。

我们在使用ul li中通常会定制化圆点，使用如下代码就可以使圆点为自己设定的图片，然后调整圆点的对齐的像素

       ul li{            list-style-type:none;            background:url("img/ui.png") no-repeat 0rem 0.3rem;            background-size:0.8rem 0.8rem;        }

我们在使用rem作为计量单位的时候在head标签需添加一些声明：

    <meta content='yes' name='apple-mobile-web-app-capable'>    <meta content='yes' name='apple-touch-fullscreen'>    <meta name='theme-color' content='#91D4DA'>    <meta name='viewport' content='initial-scale=1, minimum-scale=1, user-scalable=no'>

这样我们就可以适配移动设备了。效果图：

另外当我们遇到文字和图片排版，这一直需要不断地去调试，例如我们想实现这样一个效果：

我们可以使用span标签来规定文字的样式，使用一个div来包裹span和img标签，然后使用居中对齐的样式margin:0 auto就可以了，具体代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta content='yes' name='apple-mobile-web-app-capable'>    <meta content='yes' name='apple-touch-fullscreen'>    <meta name='theme-color' content='#91D4DA'>    <meta name='viewport' content='initial-scale=1, minimum-scale=1, user-scalable=no'><title>game</title><style type="text/css">        html{            font-size:62.5%;            width:100%;            height:100%;        }        body{            margin: 0 auto;            font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;            background-color:#f4f4f4;            padding:0;            font-size:1.4rem;        }        footer{            background-color:#CDCDCD;        }        p2{            font-size:1.6rem;            color:#000000;            font-weight:bold;            line-height:2rem;        }        .footerContent{        padding:1rem;        margin:0 auto;            height:4rem;            width:24rem;            background-color:#CDCDCD;        }    </style></head><body><footer>    <div class="footerContent">         <span style="display: block;float: left">             <p2>欲了解更多王冠一教授相关资讯，</p2><br/>             <p2>请关注 “冠一学堂” 微信公众号。</p2>         </span>        <span style="display: block; float: left">            <img src="wechat.png"  style="vertical-align: middle;width:3.5rem;height:3.5rem;padding:0.1rem"/>        </span>    </div></footer></body></html>

阅读全文

0 0

ul li 定制圆点，list-style-image调整图片圆点大小 与 文字和图片排版

ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版