概念：

　　CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

属性 描述
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型 
 <!--index.html-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <ul class="style-image">

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

     </ul>

     <p>看一下效果</p>

     <ul class="ul1">

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

     </ul>

     <ul class="ul2">

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

         <li>苹果</li>

     </ul>

 </body>

 </html>
 /*style.css*/

 .style-image{

     /*list-style-type: armenian;*/

     list-style-image: url("1.JPG");

 }

 .ul1{

     list-style-position: inside;

 }

 .ul2{

     list-style-position: outside;

 }

三、CSS样式——列表的更多相关文章

  1. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  2. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  3. Java 新手学习 CSS样式列表 排版 格式布局

    1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=& ...

  4. 前端学习笔记--CSS样式--列表和表格

    1.列表 2.表格 odd:奇数  even:偶数

  5. 【代码笔记】Web-CSS-CSS样式列表(url)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  7. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  8. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  9. PHP.9-HTML+CSS（三）-CSS样式

    CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...

随机推荐

  1. Git入门（安装及基础命令行操作）

    一.安装 1.Mac 在Mac中安装Git的方法不止一种.最简单的要数通过Xcode命令行工具.对于Mavericks(10.9)或更高版本的操作系统,当你第一次尝试在终端执行git命令时,系统会自动 ...

  2. npm install 插件 --save与 --save -dev的区别

    npm i 插件   ,会把插件安装到node_modules目录中,不会修改package.json, npm i 插件 --save  ,项目发布上线之后还会依赖用到的插件,没有这些插件,项目不能 ...

  3. java.lang.UnsupportedClassVersionError: JVMCFRE003解决方法--jdk 1.6 中switch的参数无法使用String类型

    在jdk 1.6版本中,switch的参数无法使用String类型,只支持int,char,enum类型. 1.6版本之前不支持switch语句存在字符串的判断,升级到1.7或1.8及以上版本即可.

  4. 微信小程序测试策略

    一.测试前准备(环境搭建) 1.前端页面 微信Web开发者工具安装.授权测试用的微信号可预览和调试小程序... 可参考此文: 微信Web开发者工具-下载.安装和使用图解 2.管理后台 配置内网测试服务 ...

  5. PHP之魔术方法

      PHP中的魔术方法: PHP的魔术方法主要是在特定的条件下执行相应的魔术方法.这和很多框架中的钩子函数有些类似,不同的是,钩子函数是在生命周期的某个周期内自动执行,而魔术方法是在触发某种条件下自动 ...

  6. vue 通知 走马灯效果

    封装一个子组件: <template> <div class="container"> <div class="wrap"> ...

  7. ubuntu typora使用学习

    typora使用方法 标题: 对于标题,直接用ctrl+对应数字就是第几级标题 文字格式: ctrl+B/I/U 进入加粗/倾斜/下划模式,不需要符号键入 居中的话 用 CENTER 列表引用: 可直 ...

  8. transmission跳过文件校验功能实现

    贴吧链接:https://tieba.baidu.com/p/4839039900 GitHub:https://github.com/superlukia/transmission-2.92_ski ...

  9. numpy用法

    NumPy中创建特殊值 np.nan    np.inf nan表示数据空缺   inf表示无穷 参考:https://www.cnblogs.com/haoxi/p/9175781.html

  10. MySQL Execution Plan--IN子查询包含超多值引发的查询异常1

    ======================================================================= SQL语句: SELECT wave_no, SUM(I ...