(2017.9.27) 自定义列表项 list-style 使用心得

    今天给某公司做招聘专页。早上完成设计图,下午开始排版。页面套用了我之前做的某人才局的招聘页面,导航栏、banner 很快就出来了。这次内容里我有些地方用了列表,当然要用 <ul> <li> 标签。列表项(小圆点)做成绿色的小正方块,这时我想是不是有一个 CSS 属性用来自定义列表项。 不用不知道,还真有。list-style 其中可定义 list-style-type、list-style-position 和 list-style-image,这三个属性是可以合在一起写。list-style-image 正是自定义列表项图案。

    开始定义他们之前,我遇到了两个问题:1、 <li> 标签默认样式小圆点不见了。查看后发现,初始化样式表 <ul> 定义了 list-style: none,导致默认的小圆点去掉了。那需要我们把 <ul> 的 list-style 定义一下。2、list-style-position 有两个可选值:insite 和 outsite,使用 insite (列表项在行内)没有问题,但使用 outsite(列表项在行外),小圆点就不见了。原来还是因为初始化样式表,它把 <div> 定义了 overflow: hidden,溢出 <div> 那部分会被切掉。而 <ul> 包含在 <div> 里面,所以 <div> 把溢出的列表项给切掉。这里把 <div> 定义默认的 visible 就行了。

    可以开始自定义列表图案。首先,把图案从 PS 上切下来保存在指定位置。定义 list-style-image: url(i/icon.gif)。问题来了,图案没有和文字水平居中。百度之,日 <li> 需设置固定高度,设之,无用。仔细再查,原来前人对自定义图案早有经验:方案1,在列表项图案切图时包含底下留白,该方案要确保图案留白与页面底色一致。我认为此方案不优雅,因为字体可能会变大变小因此,不能复用。方案2,用 background 属性自定义项目列表图案。此方案可灵活控制图案位置,而且文字与图案之间间距也易于控制,(我不会告诉你用 padding 控制间距)。总结一下,其实初始化样式表将 <li>默认的小圆点去掉是有其道理。第一,大多情况下,不会用到列表项。第二,用 list-style 自定义列表项实在不好控制。

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

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

相关文章

链式存储mysql_链栈:栈的链式存储结构

前面讲完了栈的顺序存储结构&#xff0c;我们现在来看看栈的链式存储结构&#xff0c;简称为链栈。链栈是没有附加头结点的运算受限的单链表。栈顶指针就是链表的头指针。栈是用栈顶来做插入和删除操作&#xff0c;那么对于链栈的栈顶放在链表的头部还是尾部呢&#xff1f;单链…

树状数组 学习笔记

树状数组可以用来求区间元素的和。与前缀和做法不同&#xff0c;它支持值的修改。比如说&#xff0c;现在我有一个数列a&#xff0c;要求你维护这个数列&#xff0c;使其支持两个操作。1.改变数列第k项的值2.查询从第i项到第j项的总值暴力做法总是过不了所有点的&#xff0c;如…

使用Spring Security添加RememberMe身份验证

我在“ 将社交登录添加到Jiwhiz博客”中提到&#xff0c;RememberMe功能不适用于Spring Social Security。 好吧&#xff0c;这是因为该应用程序现在不通过用户名和密码对用户进行身份验证&#xff0c;并且完全取决于社交网站&#xff08;例如Google&#xff0c;Facebook和Twit…

iOS动画-从UIView到Core Animation

首先&#xff0c;介绍一下UIView相关的动画。 UIView普通动画&#xff1a;[UIView beginAnimations: context:];[UIView commitAnimations]; 动画属性设置&#xff1a; 1 //动画持续时间2 [UIView setAnimationDuration:(NSTimeInterval)];3 //动画的代理对象4 …

视觉表现理论知识

本文地址&#xff1a;http://www.cnblogs.com/veinyin/p/7606714.html 终于可以知道视觉表现的实现方式&#xff0c;而不是一个一个的具体实现了&#xff0c;突然感到自己能够把握页面的整体布局了呢&#xff0c;似乎学到了表现背后的东西&#xff1f; 以下是一个突然发现自己…

java jnlp_java – 调试JNLP启动应用程序

解决方案#1 – 启用Java控制台,并查找异常.您可以通过Java控制面板完成.切换到“高级”选项卡,然后在Java控制台中确保选中“显示控制台”.然后,运行您的应用程序并监视控制台以查找异常.修复异常.解决方案#2 – 调试正在运行的应用程序(正确).像这样启动Web Start应用程序(适用…

201621123055《JAVA程序设计》第三周学习总结

1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词。 答&#xff1a;类、对象、关键字等。1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来。(注&#xff1a;首次使用&#xff0c;不太会用软件&#xff09; 2. 书面作业 1.以面向对象方式改造数据结构…

通过运行示例从WSO2 ESB开始

我最近加入了一个新任务&#xff0c;在该任务中&#xff0c;我们必须基于WSO2工具栈实施ESB解决方案。 尽管我熟悉ESB的大多数概念以及其他一些实现&#xff08;例如Mule ESB &#xff09;&#xff0c;但这是我第一次必须使用WSO2 ESB 。 幸运的是&#xff0c;可以找到很多文档…

爬虫(十二):scrapy中spiders的用法

Spider类定义了如何爬去某个网站&#xff0c;包括爬取的动作以及如何从网页内容中提取结构化的数据&#xff0c;总的来说spider就是定义爬取的动作以及分析某个网页 工作流程分析 以初始的URL初始化Request&#xff0c;并设置回调函数&#xff0c;当该request下载完毕并返回时&…

position:fixed 兼容浏览器低版本

项目中遇到的坑&#xff0c;写篇博客做个笔记纪念下&#xff0c;position: fixed一般来说都兼容各个浏览器&#xff0c;但是要兼容浏览低版本问题&#xff0c;就得用-webkit-transform: translateZ(0);这段代码了。 项目中用到position: fixed;z-index: xxx;的时候&#xff0c;…

一些关于博主的xibusana

博主就是OI强省GD内偏远小渔村的咸鱼一条&#xff0c;雄性 高一开始入OI坑&#xff0c;从此走上了爆零和%大佬的不归路。 由于我的ID略多&#xff0c;所以你在网上可能找不到我哦v 2018/9/17 博主现在是一条走高考路的高三狗啊qvq 博客比较少上了&#xff0c;现在的目标还是考上…

监控java_Java应用程序监控JavaMelody

JavaMelody是运行在Java Web容器中&#xff0c;用来监控Java内存和J服务器CPU使用情况&#xff0c;用户Session数量&#xff0c;JDBC连接数&#xff0c;和http请求、sql请求等的执行数量&#xff0c;平均执行时间&#xff0c;错误百分比等。图表可以按天&#xff0c;周&#xf…

Heroku和Java –从新手到初学者,第1部分

最近&#xff0c;我听说Heroku允许在Cedar堆栈中部署Java应用程序。 由于没有真正的软件构想&#xff0c;我决定尝试一下&#xff0c;仅将SOMETHING配置为可在Heroku上运行。 我对ReST有一些迷恋&#xff08;我仍然想学习并练习&#xff09;&#xff0c;所以我决定我的第一个应…

【谈谈IO】BIO、NIO和AIO

BIO: BIO是阻塞IO&#xff0c;体现在一个线程调用IO的时候&#xff0c;会挂起等待&#xff0c;然后Thread会进入blocked状态&#xff1b;这样线程资源就会被闲置&#xff0c;造成资源浪费&#xff0c;通常一个系统线程数是有限的&#xff0c;而且&#xff0c;Thread进入内核态也…

css动画-模拟正余弦曲线

今天就写一个css3抛物线的动画吧 从左到右的抛物线动画&#xff0c;我们就暂且把动作分为匀速向右运动和变速的上下运动。 水平匀速运动我们可以利用 translateX(x)&#xff1a;定义 2D 转换&#xff0c;沿着 X 轴移动元素&#xff1b;以及linear&#xff1a;动画从头到尾的速…

UVA-11549 Calculator Conundrum

InputThe first line of the input contains an integer t (1 ≤ t ≤ 200), the number of test cases. Each test casecontains two integers n (1 ≤ n ≤ 9) and k (0 ≤ k < 10 n ) where n is the number of digits this calculatorcan display k is the starting num…

java 当前类_Java获取当前类名的两种方法

适用于非静态方法&#xff1a;this.getClass().getName()适用于静态方法&#xff1a;Thread.currentThread().getStackTrace()[1].getClassName()获取类名&#xff1a;1、在类的实例中可使用this.getClass().getName();但在static method中不能使用该方法&#xff1b;2、在stat…

具有内部类构造函数参数的Java Reflection奇数

关于Java内部类 Java允许成员类&#xff08;在其他类内定义的类&#xff09;&#xff0c;局部类&#xff08;在语句块内定义的类&#xff09;和匿名类&#xff08;无名称的类&#xff09;&#xff1a; class Outer {Object anonymous new Object(){}; // this is an anonymou…

HDOJ 1012-1020

最近感冒了&#xff0c;有点小咳嗽&#xff0c;做题速度比较慢&#xff0c;本以为这周会做的比较少&#xff0c;没想到全是水题。。。我做的也蛮开心的....对自己无语HDOJ 1012这个题目蛮简单&#xff0c;就是输出格式比较烦&#xff0c;处理好格式基本就没问题了HDOJ 1013这个…

静态页面如何实现 include 引入公用代码

一直以来&#xff0c;我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的&#xff0c;就像下面这样&#xff1a; <!-- index.php --><!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"&…