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

今天我们要介绍两种前端要用到的布局：第一种是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标签需添加一些声明：

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

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

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

game

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;

}

欲了解更多王冠一教授相关资讯，

请关注 “冠一学堂” 微信公众号。

html li 圆点大小,ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版...相关推荐

修改列表ul li 圆点样式自定义li前圆点样式
问题描述在做静态页面时,要按照设计图修改li标签前圆点的样式及颜色. 实现方法 html文件: <ul><li>我是第一个</li><li>我是第一个 ...
html无序列表怎么加上小圆点,ul li html无序列表标签组学习
属于无序列表组合标签-是html列表标签组合. html网页代码经常使用ul li列表机关标签. ul li 一.不能撮合 ul下只能放li标签,li标签内可以纵脱何标签,虽然也大要在li内再放ul ...
列表ul li前面的点如何更改颜色、形状、大小
如何更改li标签前的黑色圆点的形状.颜色和大小? 我们平常都是这样写的: <ul><li>111</li><li>222</li><l ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
jquery li ul 伪分页_求教关于Jquery的ul li的分页,该怎么处理
求教关于Jquery的ul li的分页 ul 下有若干个li 3个为1个分页 1个input按钮点击显示后3个另一个显示前3个求大神这个怎么做分享到: 更多 ------解决方案-------- ...
jquery ul li 操作
删除ul下的li包括节点 $('ul li').remove();$('ul li').each(function(){$(this).remove(); }); $("ul"). ...
CSS ul li:nth-child的详细实例
下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! 1.取ul li 第一条 ul li:first-child 和最后一条 ...
JS图表工具FusionCharts调整图表百分比大小
2019独角兽企业重金招聘Python工程师标准>>> 在使用FusionCharts的时候,用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值.图表将根据父容器元素自动调 ...

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

html li 圆点大小,ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版...相关推荐

最新文章

热门文章

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

html li 圆点 大小,ul li 定制圆点，list-style-image调整图片圆点大小 与 文字和图片排版...相关推荐

最新文章

热门文章

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

html li 圆点大小,ul li 定制圆点，list-style-image调整图片圆点大小与文字和图片排版...相关推荐