CSS3的背景渐变_好看的CSS3背景渐变色
dwtedx CSS3教程 39 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高度
dwtedx CSS3教程 52 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简单的星星打分特效
dwtedx CSS3教程 99 0 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元素之间的默认间距
dwtedx CSS3教程 212 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常见布局方式
dwtedx CSS3教程 282 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宽度后自动换行
dwtedx CSS3教程 597 0 2017-03-03 13:21:49

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

阅读全文

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

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

阅读全文

html5 ul li标签制作表格css样式特效Demo源代码
dwtedx CSS3教程 1243 2 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高度自适应浏览器
dwtedx CSS3教程 624 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图片文字等元素抖动效果
dwtedx CSS3教程 1577 3 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点赞效果源代码
dwtedx CSS3教程 3286 192 2016-06-23 13:01:55

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

阅读全文

Font Awesome图标字体下载及安装引用方法
dwtedx CSS3教程 1313 3 2016-06-22 14:02:27

1、场景介绍 网页小图标到处可见、如果一个网页都是干巴巴的文字和图片、而没有小图标、会显得非常简陋、黑白的也好、彩色的也罢、如果用传统的“css 图片”的方式来制作这些icon、我估计你至少得雇佣一个专业的设计师吧、一般的程序猿、包括前端程序猿、估计只能去搜索了、不会自己拿ps画 但是问题又来了、如果你搜索来的是黑白的、现在也用黑白的、后期网站变化主题怎么办?你搜出来的是16 * 16的、要有个页面需要 32 * 32的怎么办?如果沿着这个方向考虑、你会发现、自己将在这上面耗费大量资源和精力 但是如果我告诉你、有一个东西、它已经...

阅读全文

纯CSS仿淘宝右侧悬浮窗口侧边栏代码下载
dwtedx CSS3教程 2684 4 2016-01-25 13:13:52

分享一个仿淘宝右边的侧栏的一个Demo、完全使用CSS3实现的、没有一点JS代码、主要实现的效果是淘宝右侧固定导航、而且带有动画效果的、最后有源代码下载地址、有兴趣的朋友可以下载看看、可以很方便的集成到自己的项目里面、下面是整个Demo的效果图 部分HTML代码<li class="tb-toolbar-item tb-toolbar-item-cart" data-item="cart"> <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd...

阅读全文

CSS强制中文/整个英文单词自动换行与不换行
qyl CSS3教程 2118 0 2016-01-13 13:10:42

在平时的Web开发过程中、默认的情况下、行末的长单词会撑开容器、不是我们想要的、我们想要的应该是不能撑开容器、而且完整的单词不能被强制拆开、如果行末是长单词的话、整个单词都被换行到下一行、就像word一样、能够自动换行、既不撑大容器、也不强制拆开行末单词、并且不会隐藏行末单词的多余字母、本文将给你条案、先看一下如下CSS代码.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/ .p2{ word-wrap:break-word; width:150px;}...

阅读全文

DIV+CSS网页布局实例_网页布局入门实例
dwtedx CSS3教程 6250 10 2015-12-28 10:07:53

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习、第一种可能是你还没有理解CSS处理页面的原理、在你考虑你的页面整体表现效果前、你应当先考虑内容的语义和结构、然后再针对语义、结构添加CSS、下面给大家提供一个简单的例子 index.html代码 <html> <head> <title>DIV+CSS简单的页面布局示例</title> <link rel="stylesheet...

阅读全文

DD记账
top
+