用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg? 解决方法: 使用css的expression方法,具体实现要看看.css的写法:/*替换图片CSS*/ #imgScript{/*这里使用对象ID来通配样式,也可以定义一个css函数*/ star:expression( onmouseover=function() { /*替换图片*/ if(this.hov...
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>MyHtml.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">*{margin:0px;padding:0px;}#web{width:1020px;hei...
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="referrer" content="no-referrer"><title></title><style type="text/css">.zoom{width: 800px;height: 250px;display: flex;margin: 0 auto;}.left{width: 400px;height: 250px;background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2...
以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons html代码如下 <div class="outset-colored"><ul><li> <a href=" " title="My E-Mail" class="email"> <img src="images/gmail_white.png" alt="gmail icon" /> <span class="site">E-Mail</span> </a> </li><li> <a href="#" title="My LinkedIn Page" class="linkedin"> <img src="images/link...
HTML/CSS方法实现下拉菜单来源：慕课网<!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=utf-8"/><title>无标题文档</title><style type="text/css"> *{ margin:0px; padding:0px;}/*清除所有默认格式*/#menu{ background-color:#eee;...
通过基础CSS实现输入提示交互动画效果，并兼容各浏览器！1.效果展示 2.css代码 h4 {margin: 30px 0;}input {margin: 0;font-size: 16px;line-height: 1.5;}.input-fill-x, .input-outline-x, .textarea-outline-x {position: relative;}.input-control:focus + label {color: red;background: white;transform: scale(0.8) translate(0, -17px);}.input-label {padding: 0 5px;position: absolute;left: 10px;top: 3px;tr...
1<!DOCTYPE html> 2<meta charset="UTF-8"/> 3<html> 4 5<head> 6<style> 7 div { 8 width: 100px; 9 height: 100px;10 background: red;11 position: relative;12 animation: myfirst 5s infinite alternate;13}1415 @keyframes myfirst {16 0% { 17 background: red;18 ...
1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。具体实现如下html结构为<div class="title">我是分割线</div>css样式为.title{position: relative;text-align: center;overflow: hidden;font-size: 14px;color: #999; } .title::before,.tit...
css做的一些图形。要先理解一个基础：css边框相接触的地方是45度平分空间的。#k{width: 20px;height: 30px;border: 40px solid;border-color: red green yellow blue;} 图形一： 1#talkbubble { 2 width: 120px; 3 height: 80px; 4 background: red; 5 position: relative; 6 } 7 #talkbubble:before { 8 content:"";9 position: absolute; 10 right: 100%; 11 top:...
一、文字选择的可用性 我们平时因为A原因或B原因，需要复制web页面上的文字内容。常见的操作就是按住鼠标，选中要复制的文字区域，抬起鼠标按键，目标区域的文字就选中了。不知你知不知道，有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。这么说吧，假设你在微博上看见一个名为“屌丝逆袭”的标题，但是，由于孤陋寡闻，不知道这个标题啥意思，于是想百度之，最快的方式就是选择→复制→搜索。结果，像中了邪，这几个文字...
1 实现3D立方体首先准备好UL以及6个Li；代码如下ul { position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve-3d; // 使子元素保留其3D视角-webkit-perspective: 0; //视距离，默认值为0 } li { width: 200px; height: 200px; position: absolute; ...
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
前几天在公司做开发的时候碰到一个列表横向滑动的功能，当时用了iscroll做，结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。这个问题不知道iscroll本身能不能解决，当时选择了换一种方式来做，只要css就能搞定了，主要是利用了display:-webkit-box来实现。<!DOCTYPE html><html><head><title>横向滑动</title><style type="text/css">.slide-box{margin-top: 200px;display: -webkit-box;overflow-x: scroll;-webkit-ov...
学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...
昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责 <!DOCTYPE html> <html...