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

最新推荐文章于 2024-07-24 09:46:30 发布

寻找现实扭曲力场

最新推荐文章于 2024-07-24 09:46:30 发布

阅读量2w

点赞数 5

分类专栏：前端笔记文章标签： css img html 移动端

本文链接：https://blog.csdn.net/pearyangyang/article/details/78275380

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天我们要介绍两种前端要用到的布局：第一种是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>