列表+样式初始化+元素类型转换

一、ul无序列表

1、无序列表定义 
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 
无序列表始于 <ul>标签。每个列表项始于 <li>

ul标签结构:

<ul>

<li>清心</li>

<li>海牙</li>

<li>玄武</li>

</ul>

2、无序列表项目符号 (基本不用,企业开发用图片代替)<ul type="disc"></ul> 
type=”disc” 实心圆 
type=”circle” 空心圆 
type=”square” 方块符 
3、无序列表的嵌套 (li 放内容,标签 ,图片,链接)

<ul>

<li>咖啡</li>

<li>茶

<ul>

<li>红茶</li>

<li>绿茶</li>

</ul>

</li>

二、ol有序列表

1、列表定义 
有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol>标签。每个列表项始于 <li> 标签。

ol标签结构

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

2、有序列表项目符号 (基本不用,企业开发用图片代替) <ol type="A"></ol> 
type=”A” A B C…序列号 
type=”a” a b c …序列号 
type=”I” I II III…序列号

3、有序列表的嵌套

<ol>

<li>咖啡</li>

<li>茶

<ul>

<li>红茶</li>

<li>绿茶</li>

</ul>

</li>

</ol>

三、dl定义列表

1、定义列表 
自定义列表不仅仅是一列项目,而是项目及其注释的组合。 
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd>开始。

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

四、样式初始化

首先我们来认识下,什么是样式初始化。样式始初始化是指,我们的元素被默认的初始化了某些样式属性值,我们来看下有哪些标签加了那些默认的属性值。

<style type="text/css">

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}

ol,ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

img{border:none;}

</style>

但凡是浏览器默认的样式,都不要使用。 
在写案例前,会在样式的前面先把默认样式清除,以免造成不必要的兼容问题

提示:默认样式没用,为什么浏览器还要给他加默认样式呢?? 是因为表现他本身的结构特性

原文地址:https://www.cnblogs.com/xz793/p/10906994.html

时间: 2024-10-12 02:50:52

列表+样式初始化+元素类型转换的相关文章

样式初始化+元素类型+外边距合并

浏览器默认给边距,去除浏览器默认样式 <!doctype html><html>    <head>        <title>样式初始化</title>        <style>            /* *通配符选择器,选择页面中所有元素,内外边距都设为0*/           *{margin:0px;padding:0;}            /* 多元素选择器,用”,“隔开,能够节省性能*/          

元素类型与样式初始化

一. 样式初始化 为什么要样式初始化 清除浏览器默认样式,以免造成不必要的兼容问题 通配符的弊端 *{ margin:0;padding:0; } 需要逐个清除默认样式 body,p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} ul,ol{list-style:none;} img{border:0px;}/*清除ie图片边框*/ a{text-decoration:none;color:#222;} 二. 标签的分类 1. 块级元

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p

CSS声明 列表样式 显示方式 鼠标形状

列表样式 list-style-type list-style-image 显示方式: 默认显示方式 改变显示方式 鼠标形状: 如何改变属性形状 cursor属性 list-style-type: 该属性控制列表中列表项标志的样式 无序列表 有序列表 list-style-image 该属性使用图像替换列表项的标志 取值为:URL(),制定图像有序或无序列表项的标志 列表样式代码: <!doctype html> <html> <head> <title>列

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

背景样式、列表样式、变形样式、过渡动画

背景样式 背景原点:background-origin : border-box(从border区域(含border)开始显示背景图像.) padding-box(从padding区域(含padding)开始显示背景图像.) content-box(从content区域开始显示背景图像.) <style type="text/css"> .box{ width: 250px; height: 250px; float: left; margin-left: 20px; pa

javascript实现组合列表框中元素移动效果

应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 .  实现的基本思想: (1)编写init方法对两个列表框进行初始化: (2)为body添加onload事件调用init方法: (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添加onclick事件. javascript代码如下: 1 <script type="text/javascript" langu

在一个div里,列表样式图片进行float,实现水平排序

<div class="xiangce"> <ul> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a>&l

css 字体、文本、列表样式

1.字体样式 font-family:设置字体类型  font-family:"隶书"||"wps里面有的"||"常用微软雅黑Microsoft YaHei"; font-size :设置字体大小  font-size:12px; font-style :设置字体风格  font-style: normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 font-weight:设置字体粗细 font-weig