CSS强制中文/整个英文单词自动换行与不换行
qyl CSS3教程 4007 1 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教程 6965 14 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教程 12375 17 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教程 2315 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教程 6311 10 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教程 1861 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教程 3803 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教程 2725 0 2015-03-26 09:44:03

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

阅读全文

纯div css二级下拉菜单样式模板
dwtedx CSS3教程 1934 0 2015-02-16 11:31:32

一直以来、大家都知道下拉菜单都是利用JS控制HTML标签来达到下拉菜单的效果、但这样的话、在搜索引擎的快照页面就不会显示二级菜单、如果直接使用css来做菜单的话、在搜索引擎的快照页面就会显示二级菜单、大家可以看下我的博客的菜单、就是使用纯css实现的、在快照页可以正常显示功能菜单、其实、下拉菜单的原理并不难、就是利用CSS的overflow属性和height、以及hover(伪类)、三者相互配合、首先将父菜单和子菜单全部排版出来(父菜单和所有的子菜单在同一个<li>标签里面、实际应用中父菜单不可能只有一个、列表排版比较...

阅读全文

glyphicons 图标_精美纯css3 icon图标源码下载
dwtedx CSS3教程 9150 0 2015-01-08 12:34:14

今天在互联网上无意中发现的一套非常实用的html css实现常用的ICON图标、非常不错的实现、在此分享给大家、全部是使用css使用的哦、对做前端的朋友非常有帮助、好好利用哦、先看一下图片截图吧 部分css代码 .social_wordpress_circle:before { content: "e0b0"; } .social_instagram_circle:before { content: "e0b1"; } .social_dribbble_circle:before { content: "e...

阅读全文

css中正确设置字体(css怎么设置字体)
dwtedx CSS3教程 2768 0 2014-04-05 21:30:36

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文...

阅读全文

CSS3之选择器
dwtedx CSS3教程 1546 1 2014-01-09 22:25:15

1. 属性选择器:[att*=val]   [att^=val]   [att$=val] [id*=section1]{background-color:yellow}表示id中拥有section1的背景颜色都设为黄色 [id^=section1]{background-color:red}表示id中开头为section1的背景颜色都设为红色 [id$=section1]{background-color:blue}表示id中结尾为section1的背景颜色都设为蓝色 注意:如果[id...

阅读全文

css3 box-shadow 内阴影与外阴影
dwtedx CSS3教程 1961 0 2014-01-05 14:09:09

css3 box-shadow 内阴影与外阴影 1、 box-shadow具体使用方法,语法: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 取值:投放方式:默认是外阴影 , box-shadow属性至多有6个参数设置,他们分别...

阅读全文

DD记账
top
+