三、CSS样式——列表
概念:
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样式——列表的更多相关文章
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- Java 新手学习 CSS样式列表 排版 格式布局
1,样式表分为 内联样式表 内嵌样式表 外部样式表 三种. 内联样式表是直接写在标签里面的 比如 <p style=“”></p> <div style=& ...
- 前端学习笔记--CSS样式--列表和表格
1.列表 2.表格 odd:奇数 even:偶数
- 【代码笔记】Web-CSS-CSS样式列表(url)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 学习笔记 第八章 使用CSS美化列表
第8章 使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- PHP.9-HTML+CSS(三)-CSS样式
CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实 ...
随机推荐
- 常用且难记的一些css
1.多行文字超出隐藏,自动追加 ... 移动端兼容更好,pc下只能兼容 Safari.Opera 以及 Chrome 等部分浏览器,挺常用. (注:为什么要同时加这几个css不在这里详细叙述,详见) ...
- 安卓开发学习之Menu
安卓开发中菜单是一个很重要的组件,从安卓开发文档(http://wear.techbrood.com/guide/index.html)中可以看到,安卓UI设计中的Menu主要分为: A.Option ...
- String formate的语法解析及简单用法
转自:https://blog.csdn.net/jiangyu1013/article/details/52607257 package cn.wuxiangbin.StringFormat; im ...
- python_ 基本语法
一.基础知识: 1.鸡汤 摘抄至 :简明 python 教程 在人生中取得成功,与其说靠天才与机会,不如说靠专注与毅力! Python 特点:简单.易于学习(简单得语法体系).自由且开发.高级语言.跨 ...
- 第二次Scrum冲刺——Life in CCSU
第二次Scrum冲刺——Life in CCSU 一. 第二次Scrum任务 继续上一次冲刺的内容,这次完成论坛部分. 二. 用户故事 用户输入账号.密码: 用户点击论坛部分: 系统显示帖子: 用户选 ...
- VritualBox安装CentOS及安装增强工具图文教程
一 VM VirtualBox VirtualBox可在官网https://www.virtualbox.org/下载,完全免费. 二 安装CentOS系统(以CentOS6.9为例) 1.Cen ...
- Hbase常用操作记录
Hbase常用操作记录 Hbase 创建表 查看表结构 修改表结构 删除表 创建表 语法:create <table>, {NAME => <family>, VERSI ...
- creator rotationY的问题
最近在做一个2D的小游戏,碰撞方面由于懒,就直接使用cocos自带的物理组件RigidBody了. 但是在父节点挂载RigidBody之后,会导致设置rotationY时失效,具体原因没有深查,估计是 ...
- c# 枚举安卓系统中所有目录及文件名
using Android.App; using Android.Widget; using Android.OS; using System.Runtime.InteropServices; nam ...
- java8_api_net
网络编程1 操作ip地址 核心类 InetAddress 相关方法 getByName,getAllByName,getLocalHost 操作socket地址 ...