CSS3教程

CSS3计数器Counter_用CSS计算选中的复选框有几个
shinyuu CSS3教程 3599 1 2018-06-12 13:18:09

很早之前，计数器仅存在于ul，ol等元素中，如何想给其他元素增加计数，就只能通过list-style-image，或者background-image来实现。不过现在css3增加了counter属性，可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。 css计数器 counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。 counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。 counter()插入计数器 完整代码<!...

阅读全文

CSS动态计算设置宽度_避免CSS网页布局错位
shinyuu CSS3教程 4212 1 2018-04-24 13:43:12

为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容。常见的我们布局左右结构网页或使用padding、margin布局的时候将计算整页宽度，如果不计算无论是宽度过大过小就会出现错位问题。 怎么计算CSS宽度 例一：我们计算一个左右结构的布局样式。假如总宽度为400px，那么左右加起来就应当小于400px，那我们可能左边为300px，右边为100px正确代码：<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="tex...

阅读全文

html5 css 提示气泡框_css实现空心三角形边框
shinyuu CSS3教程 7345 3 2017-11-20 14:29:17

背景: 项目过程中有个tab切换需要用到空心三角形的效果。作为一名后端工程师，实在是不知道怎么写，在网上找了一些看了一下别人的实现方式，发现大多数都是实心三角。后来终于发现一个实现空心三角的，顿时热泪盈眶啊。实现效果比较粗略，不过还是思路还是比较清晰的，借鉴了一下，在原有的基础上做了一些改进，增加一些效果 空心三角原理：主要利用元素伪类(:before,:after)实现 实现CSS代码：<style>#talkbubble { width: 120px; height: 80px; positi...

阅读全文

XML报文格式_XML定长报文、变长报文格式化
shinyuu CSS3教程 11241 2 2017-11-15 14:14:21

目前接触到的报文格式有三种：xml 、定长报文、变长报文 。此处只做简单介绍，日后应该会深入学习到三者之间如何解析，再继续更新。   XML XML 被设计用来传输和存储数据。 HTML 被设计用来显示数据。 XML 仅仅是纯文本 XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。 不过，能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。 通过 XML 您可以发明自己的标签 例子： XML 使用简单的具有自我描述性的语法：<?x...

阅读全文

CSS3的背景渐变_好看的CSS3背景渐变色
shinyuu CSS3教程 7687 0 2017-09-04 13:17:54

关于css3的渐变、目前各大浏览器还未做到很好的支持、所以需要在我们使用时加上各大浏览器前缀 -moz-：使用Mozilla内核的浏览器（Firefox浏览器） -webkit-：使用Webkit内核的浏览器（Chrome,Safari浏览器） -o-：使用Opera内核的浏览器（Opera浏览器） 这里对IE不做过多介绍、对于本文背景颜色的渐变、也没有考虑IE 一、线性渐变(linear-gradient) 1.语法：-moz-linear-gradient(<point>/<angle>,<col...

阅读全文

div中iframe高度自适应问题_iframe 自适应div高度
shinyuu CSS3教程 5839 0 2017-08-28 13:51:19

网页分为上、中、下三部分、上、下高度固定中间高度自适应；中间分为左、右两部分、左边宽度固定、右边宽度自适应、现在右侧div是宽度和高度都是自适应、右侧div里有个IFrame、想让IFrame自适应外部div的宽度和高度？ 我自己做的时候出现的问题是：当ifame的width和height设置为100%时、iframe会被挤出div、下滑到div的下面、然后我试了很多网上说的也没有解决、然后加了个东西就不会出现那种情况了 下面为我的div的js设置//window.onresize表示窗口触发时间的时候执行//两个函数、用闭包包裹...

阅读全文

HTML5五角星评分_纯CSS3简单的星星打分特效
shinyuu CSS3教程 12859 17 2017-08-21 14:01:16

分享一个纯css3星星打分特效、是一款简单的css3鼠标悬停星星打分效果代码、注意没有一点JS代码哦、全部是使用css3写出来的、非常不错的、集成也非常方便、只有引入css文件就好了 HTML代码<div class="star-rating"> <fieldset> <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Outstanding">5...

阅读全文

如何去除掉inline-block元素之间的默认间距
shinyuu CSS3教程 4407 0 2017-04-10 14:50:13

前几天写一个页面、发现宽度为900px的div居然放不下3个宽度为300px的内联元素li、只好改用了float:left来布局、后来上网一查、才知道inline-block是有默认间距的、默认间距为4px、并且inline也是有默认间距、现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法 代码如下div{ width:900px;}div li{ display:inline-block; width:300px;}<div><ul> <li&...

阅读全文

CSS布局教程_CSS布局技巧_CSS常见布局方式
shinyuu CSS3教程 4351 0 2017-03-29 14:05:11

一. display 1. block 块元素block元素可以设置宽高特性、一般适用于div、header、footer、section、from 2. inline 行内元素inline元素默认不换行的特性、a元素、span、行内元素不会改变段落的布局、可以将ul li改成inline做成水平菜单 3. none通常用来不删除元素的情况下隐藏元素 4. inline-block 在过去很长的一段时间内使用 float 是一种选择、但是使用 inline-block 会更简单、直接当做float使用即可 二.margin:0 a...

阅读全文

CSS控制文字自动换行_内容超出div宽度后自动换行
shinyuu CSS3教程 13223 2 2017-03-03 13:21:49

自动换行问题、正常字符的换行是比较合理的、而连续的数字和英文字符常常将容器撑大、挺让人头疼、比如 “abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111”、下面介绍的是 使用 CSS 如何实现换行的方法 对于div、p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal、当定义的宽度之后自动换行 html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal、当定义css#wrap{ white-s...

阅读全文

移动前端优化技巧_漫谈Web前端优化方法
shinyuu CSS3教程 4605 0 2017-02-20 15:03:19

近几年、移动端站点和app、手游井喷式的发展、大大出乎了当初从业者的预料、2010年前后中国还处于3G网时代、各种3G宣传铺天盖地、如果你稍稍回忆一下、那个时候中国几乎没有像样的移动站点；大约在12年左右、也就是iphone4s诞生的时代、在中国高级智能设备开始被普遍使用、4G的覆盖范围也越来越大、各种app、移动站点 Html5活动页面也逐渐火爆起来；随着行业的发展、对从业者及技术支持的要求也越来越高；对于前端、前端资源和页面优化是常见要求、对比移动端、移动端对前端优化的要求更高、可以说要达到极致、虽然现在基本都有使用WIFI了、...

阅读全文

html5 ul li标签制作表格css样式特效Demo源代码
shinyuu CSS3教程 14927 4 2017-01-12 14:04:59

可能大家工作中也发现了一个问题、就是平时使用 table 标签制作表格代码繁琐、且不方便后期代码维护、如果使用 li 标签加上 css 的浮动样式可以制作多种样式的表格、话不多说来看一下最后的效果图吧 HTML代码<ul class="tableul"> <li class="rowtitle">一年级一班</li> <li class="rowleftright">姓名</li> <li class="rowright">性别</...

阅读全文

HTML CSS元素高度自适应_CSS高度自适应浏览器
shinyuu CSS3教程 8856 0 2016-12-12 12:48:28

网页布局中有时候有的高度需要根据内容调整、所以不能固定、今天就来说说、最小高度自适应 属性：min-height 最小高度、但IE6不识别该属性、height在IE6中类似min-height属性 一、HTML高度自适应 方案1.class_name{ min-height:value; _height:value;} 注意、IE6能识别下划线"_"和星号" * "、IE7能识别星号" * "、但不能识别下划线"_"、而firefox两个都不能认识 方案2 (建议使用).class_name{ min-hei...

阅读全文

纯css3实现html图片文字等元素抖动效果
shinyuu CSS3教程 10714 9 2016-07-28 10:47:57

今天我们要来分享一款很酷的CSS3动画抖动的特效、它可以让网页中的任何元素进行抖动、抖动的参数也可以自定义设置、可以定义抖动的快慢、方向以及更为复杂的抖动效果 该应用基于CSS3实现、实现起来也比较方便、可以很方便的集成到自己的项目中、效果图如下 html代码<section> <p class="shake shake-hard">shake-hard</p></section> 引入css<link href="css/shake.css" rel="style...

阅读全文

HTML5 CSS网站打赏功能实现及JS点赞效果源代码
shinyuu CSS3教程 19140 1016 2016-06-23 13:01:55

分享一个点赞加打赏的特效、很久之前就想给博客加一个点赞的功能、但一直觉得找不到好的创意、这事就一直拖下来了、这几天也在网上找了一些想着的特效、有需要的可以前往看看 jQuery微信支付宝打赏插件、但都不是很满意、总感觉那里不对、然后呢就自己试着写了一个 写程序的对于界面上的那些事总是少那么点、现在我写出来的这款点赞和打赏的插件个人觉得还是不错、起码自己很满意、主要是用 CSS 和 Font Awesome图标 开发的、现在就把这个小功能分享给大家、有类似需求的朋友可以下载使用、可以在我博客的文章页找到效果、效果图片如下 Htm...

阅读全文

DD记账
top
+