ul、li列表样式部分如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表样式</title>

    <style>

        ul.ul1{

            /*list-style常用值:decimal数字

                               circle空心圆

                               disc实心圆，系统默认*/

            list-style-image: url("../../image/icon.png");

            /*outside偏向外侧*/

            list-style-position: outside;

        }

        ul.ul2{

            list-style-image: url("../../image/icon.png");

            /*inside偏向内侧*/

            list-style-position: inside;

        }

    </style>

</head>

<body>

<ul class="ul1">

    <li>柠檬</li>

    <li>苹果</li>

    <li>香蕉</li>

</ul>

<ul class="ul2">

    <li>柠檬</li>

    <li>苹果</li>

    <li>香蕉</li>

</ul>

</body>

</html>

css基础知识之列表的更多相关文章

  1. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  2. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  3. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  4. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  6. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  7. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  8. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  9. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

随机推荐

  1. 数据库常用语句sql

    --查看表结构DESC tablename;DESC tablenam; --删除表即全部数据DROP TABLE tablename;DROP TABLE tablenaem; --使用SQL语句创 ...

  2. Eclipse中配置约束(DTD,XSD)

    在Eclipse中本地配置schema约束(xsd): 1.比如配置spring的applicationContext.xml中的约束条件: 复制applicationContext.xml中如图: ...

  3. Java使用拦截器的两种方式

    拦截器是个好东西,之前用到过,现在记录一下,供以后参考使用! 其一,使用org.aspectj.lang.annotation.Aspect 先上代码: package com.test.interc ...

  4. vue2中component父子组件传递数据props的使用

    子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...

  5. 一步一步学习Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  6. Spring源码情操陶冶-AbstractApplicationContext

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-ContextLoader 约束:本文指定contextClass为默认的XmlWebApplicationContext Abst ...

  7. 关于解决mysql数据库乱码的问题

    最近在开发的过程中频繁的使用到了mysql'这款数据库,mysql的中文乱码问题一直让人头疼.以前遇到过几次,但是都一不小心就解决了,这次终于明白到底是怎么回事了.可能我下面手的这种解决方案只适合于我 ...

  8. Java中的24种设计模式与7大原则 （转）

    一.创建型模式 1.抽象工厂模式(Abstract factory pattern): 提供一个接口, 用于创建相关或依赖对象的家族, 而不需要指定具体类.2.生成器模式(Builder patter ...

  9. [补档][NOI 2008]假面舞会

    [NOI 2008]假面舞会 题目 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一个自己喜欢的面具. 每个面具都有一 ...

  10. mbos之动态图表设计

    前言 所谓,一图胜千言.人脑有80%的部分专门用于视觉处理.而随着数据时代的全面来临,我们自然有必要将数据转化为图形与图表. Mbos是一个快速,稳定的云端轻应用开发平台.帮助企业快速开发移动应用,加 ...