HTML和CSS中的font-family的好看常用的中文字体

在网页设计的时候,希望得到更多好看的字体以及兼容性更强的中文字体,下面列出一些常见的字体,供各位参考。 例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3(加网 ):font: 14px/1.5 'Micro....
  •   
  • 183
  • html
  • 0
  • dodobook
  • 2016/11/25
win8_theme_1

Win8 Metro风格界面设计HTML+CSS网页模板

在网站开发的时候对于底部或者某些局部很多人希望或者喜欢Win8 Metro风格界面.本人也一直很喜欢。截止目前我的dodobook.net的底部都是Metro风格,难不准以后会变,先记录一下这部分代码。欢迎各位分享。图文请各位自行替换调整。 上代码了,各位直接复制即可运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF....
  •   
  • 385
  • html
  • 0
  • dodobook
  • 2016/11/24
css-triangle

HTML纯CSS绘制三角形(各种角度)

我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。此处我们学习使用纯CSS打造三角形的样式。先前的文章是使用PS的形式。直接上DEMO图。 直接上代码: <!DOCTYPE html> <html lang="en"> <head&....
  •   
  • 340
  • html
  • 0
  • dodobook
  • 2016/11/03

HTML中CSS实现图片左上角展示热销的小图片

紧接着上一篇使用PS来制作一张图片右上角促销的三角形图片我们需要的小图片已经有了。下面就是很多程序员都会的事情了。直接上效果图和代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML中CSS实现图片左上角展示热销的小图片</title> </head> <body> ....
  •   
  • 109
  • html
  • 0
  • dodobook
  • 2016/11/03
hot_goods

使用PS来制作一张图片右上角促销的三角形图片

对于商品列表的情况下,需要给商品增加一些特定的标示来更充分的展示表达该商品独特的属性。例如热销,hot,最新,new,上新,待售,下架等。这个时候美工或前端就需要一个好的UI来展示。此时需要做一张小图片来展示在图片左上角或者右上角等。如下图展示所示: 这里的关键在于制作一张小图片,其实是正方形。但是下三角位透明的而已。对于一枚程序员来说。ps功底本来就薄....
  •   
  • 238
  • html
  • 0
  • dodobook
  • 2016/11/03
浏览器自定义滚动条的效果

自定义Web浏览器滚动条的颜色宽度等样式

有时候想对网页的的右边和底部出现的滚动条的颜色宽度进行自定义个性化的改进和设计。尤其是对于一些个性网站来说,浏览器的滚动条也很挑剔。同时你也可以把浏览器的滚动条做的很搭配你的网站风格,这样更加大气时尚。 直接可以利用css样式进行修改而且是全局的哦。直接上示例代码demo(示例如下) ::-webkit-scrollbar{width:5px;height:5px;background-color: #E7E7....
  •   
  • 332
  • html
  • 0
  • dodobook
  • 2016/09/14

百度地图选点–Bootstrap模态框(Modal)插件

在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家。这样更利于网站的用户和商家互动。商家设定自己的经纬度就需要使用到百度地图2.0。此处为百度地图和Bootstrap模态框(Modal)的相关示例DEMO。直接上示例代码。 <!DOCTYPE html> <html> <head> <meta charset....
  •   
  • 2714
  • html
  • 0
  • dodobook
  • 2015/11/21

如何将页脚footer固定在页面底部(纯css实现)

作为一个网站开发人员,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部....
  •   
  • 504
  • html
  • 1
  • dodobook
  • 2015/11/13

HTML5+CSS3鼠标悬停图片事件(收集30种)

随着HTML5+CSS3的广泛应用,现在的图片展示也是越来越丰富多彩了。此处借鉴优秀的关于鼠标悬停图片事件的收集和整理。分享出来,以供大家学习交流和借鉴。此处约莫收集了30种展示效果。 直接上展示图部分如下: 点击进入Demo展示页面 点击下载Demo源码 使用方法: 1、调用CSS样式: <link rel="stylesheet" type="text/css" href="css/nor....
  •   
  • 449
  • html
  • 1
  • dodobook
  • 2015/10/29

HTML5鼠标hover的时候图片放大的效果展示(仿新浪NBA)

看到新浪NBA的图片展示有一种跃然纸上栩栩如生的感觉,随后就像仿造着弄一个效果出来,对商品展示显得高大山一些。此功能不需要借助js完全HTML5+css3即可实现。主要就是HTML5鼠标hover的时候图片放大的效果展示(仿新浪NBA)。心动不如行动,直接上图上代码: 点击进入展示DEMO页面 代码如下。。直接Copy即可(替换一下图片地址) <!DOCTYPE html> <html lang=&....
  •   
  • 669
  • html
  • 0
  • dodobook
  • 2015/10/29

首页自适应的分类图标的动画渐入效果

随着HTML5技术的不断更新和革新,动画效果也越来越多的被使用。下面分享一个很炫的,自适应的分类的效果展示。 该展示不需要借助js或者jquery,单纯的html5+css3实现,有两种方式:渐入和震荡的进入。进入的类型分为左右,各位请根据需要自定义修改即可。 展示效果图如下: 点击进入展示下载页面 HTML部分的代码如下: <!doctype html> <html lang="en&qu....
  •   
  • 601
  • html
  • 0
  • dodobook
  • 2015/10/28

手机WEB页面(HTML5)实现一键拨号及短信发送功能

在一些手机网页上面HTML5的页面,我们需要点击按钮或者电话的图标直接进行拨打电话的功能。其实HTML5已经帮我们做了很多工作了。例如:手机WEB页面(HTML5)实现一键拨号及短信发送功能。 实现该功能需要的条件:支持html5的浏览器 使用方法:在web页面里面实现拨打电话的功能 //拨打电话的功能 <a href="tel:139xxxxxxxx">一键拨打号码</a> //....
  •   
  • 1019
  • html
  • 1
  • dodobook
  • 2015/10/19

HTML5 LocalStorage 本地存储

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。 userData是IE的东西,....
  •   
  • 406
  • html
  • 1
  • dodobook
  • 2015/10/12

分享一个微客聚的产品展示的菜单切换的界面

分享一个微客聚的产品展示的菜单切换的界面。看上去的确很清爽。同时代码也很简介,相信很多用户都选择并喜欢这等简易简洁的代码风格。直接上图。经供参考和围观。底部有下载链接和展示页面。请复制链接并移步下载。如果觉得不错的话,也欢迎分享,相互交流学习。 直接上代码(HTML部分,CSS样式请下载压缩包,解压后即可。) <!DOCTYPE html> <html> <....
  •   
  • 711
  • html
  • 0
  • dodobook
  • 2015/03/02

全是干货!移动Html 5前端性能优化指南

概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB Mobile侧因手机配置原因,除加载外渲染速度也是优化重点 基于第五点,要合理处理代码减少渲染损耗 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置 加载完....
  •   
  • 700
  • html
  • 0
  • dodobook
  • 2015/01/26

Discuz!X3.2设置论坛QQ在线客服无法发起聊天问题解决办法

最近升级了DiscuzX3.2各方面都还是不错滴。但是在discuz中大家有没有发现,当时设置论坛QQ在线客服号码,还是在个人信息里填写QQ号码后,点击DZX在右下角的QQ在线图标或点击帖子浏览里个人信息下的发起QQ聊天,弹出的窗口中都显示“抱歉,无法发起临时会话,您可以添加对方为好友以发送消息” 即使你的QQ设置了接受陌生人对话也无法弹出对话窗口。原因是以下代码出错了!!....
  •   
  • 1110
  • html
  • 1
  • dodobook
  • 2014/11/18

中国省份行政区域地图划分和区域连接,纯html实现

在一些集团性质的企业或者机构的网站的开发和功能软件中。涉及到全国分支机构或者加盟的直观展示的网站页面展示的平台的时候。就需要一个中国的省份行政区域地图划分,并直观的表达或者展示该区域所可以点击或者链接的页面。方便用户直观高效的去查询去区域的相关信息。比表单更直白更直观。 我在此处整理集合成为了一个页面。需要用到2张图片(一张是背景图片,另外一张的....
  •   
  • 3030
  • html
  • 0
  • dodobook
  • 2014/10/25

SNS社交网络的关注我们及微信二维码弹出层显示的方法

进入互联网时代社交平台变成了必不可少的了解或是进入这个社会的入口.微信如此火爆,得益于庞大的用户群体,所以适当的接入进入这个社交网络成为了每一个互联网企业的必须开启的一扇门。 1.点击新浪微博的图标,进入新浪微博进行关注. 2.点击腾讯微博的图标,进入腾讯微博进行关注. 3.点击QQ的图标,启动QQ,在线交流. 4.点击电话或者邮件的图标进行,显示电话号码或调用发送邮....
  •   
  • 1549
  • html
  • 0
  • dodobook
  • 2014/09/18

HTML5重力感应动画特效 冲撞小球演示

这款HML5重力感应动画特效功能更强,页面上会掉落大小不等的小球,我们可以拖动小球,也可以点击页面空白来生产更多的小球,如果你的电脑配置高,可以试试产生更多的小球来玩,非常有趣。 展示地址    点击进入展示页面 另外再向大家分享过一款非常绚的HTML5重力感应游戏特效,我们只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。 查看地址:http:/....
  •   
  • 1018
  • html
  • 0
  • dodobook
  • 2014/07/31

BootStrap下的网站的搜索的样式界面

网站的页面中常常需要用到查询,就避免不了需要设计查询的界面. 在Bootstrap下面有很好的按钮界面和input界面以及查询的图标.可以节省很多的时间精力。 在此弄了两个常见的界面。喜欢的可以拿去用。 文件需要图片支持所以index.php的同级目录下还需要css目录和fonts目录(bootstrap3) 代码和界面示例如下。 <!DOCTYPE HTML> <html lang="en-US"> ....
  •   
  • 2468
  • html
  • 0
  • dodobook
  • 2014/06/25