当布局中遇到ul li 每个li前面都有一个小icon时，一句css搞定

最新推荐文章于 2022-08-26 09:00:38 发布
最新推荐文章于 2022-08-26 09:00:38 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： css

/**这种情况好多人得布局方法都不相同，

有的是加个i标签，用来放图片;

有的是用伪类after 或before  在上面加图片;

等等。。。。。。

那么我现在叫大家一个特别简单得css，不用加标签，不用伪类，只要一句搞定，

好了上代码

效果图


*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
*{margin: 0;padding: 0;}
ul {
    list-style-image:url('sqpurple.gif');
}
 
 

  </style>
</head>
<body>
      
 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
 
</ 
body 
> 
</ 
html 
> 


 



                

        

        

    

  


    

      

        

            

              
                
                  小皮皮不皮
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
li标签前面添加图标

				
			

			

				

					12-02
				

			

		

		

			
				
html li前添加图标,通过三种方法添加，第一种是：list-style-image,第二种是：background的方式实现，第三种：通过字体库引入图标

			
		

	



                

              
                



	

		

			

				
					
在ul中，点击其中一个<li>标签，弹出或输出相应的序号或相应文本内容

				
			

			

				

					Char_n的博客
				

				

					08-27
					
					7320
					
				

			

		

		

			
				
ul中有li，点击li，获得对应的序号


  Happy coding…


作为一个前端开发者，一定会遇到这样的一个问题：


  一个&amp;lt;ul&amp;gt;中里面嵌套了好多空的&amp;lt;li&amp;gt;标签，点击&amp;lt;li&amp;gt;弹出它的序号（HTML不可以修改）。即点击第一个&amp;lt;li&amp;gt;标签时弹出0，点击第二个&amp;lt;li&amp;gt;标签时弹出

			
		

	



                


  
              

                


	

		

			

				
					
html li标签前面添加图标三种方法

					
热门推荐

				
			

			

				

					feiyuwk的博客
				

				

					06-22
					
					1万+
					
				

			

		

		

			
				
今天无聊写下这个例子，希望对初学者有帮助，代码如下







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


			
		

	





	

		

			

				
					
给li 标签添加图标的三种方法

				
			

			

				

					iteye_15797的博客
				

				

					05-29
					
					2882
					
				

			

		

		

			
				


1.使用CSS的特殊属性
ul{list-style-type:disc;} //disc的作用是在每个li前加一个黑点，其他常用的有square:黑色方块;none:无列表样式;decimal:数字；
你还可以控制图标在li标签的外面还是里面，如
ul{list-style-position:inside;}或者outside
如果你想加入自己定义的图案，可用
ul{list-s...

			
		

	



		

			
		



	

		

			

				
					
矢量图标字体自定义li编号样式

				
			

			

				

					wuyt2008的专栏
				

				

					12-07
					
					2398
					
				

			

		

		

			
				
li的编号样子实在太少太难看了，如果用list-style-image的方式，当屏幕尺寸变化的时候，图片尺寸不会改变。目前最好的方案还是用矢量图标字体。


原理很简单，一看代码就明白了。




无标题文档

ul {
	list-style: none;
	padding: 0;
}
li {
	padding-left: 1.3em;
}
li:before {
	content: 

			
		

	





	

		

			

				
					
css中ul li的背景小图标属性设置的两种情况

				
			

			

				

					12-10
				

			

		

		

			
				
在CSS（层叠样式表）中，为`<ul>`列表项`<li>`设置背景小图标是一项常见的任务，这可以增强列表的视觉效果。在实际应用中，根据图标的不同特性，我们通常有两种不同的方法来设置这些背景图标。以下是这两种情况的...

			
		

	





	

		

			

				
					
Dreamweaver CSS网页布局ul和li范例

				
			

			

				

					09-24
				

			

		

		

			
				
默认情况下，`<ul>`中的每个`<li>`前面都会有一个点或编号。如果不需要这些符号，可以使用以下CSS规则： ```css ul {  list-style-type: none; } ``` 这样，列表符号就会消失，如“供求信息”示例所示。  B) 替换...

			
		

	





	

		

			

				
					
CSS教程：li和ul标签用法举例

				
			

			

				

					12-09
				

			

		

		

			
				
运用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(/blog/images/icon.gif);}C).为了左对齐，可以用如下代码： ul{list-...

			
		

	





	

		

			

				
					
如何使用jQuery Mobile 1.4.2在html5中的ul的li属性中添加自定义图标

				
			

			

				

					04-04
				

			

		

		

			
				
1. **创建基本结构**：首先，你需要一个包含`data-role="listview"`的`<ul>`元素，以及带有`data-role="list-divider"`的`<li>`元素用于分隔不同的类别。每个常规`<li>`元素可以用于显示图标和文本。  ```html <ul ...

			
		

	





	

		

			

				
					
ul li 自定义图标 和 图标大小

				
			

			

				

					牛晓林的博客
				

				

					06-22
					
					8743
					
				

			

		

		

			
				
列表list 有以下属性：链接

列表前面的小点点（标记类型）可以通过list-style-type修改：
    ul {
      list-style:circle inside;
    }


    ul {
      list-style:square inside;
    }


也可以自定义图片：
    ul {
      list-style:square inside url('./assets/Start.png');
    }

但如果图片比较大，就是这样尴尬的效果了：

			
		

	





	

		

			

				
					
在li标签内容前面插入图片的一种方法，以及一些基础的选择器

				
			

			

				

					goulite的博客
				

				

					10-14
					
					5829
					
				

			

		

		

			
				
在li标签内容前面插入图片的一种方法：



选择器：

四个最基本的选择器：id选择器，class选择器，标签选择器，“*”通用选择器，其他的选择器都是基于这四个。

后代选择器：将两个选择器用空格隔开表示后代选择器，如：.left img；子代选择器，将两个选择器用大于符号“>”连接，如：.left>a；



相邻选择器+：将两个选择器用+号连接，如a+p，这是表示找到与a标签...

			
		

	





	

		

			

				
					
ul li实现多行多列的布局思路

				
			

			

				

					m0_52518047的博客
				

				

					04-22
					
					4978
					
				

			

		

		

			
				
最近呢在练手css布局，之前在工作中，也会经常遇到这种多行多列的布局，其实css实现的路径挺多的，如下图式的布局一般多是ul li来实现，在此我想写一下我自己的实现思路：

上图式京东官网上的一个模块
<div class="icon">
	  <ul>
	      <li>
	          <img src="./icon/1.png" alt="">
	          <span>
	             话费 
	      

			
		

	





	

		

			

				
					
HTML+CSS项目实践四：给html网页标题栏添加logo图标（ico格式图片）

				
			

			

				

					王迪
				

				

					12-26
					
					1万+
					
				

			

		

		

			
				
实现效果：

 

制作思路：

1、准备一张ico格式图片
2、在&lt;head&gt;标签里使用&lt;link /&gt;标签，引用icon图片

 

实现代码：


&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; chars

			
		

	





	

		

			

				
					
Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

				
			

			

				

					PHP技术研究
				

				

					04-23
					
					2587
					
				

			

		

		

			
				
对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。
1、在CSS中写入代码。找到相关性的CSS，在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。
2、在相关的页面找到head部分写入下面的代码

lis

			
		

	





	

		

			

				
					
调整el-icon的大小

				
			

			

				

					weixin_55020138的博客
				

				

					08-26
					
					1万+
					
				

			

		

		

			
				
Element-UI 调整el-icon的大小，调整el-button中el-icon的大小

			
		

	





	

		

			

				
					
css中li前面点的样式或换成图片

				
			

			

				

					thewebcode
				

				

					06-03
					
					4827
					
				

			

		

		

			
				
不使用li样式：list-style-type:none;
如果要定义为图片：
li{
 list-style: url("pre.gif") outside circle;
}
改颜色
li{
 color:#f00;
 }
关于这个list-style-type的一些语法与参数：
语法：
list-style-type : disc | circle | square |...

			
		

	





	

		

			

				
					
LigerUi的Grid中显示Image图片或图标！

				
			

			

				

					【敦厚的曹操】的专栏
				

				

					07-20
					
					7586
					
				

			

		

		

			
				
LigerUi的Grid中显示Image图片或图标！
以下代码，为grid中显示字段列部分，既可以单击选择图片（只是前台部分），也可以显示出图片，并控制图片大小！                  {
                      display: '图标', name: 'Menu_Icon', align: 'left', width: 100, minWidth: 60
  

			
		

	





	

		

			

				
					
用bootstart在线引入写一个商品页面HTML带有多个布局板块内容的

					
最新发布

				
			

			

				

					09-11
				

			

		

		

			
				
Bootstrap是一个流行的前端框架，用于快速构建响应式网站。在Bootstrap中创建一个包含多个布局板块的商品页面HTML...每个部分都有相应的Bootstrap类来控制样式和布局。别忘了替换`商品图片URL`为你实际的商品图片链接。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值