首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

何用自己喜欢的 CSS 风格重置网站的样式

一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。 在本文中,我会与你分享我自己的 CSS reset 项(除了 Normalize.css 之外我还使用它们)。...我将 reset 项分为8类: 盒子大小 删除边距和填充 列表 表格和按钮 媒体元素 表格 隐藏属性 Noscript 调整盒子大小 box-sizing 属性改变了 CSS 盒子模型的工作方式。...margins and paddings on most elements */ 2body, 3h1, 4h2, 5h3, 6h4, 7h5, 8h6, 9ul, 10ol, 11li..., 12p, 13pre, 14blockquote, 15figure, 16hr { 17 margin: 0; 18 padding: 0; 19} 列表 我在很多情况下都使用无序列表,而且很多情况下都不需要...这个链接是我在 Github 的 CSS Resets 仓库(https://github.com/zellwk/css-reset)。

1.4K30

CSS Counters

它是CSS2.1提出的标准,主流浏览器对它的支持很好,即使是IE8都支持。利用CSS Counters可以实现“标题自动编号”、“复杂样式的有序列表”等等以前需要后端配合才能实现的样式。...例如下面是由RED TEAM DESIGN提供的特殊有序列表样式: image.png counter-reset与counter-increment的使用 在CSS2.1中counter-reset...可见对于重复重置CSS会默认覆盖前者的初始化值。counter-increment则用于控制Counters的增长,它的值是一个或以上的Counter名字和对应的可选增量值。... 第三列 嵌套Counters与作用域 为了模拟上面的效果,CSS增加了嵌套Counters与作用域的支持。...-- {item[0]=0 重置,作用域开始 --> here’s one line from a numbered list<!

57920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML 入门笔记 - 初识HTML

    ---- 使用,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表新闻列表、图片列表,如下图所示。 ? 这些列表就可以使用ul-li标签来完成。...ul-li是 没有前后顺序的信息列表。 语法: 信息 信息 .........---- 使用,添加顺序列表 如果想在网页中展示有前后顺序的信息列表,怎么办呢?,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用标签来制作有序列表来展示。 ?...总结: table表格在没有添加css样式之前,在浏览器中显示是没有表格线的 表头,也就是th标签中的文本默认为粗体并且居中显示 用css样式,为表格加入边框 Table 表格在没有添加 css 样式之前...使用重置按钮,重置表单信息 当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

    6.5K51

    HTML初学

    写在前面:推荐初学者在w3school上学习 ❤w3school快捷通道❤ ————————————————————————— Web标准构成的三部分: 结构 :HTML 表现 :CSS 行为:...表现标准语言CSS(层叠样式表):负责描述页面的样式。 行为标准:主要包括对象模型 DOM(文档对象模型)、JavaScript(标准脚本语言)等,负责描述页面的动态效果。...6. ol 有序列表 7. li 列表项 8. dl dt dd 自定义列表 注:style="text-align :center"只针对块标签 行级标签: 1. span 区分样式 2....无序列表 标签 说明 ul 表示列表整体,只能包含li li 列表每一项 2. 有序列表 标签 说明 ol 表示列表整体,只能包含li li 列表每一项 3....select系列 属性 说明 select 下拉列表整体 option 下拉列表选项 button系列 属性 说明 submit 提交 reset 重置 button 普通按钮 text area

    3.3K40

    面试题必备-web页面基础

    全局事件属性 onload:在页面加载结束之后触发 onunload:在用户从页面离开时发生,点击跳转,页面重载,关闭浏览器窗口等。...无序列表标签 代表无序列表中的每一个元素 有序列表 定义列表 定义列表中的项目...什么是逻辑部分,它是页面上相互关联的一组的元素,网页中的独立的栏目版块,就是一个典型的逻辑部分。...网页由上到下,由内到外 div,header,footer,nav,article,aside等标签多用于模块划分 css全称为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,文字的大小,...: 一开始没有css样式,为了界面美观,很多元素自带margin,padding等样式,但这些样式在不同浏览器的值都是不一样的,需要将css样式重置,保证在不同浏览器中显示一致。

    2.5K10

    寒假提升 | Day7 CSS 第五部分

    事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局: 原因是列表元素默认的CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多的限制, ul/ol中只能存放...li, li再存放其他元素, 默认样式等; 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div; HTML提供了3组常用的用来展示列表的元素 有序列表:ol、li 无序列表:ul、li 定义列表...三种列表 有序列表 – ol – li ol( ordered list ) 有序列表,直接子元素只能是 li li(list item) 列表中的每一项 无序列表 – ul - li ul(unordered...list) 无序列表,直接子元素只能是li li(list item) 列表中的每一项 定义列表 – dl – dt - dd dl( definition list ) 定义列表,直接子元素只能是...在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.

    1K10

    让我们学会使用 CSS 计数器

    什么是CSS计数器   计数器是css3提供的一个强大的工具,是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。...但与有序列表相比,css计数器可以对任意元素计数,同时还可以实现个性化计数。...0是默认的初始值,所以如果省略它,默认情况下它将重置为零;counter-reset允许使用负值。因此,如果希望计数器从零开始显示,可以将其初始值设置为-1。...嵌套计数器是用于为嵌套元素(嵌套列表)提供自动编号。如果你要将计数器应用于嵌套列表,则可以对第一级项目进行编号,例如,1,2,3等。第二级列表项目将编号为1.1,1.2,1.3等。...嵌套计数器 假设我们有以下列表: Design Web

    1.3K30

    逻辑组合伪类 :not() :is :where :has

    :not() 伪类优先级是0,即本身没有任何优先级,其优先级由括号内表达式决定 :not(li) {} 其优先级就是 li 选择器的优先级。...:not伪类最大的作用就是可以优化我们过去重置CSS样式的策略,使我们代码更加简介,易于理解,例如: .panel{ display: none; } .panel .active{...display: block; } 实际上我们可以简写成 .panel :not(.active){ display: block; } 类似的,希望大家能够培养这种意识,对于遇到需要重置CSS...:any()伪类名义上虽然被舍弃了,但是除了 IE/Edge 以外的浏览器都支持,而且很早就支持,现在也都支持,不过都需要添加私有前缀,-webkit-any()以及-moz-any()。...在 CSS 中使用选择器列表时,如果任何选择器无效,则整个列表被视为无效,即如果某个选择器无法解析,则被视为无效,不正确或不受支持的选择器将被忽略,其他选择器将被使用。

    12610

    HTML第二天

    HTML第二天 ---- 1️⃣列表标签 无序列表–ul (常用) ul:表示无序列表的整体,用于包囊 li 标签 ul 标签中只允许包含 li 标签,默认显示圆点 有序列表–ol (偶尔用) ol:表示有序列表的整体...,列表的每一项前默认显示序号标识 ol:标签中只允许包含 li 标签 自定义列表–dl-dt-dd (底部导航用) dl 标签:表示自定义列表的整体 dl 标签中只允许包含dt/dd标签 dt 标签:表示自定义列表的主题...dt/dd标签可以包含任意内容 dd 标签:表示对于主题的每一项内容,dd 前会默认显示缩进效果 li 标签 li 标签:表示列表标签的每一项,用于包含每一行的内容 li 标签可以包含任意内容 我是表格基本标签 表格的属性 border— 边框宽度 width— 表格宽度 height— 表格高度 (实际开发推荐用CSS...label–常用于绑定内容与表单标签的关系 label 语法:label for=”id名字”></label id 属性在 input 里面写 1️⃣使用方法: 1、使用 label 标签把内容(

    3K20

    【网页特效】丝滑的 macOS Dock效果

    HTML 的部分 打开 CodePen 编辑器,在 HTML 的部分加入一些图标,在这里我会用 Emoji 表情符号来代表,加入一个 列表的标签,class 设定为 dock,然后用 ...02.png CSS 的部分 然后是 CSS 的部分,加入 html 选择器,把基础的文字大小设定为 15px。...加入 .dock 选择器,将图标居中以及横向排列,list-style 列表的样式设定为 none,margin 和 padding 设定为 0,display 设定为 flex,justify-content...06.png 定义一个用于重置 --scale 的函式,名为 resetScale(),把所有 li 的 --scale 重置为 1。 ?...10.gif 在游标移动的过程当中,会将超出范围的 li 的 --scale 重置为 1,以及在游标离开 Dock 的时候,所有 li 的 --scale 都重置为 1。

    1.7K20
    领券