要实现在页面上点击指定元素时，弹出一个信息提示框。在前面的文章中，我们已经简单介绍了如何使用纯 CSS 创建一个三角形。本文在此基础上，记录如何使用 CSS 创建带三角形的提示框。 实现的原理是创建一个div提示框，然后再创建一个三角形，将三角形用绝对定位（absolute）到提示框对应的位置。 一、创建不带边框的提示框： 之前已介绍过怎么生成三角形，直接代码如下：<style> body { margin: 0; padd...
我们经常会看到一些网页有如下效果：点击文本的小箭头后：想要达到如下的效果，其实并不难，我的思路是，先使用一个div（先设置一个小于p高度的值，并使用overflow:hidden;,使p显示只有div设置高度以内的内容，当点击div时，变为和p一样的高度），在里面用一个p标记存放所有的文本内容，用一个i标记（上图1小箭头）用于第一次点击显示全部文本（使用hover，设置点击后，i标记的高度为0，就可以达到点击后影藏上图1小箭头的效果），...
<strong><!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=UTF-8"><style type="text/css">*{margin:0px;padding:0px;}a{width:64px;height:64px;background:url("images/1.pn...
利用css中 background-size：cover 填充整个viewport注意： 一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真； 但是在移动端使用如此大的图片完全是浪费资源，大图会导致加载变慢，尤其是在移动网络下。在移动端可以另设一张相对小一点的图片使用媒体查询body{ /* 加载背景图 */ background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */ background-position: cen...
序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用LESS代码：.adaptive-circle {margin: 50px auto 0;width: 80%;height: 0;padding-top: 80%;border-radius: 100%;border: 1px solid #000;box-sizing: border-box; // for .layout { height: 100%; }position: relative;.layout {position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;text-align: cente...
<div > <div ><div ><div ><div >56</div><div >上传知识</div></div> </div><div > <div ><div >56</div><div >上传知识</div></div></div><div > <div ><div >56</div><div >上传知识</div></div></div></div><div ><div ><div ><div >56</div><div >上传知识</div></div> </div><div > <div ><div >56</div><div >上传知识</div></div></div><div > <div ><div >56</div><div >上传知识</div></div></div></div> </div><style> ...
代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">html,body {height: 100%;width: 100%;}* {margin: 0;padding: 0;cursor: default;}ul,li {list-style: none;position: relative;}a {text-decoration: none;color: #FFFFFF;}li {min-height: 40px;}#nav {background-color: #000000;width: 210px;height: 100%;color: #FFFFFF;}#nav>ul>li {text-align: center;transition: 300ms...
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. 复制代码代码如下:.box { /* 首先定义要使用的4幅图像为背景图 */ backgrou...
最终效果如图： 用到的知识：Python Bottle HTML Javascript JQuery Bootstrap AJAX 当然还有 linux 我去，这么多……我还是一点一点说起吧…… 先贴最终的源代码： #!/usr/bin/env python3from bottle import get,post,run,request,template@get("/")def index(): return template("index")@post("/cmd")def cmd(): print("按下了按钮: "+request.body.read().decode()) return "OK"run(host="0.0....
一、在cs2、cs3、cs4上安装httpd [root@cs2 ~]# yum install httpd[root@cs3 ~]# yum install httpd[root@cs4 ~]# yum install httpd 二、在cs3、cs4上安装php和php-mysql [root@cs3 ~]# yum install php[root@cs3 ~]# yum install php-mysql[root@cs4 ~]# yum install php[root@cs4 ~]# yum install php-mysql 三、在cs5上安装mysql [root@cs5 ~]# yum install mariadb-server 四、在cs5上给dz论坛创建数据库 ...
nginx实现js css不缓存的方法：首先找到并打开nginx安装目录下的nginx.conf文件；然后配置内容为“location ~ \.(js|css|html|png|jpg)$ {add_header...}”即可。本教程操作环境：Windows NT系统、nginx1.14&&css3版，该方法适用于所有品牌电脑。推荐：《css视频教程》在本地开发的时候，经常会碰到缓存引起的莫名其妙的问题，最暴力的方式就是清掉浏览器的缓存，或者使用Ctrl + F5，Shift + F5强制刷新页面。有时候按了好几下，缓...
【1】服务端配置一个Filter，实现对js、css和image的缓存 package cn.com.system.filter;import java.io.IOException;import java.util.Enumeration;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletResponse;public class CacheForWeekFilter { ...
1、html的缓存主要采取ASIHTTPRequest的缓存策略 （1）、设置缓存策略 //设置缓存 ASIDownloadCache *cache=[[ASIDownloadCache alloc] init]; self.myCache=cache; //设置缓存路径 NSArray *paths =NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES); NSString *documentDirectory = [paths objectAtIndex:0]; //设置缓存存放路径 [self.myCache setStoragePath:[doc...
Ehcache是一个纯Java进程内缓存框架，该内存框架可以实现对页面或对象等数据的缓存；与Memacached一样，该框架也支持集群/分布式缓存。本片博客用于研究如何借助Ehcache缓存框架实现对页面的缓存。页面缓存主要用Filter过滤器对客户端的http请求进行过滤，如果该请求存在于缓存中，那么页面将从缓存对象中获取gzip压缩后的数据（其速度是没有压缩缓存时速度的3-5倍）。页面缓存的过滤器有CachingFilter，可以通过继承该CachingFilt...
方法如下：1、手动清除浏览器缓存；2、添加版本号（如 layout.css?v=1）个人认为方法2更快，因为清除浏览器缓存还要等浏览器响应。但是每次更改版本号也很麻烦，所以需要想办法自动添加版本号。（推荐教程：html教程）方法一：可以通过js自动给html添加版本号<script type="text/javascript"> document.write("<link rel=stylesheet type=text/css href=/css/layout.css?v="+new Date().getTime()+">"); </script>方法二：若是...