CSS实现图片在div a标签中水平垂直居中<div class="demo"> <a href="#"> <img src="test.jpg" /> </a></div>/*For Firefox Chrome*/.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;position:relative;}.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}.demo a img{border:1px #ddd solid;margin:0...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title></title><style type="text/css"> #head{ height:40px; background-color:#0033CC; margin:0;} #content{ background:#CCCCCC; height:200px; margin:0;} #left{ wid...
在进行app制作时，需要使用横向滚动条是内容展示更完善 首先，这是html代码： 这是CSS代码： 要点： 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hidden，否则会出现上下滚动条 ::-webkit-scrollbar可以设置滚动条样式，display：none，去掉滚动条 效果： 原文：https://www.cnblogs.com/yuanjunjundebo/p/11828094.html
display: grid; /* 垂直居中 align-items: center; justify-content: center; */ /* 垂直居中 place-items: center;*/ /* 左上角 place-items: start; */ /* 右上角 place-items: start end;*/ /* 左下角 place-items: end start; */ /* 右下角 place-items: end; */ /* 居中靠上对齐 place-items: start center; */ /* 居中靠下对齐 place-items: end center; */ /* 居中靠左对齐 place-items: cen...
新技能传授-哔哔哔哔search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：这是不错的体验！当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长得略微粗糙了点，设计师同学接受不了。貌似不和谐了，咋办？传...
原文:纯CSS3实现自定义涂鸦风格的边框今天我们要来分享一款基于纯CSS3的自定义边框应用，看上去它像一个Tooltip控件，因为下边框有一个小三角，就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的，看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下实现的方法，主要由HTML代码和CSS代码组成。HTML代码：<div><div><div>CSS3简单实现涂鸦风...
page-break-after可以实现强制分页，比如始终在<footer>元素后插入分页符, @media print 表示这段css只在打印时起作用。@media print {footer {page-break-after: always;} } css 语法page-break-after: auto|always|avoid|left|right|initial|inherit; 属性值值描述auto默认。 自动分页always总是在元素后插入分页符avoid避免在元素后分页（如果可能）left在元素后插入分页符，以便将下一页格式化为左页right在元素之后插入分页符...
本文将使用css+html+js实现横向菜单，具有下拉的多级弹出菜单。首先我们来看看效果图：首先应该写html部分的代码，代码比较简单，代码如下：<body><div id="menu"><ul><li><a href="#" id="current">首页</a></li><li><a href="#">网页版式</a><ul><li><a href="#">自适应宽度</a></li><li><a href="#">固定宽度</a></li></ul></li><li><a href="#">web教程</a><ul><li><a href="#">新手入门</a></li><li><a href="#">视频教程</a>...
CSS3渐变色生成网站：http://gradients.glrzad.com/ 本文参考：前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3出来以前，想要显示一个渐变的效果，必须要专门制作一个图片。CSS3的出现，使得渐变色得以简单的实现。由于不是所有的浏览器都支持CSS3，所以不是所有的浏览器都能够显现出渐变的效果来。目前，Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性。不过，两者对于渐变的语...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery+CSS实现的高亮显示选中二级菜单效果丨石家庄地毯</title> <style type="text/css"> *{margin:0;padding:0} body{font-size:14px;}...
通过纯css实现圆角的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。具体代码： 1<style type="text/css"> 2ul{margin:0px; padding:0px; list-style:none;} 3 .wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;} 4 .step-case{height:40px;} 5 .step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;} 6 .step-case li span{display:b...
前几天在“CSS那些事儿”的群中，一位读者朋友（小土豆）问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了，为什么呢，怎么一点印象都没有呢。赶紧打开电子版的《CSS那些事儿》找到相对应的章节，并且在各个浏览器中测试了之后才发现，我当初对这块的说明太少了，才让她产生了一些不理解的想法，或许也有其他的一些读者会存在这样的问题。发现了问题就需要解决问题，因此我就拿这个首字下沉的时候为什么...
今天做表单时遇到让上下两个字段对齐的情况，手机号码、用户名。然后今天在网上找了找相关方法，发现确实是没有什么好的方法解决，特别是当需要兼容的时候。找到了两个我觉得相对还不错的方法：方法一、是在司徒正美的博客上看到的—— text-align， text-justify；需要设置 text-align为justify就行了，text-justify的情况复杂些。IE的取值如下：auto :允许浏览器用户代理确定使用的两端对齐法则inter-word :通过增加字之间的空格...
1 圆点渐入渐出要点： 缩放和透明度的变化,循环变化<div class="demo1"></div>.demo1{width: 40px;height: 40px;margin: 0 auto;border-radius: 100px;background-color: red;opacity: 1;animation: fadeIn 1s infinite ease-in-out;}@-webkit-keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}@keyframes fadeIn{from{transform: scale(0);}to{transform: scale(1);opacity: 0;}}2 线条loading图...
前几天一@同事看新浪微博里有个类似分隔线的提示，就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。单个标签实现分隔线： 点此查看实例展示 .demo_line_01{padding: 0 20px 0;margin: 20px 0;line-height: 1px;border-left: 200px solid #ddd;border-right: 200px solid #ddd;text-align: center; }优点：代码简...