CSS控制文字自动换行_内容超出div宽度后自动换行
dwtedx CSS3教程 92 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教程 95 0 2017-02-20 15:03:19

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

阅读全文

html5 ul li标签制作表格css样式特效Demo源代码
dwtedx CSS3教程 322 1 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教程 267 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教程 748 0 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教程 1353 52 2016-06-23 13:01:55

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

阅读全文

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

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

阅读全文

纯CSS仿淘宝右侧悬浮窗口侧边栏代码下载
dwtedx CSS3教程 1808 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教程 768 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教程 4144 3 2015-12-28 10:07:53

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

阅读全文

纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式
dwtedx CSS3教程 7741 12 2015-07-20 12:22:18

估计做过Web的都发现了一个问题、radio和checkbox由于不同的浏览器显示的样式不一致、因此我们需要自定义radio(单选框)和checkbox(多选框)的样式、基本原理就是给radio和checkbox的自定义样式设置成图片背景、然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别、从而达到自定义radio和checkbox的假象、最终生成的效果图、如下所示 HTML代码如下 <form accept-charset="utf-8" meth...

阅读全文

HTML5纯CSS3实现天气动画图标特效
dwtedx CSS3教程 1501 0 2015-06-04 10:17:06

本Demo是使用CSS3实现动态天气小图标功能、动态天气特效是一款纯CSS3实现的天气出太阳、下雨、雷阵雨等动画、效果非常好看、个人觉得使用CSS3动画图标特效比GIF图片好多了、效果如下 部分CSS3代码 .weather-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webki...

阅读全文

使用@media screen and实现响应式web网页
dwtedx CSS3教程 4792 7 2015-05-20 12:11:08

做web前端的攻城师都知道、经常要为不同分辨率设备或不同窗口大小下布局错位而头疼、现在很好咯、可以利用@media screen实现网页布局的自适应 但是怎样兼容所有主流设备就成了问题、到底分辨率是多少的时候设置呢?下面我分享一个自己在项目中使用的一套响应式的技巧、希望对大家有用 个人认为有几个临界点的分辨率、那么我们就可以轻松的来写自己的自适应代码了 480px以下 @media only screen and (max-width: 479px) { .head_title{ backgr...

阅读全文

css3 svg动态图标_css3 SVG动画效果下载
dwtedx CSS3教程 1314 0 2015-05-04 09:41:15

本Demo是一款基于jQuery和CSS3实现的SVG图标动画、CSS3实现150个动画SVG图标、代码非常简单、调用了 http://www.w3.org/ 上面的的开放资源、其主要还是通过CSS3来实现的、部分效果图如下 下面为大家讲解一下使用方法、以那个照相机为例 HTML代码如下 <div class="iconholder"> <span class="iconwrap"> <span class="long-shadow"></span&g...

阅读全文

9种纯css3 loading圈加载动画效果下载
dwtedx CSS3教程 2513 0 2015-04-16 09:11:12

本Demo是一个loading页面加载的一个功能、图标都是通过css3代码来实现的、Demo里面一共包含9款不同loading效果、Demo引入了bootstrap.min.css和一个自定义的9种加载动画、相比我以前分享的css3加载动画特效选择性要多些、可以根据项目的需要选择不同的loading加载动画效果、效果图如下 以loader4为例HTML代码如下 <div class="col-md-6 text-center"> <p>loader 4</p> &l...

阅读全文

纯CSS3 loading环形加载条_CSS3加载动画效果
dwtedx CSS3教程 1736 0 2015-03-26 09:44:03

以前分享过一个html jQuery加载进度条插件、主要是使用jQuery和html实现的、现在再分享一个纯css3实现的条纹加载条、绿色条纹css3进度条、并且带有响应式的效果、代码非常简单、只有一点css、非常的轻盈、如果你有进度条的需求、这个非常不错、如果你觉得绿色和你的项目风格不一致、你也可以修改成其实颜色 HTML代码 <div class="container"> <div class="warning"> </div> </div>...

阅读全文

DD记账
top
+