ul 原点显示_CSS+HTML ul li列表原点如何相连

方案一:

html

  • 参与考试《第一期模拟考试》

    3小时50分钟

  • 学习文档《LDO电路设计规范》

    3小时50分钟

  • 学习文档《LDO电路设计规范》

    3小时50分钟

Css:

*{margin:0;padding:0;}

ul{

margin:100px;

padding:0;

list-style: none;

}

ul li{

position:relative;

padding-left: 30px;

padding-bottom: 20px;

border-left:2px #999 solid;

}

ul li em{

position:absolute;left:-5px;top:0; width:8px;

height:8px;border-radius:8px;background:#999;

}

ul li.active em{background: red;}

ul li p{margin:0;}

ul li time{color:#999;font-size:12px;}

实现原理:

给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上

方案二:

Html

  • 参与考试《第一期模拟考试》

    3小时50分钟

  • 学习文档《LDO电路设计规范》

    3小时50分钟

  • 学习文档《LDO电路设计规范》

    3小时50分钟

Css

*{margin:0;padding:0;}

ul{

margin:100px;

padding:0;

list-style: none;

}

ul li{

position:relative;

padding-left: 30px;

padding-bottom: 20px;

border-left:2px #999 solid;

}

ul li img{

position:absolute;

left:-5px;

top:0;

width:10px;

height:10px;

border-radius:10px;

background:#999;

}

ul li p{margin:0;}

ul li time{color:#999;font-size:12px;}

实现原理:

给li一个左边框,同时在结构中添加img作为原点,使用定位将图片原点定位在指定位置上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/525881.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java并发执行一个方法_JAVA的执行并发原理

VolatileVolatile关键字用于确保共享数据的可见性与有序性,但是并不能保证方法的原子性,在程序中对Volatile关键字使用得当的话,它比synchronized的使用和执行成本会更低,因为他不会引起线程的上下文切换和调度。先讲一下重排序&a…

java欧洲_java欧洲/明斯克时区问题

我写了以下程序:import sun.security.action.GetPropertyAction;import java.security.AccessController;import java.text.SimpleDateFormat;import java.util.Date;import java.util.TimeZone;public class Main {public static void main(String[] args) {System…

java.util. 什么意思_java.util中,util是什么意义

展开全部1. util包的框架常用的集合类主要636f70793231313335323631343130323136353331333431343630实现两个“super接口”而来:Collection和Map。1.1 Collection有两个子接口:List和SetList特点是元素有序,且可重复。实现的常用集合类有Arra…

算法描述怎么写伪代码java_伪代码描述算法

伪代码是自然语言和类编程语言组成的混合结构。它比自然语言更精确,描述算法很简洁;同时也可以很容易转换成计算机程序。下面就为大家介绍一下伪代码描述算法的介绍。伪代码描述算法一、算法描述是指对设计出的算法,用一种方式进行详细的描述…

java测试用例编写_TestNG测试用例编写和执行

编写TestNG用例测试基本上包括以下步骤:编写业务逻辑针对业务逻辑中涉及的方法编写测试类,在代码中插入TestNG的注解直接执行测试类或者添加一个testng.xml文件运行 TestNG.下面我们介绍一个完整的例子来测试一个逻辑类;1.创建一个pojo类Empl…

好爽 java_Intellij是进行scala开发的一个非常好用的工具,可以非常轻松查看scala源码,当然用它来开发Java也是很爽的,之前一直在用scala ide和ec...

Intellij是进行scala开发的一个非常好用的工具,可以非常轻松查看scala源码,当然用它来开发Java也是很爽的,之前一直在用scala ide和eclipse,现在换成intellij简直好用到飞起,但是有些人不知道怎么用intellij去创建一个…

java创建读取文件_Java实现文件的创建、读取、写入操作-Fun言

在日常的开发中,对文件的操作经常会有,所以今天教大家其中一种使用Java实现文件的创建、读取、写入操作创建文件String filenameTemp "D:\demo.txt";File filename new File(filenameTemp);if (!filename.exists()) {filename.createNewFile…

java调用js查询mongo_MongoDB增删查改操作示例【基于JavaScript Shell】

本文实例讲述了MongoDB增删查改操作。分享给大家供大家参考,具体如下:MongoDB自带了一个JavaScript Shell,所以在其中使用js语法是可以的。Insert操作:单条插入var single{"name":"mei","age":22}d…

java中什么是task_20171018java总结——Spring任务调度task:scheduled-tasks

从认识eclipse开始到现在,学习编程已经接近8个月的时间,从什么都不懂,到现在慢慢一点点学习编程,自己在不断地进步,要学习的地方还有很多。自己也从这个平台收获到了很多知识,我也希望在这个博客上面记录自…

java155apk_【原创】浅谈 Android APK定点爆破

[Java] 纯文本查看 复制代码.class public Lcom/mayor/codeSig/CodeSigWindow;.super Landroid/app/Activity;.source "CodeSigWindow.java"# instance fields.field private csig:Ljava/lang/String;.field editText:Landroid/widget/EditText;.field private isNum…

python包含多个元组的元组_如何在python中将多个”列出的”元组连接成一个元组?...

在python中,关于这个问题的答案很少,如何将一个元组列表连接到一个列表中?,如何在python中合并两个元组?,如何在python中合并任意数量的元组?所有的答案都引用了元组列表,所以提供的…

centos6.5 mysql主从_CentosMysql主从备份

1、主库设置my.cnfserver_id 2 必须唯一binlog-do-db abo-assist 备份的数据库log-binmysql-bin 开启binlog创建同步账号并授权grant replication slave on *.* to replication% identified by 123456;2、从库server_id 10 必须唯一3、开启主从同步(从库上操作)mysql> st…

java socket ftp登录_基于java socket的简单FTP功能实现

实现FTP的一些功能,如上传文件,下载文件,显示目录,改变目录,退出等功能import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.DataInputStream;import java.io.DataOutputStream;i…

java内嵌excel_如何在Excel中嵌入URL中的图像?

我试图从URL中提取图像并将其嵌入Excel中 .我的Excel表格很简单:它包含2列 .第1列具有图像URL . 在第2列中,我想嵌入图像 . 我使用以下代码 . 它在第一行工作得非常好,我在本地机器上保存了图像并给出了路径,但是当尝试直接从URL嵌…

java减治法深度优先查找_排序|减治法实现排序

总结一下排序嘿;)有插入排序和拓扑排序。1.插入排序/直接插入排序假设对较小的数组A[0...n-2]已经排好序了,然后把A[n-1]找到一个合适的位置插进去。一般来说是从右向左扫描这个有序的数组,直到遇到第一个小于A[n-1]的元素,然后把A[n-1]插在这…

linux服务器安装php7_CentOS 7 下 PHP 7.1.12 安装配置

Linux系统:CentOS 7记录在CentOS 7 下 PHP 7.1.12 安装配置的过程。先安装相关依赖包yum installpcre pcre-devel zlib zlib-devel openssl openssl-devel gd gd-devel libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel e2fsprogs e2fsprogs-dev…

java试讲题目,常见的Java面试题汇总

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼二、关于集合1、Java中的集合及其继承关系关于集合的体系是每个人都应该烂熟于心的,尤其是对我们经常使用的List,Map的原理更该如此.2、poll()方法和remove()方法区别?poll() 和 remove() 都是从队列中取出一个元素&…

快钱接口php,快钱支付接口

1.下载快钱的demo代码和一个证书包,还有 人民币网关自助接入接口文档2.生成自己的证书2.0.安装 Win32OpenSSL_Light-0_9_8k.exe打开openssl.exe,2.1. 输入genrsa -out private-rsa.key 1024,按enter即可。2.2 输入req -new -x509 -key private-rsa.key…

php 二维数组排序函数,php自定义函数实现二维数组排序功能

本文实例讲述了php自定义函数实现二维数组排序功能。分享给大家供大家参考,具体如下:/**作用: 二维数组排序函数,支持多键名排序* 返回: 排序好的数组* 使用: array_msort(数组,需要排序的键名,排序方式);* 例子: array_msort($cflist,"chapter_ord…

其他机器无法访问php,PHP 局域网其他机器无法访问的问题

刚安装wamp以后本地访问localhost或者127.0.0.1可以访问,但是如果局域网内其他电脑访问则出现403错误。这大都是因为服务器配置不正确的原因,wamp安装后默认是禁止其他机器访问的。1,首先确定关闭了防火墙并且80端口没有被占用2,修…