mirror of
https://github.com/wahyd4/wahyd4.github.com.git
synced 2026-08-09 13:26:14 +10:00
1352 lines
58 KiB
HTML
1352 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
|
||
<link rel="mask-icon" href="/images/logo.svg" color="#222">
|
||
|
||
<link rel="stylesheet" href="/css/main.css">
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha256-VHqXKFhhMxcpubYf9xiWdCiojEbY9NexQ4jh8AxbvcM=" crossorigin="anonymous">
|
||
|
||
<script class="next-config" data-name="main" type="application/json">{"hostname":"toozhao.com","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.28.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12,"b2t":true,"scrollpercent":true},"hljswrap":true,"codeblock":{"theme":{"light":"default","dark":"stackoverflow-dark"},"prism":{"light":"prism","dark":"prism-dark"},"copy_button":{"enable":true,"style":"mac"},"fold":{"enable":false,"height":500},"language":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":true,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":5,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.js" defer></script>
|
||
|
||
<meta name="description" content="分享编程、运维、生活与思考">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="大染志">
|
||
<meta property="og:url" content="https://toozhao.com/page/10/">
|
||
<meta property="og:site_name" content="大染志">
|
||
<meta property="og:description" content="分享编程、运维、生活与思考">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="article:author" content="Junv">
|
||
<meta property="article:tag" content="junv, wahyd4, blog, toozhao, 大染志">
|
||
<meta name="twitter:card" content="summary">
|
||
|
||
|
||
<link rel="canonical" href="https://toozhao.com/page/10/">
|
||
|
||
|
||
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/10/index.html","title":""}</script>
|
||
|
||
<script class="next-config" data-name="calendar" type="application/json">""</script>
|
||
<title>大染志</title>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous" defer></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc=" crossorigin="anonymous" defer></script>
|
||
<script src="/js/utils.js" defer></script><script src="/js/sidebar.js" defer></script><script src="/js/next-boot.js" defer></script><script src="/js/bookmark.js" defer></script>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.5.0/search.js" integrity="sha256-xFC6PJ82SL9b3WkGjFavNiA9gm5z6UBxWPiu4CYjptg=" crossorigin="anonymous" defer></script>
|
||
<script src="/js/third-party/search/local-search.js" defer></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>
|
||
/* =========================================================
|
||
Toozhao blog custom styles (injected via head.njk)
|
||
阅读体验优化 — 微信读书风格
|
||
========================================================= */
|
||
html { scroll-behavior: smooth; }
|
||
|
||
/* 主内容阅读宽度 */
|
||
.post-block, .posts-expand .post-block {
|
||
max-width: 760px;
|
||
}
|
||
|
||
.post-title {
|
||
font-size: 1.7em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.post-meta { color: #999; font-size: 0.9em; }
|
||
|
||
.post-body {
|
||
font-size: 1.05em;
|
||
line-height: 1.9;
|
||
letter-spacing: 0.02em;
|
||
color: #333;
|
||
}
|
||
.post-body p {
|
||
margin: 1.1em 0;
|
||
text-align: justify;
|
||
text-justify: inter-ideograph;
|
||
}
|
||
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
|
||
line-height: 1.4;
|
||
margin-top: 1.6em;
|
||
margin-bottom: 0.8em;
|
||
font-weight: 600;
|
||
color: #222;
|
||
}
|
||
.post-body h2::before, .post-body h3::before, .post-body h4::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 0.9em;
|
||
background: #4a90d9;
|
||
border-radius: 2px;
|
||
margin-right: 10px;
|
||
vertical-align: -0.08em;
|
||
}
|
||
.post-body img {
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
margin: 0.6em auto;
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
.post-body blockquote {
|
||
border-left: 4px solid #4a90d9;
|
||
background: rgba(74, 144, 217, 0.06);
|
||
margin: 1.4em 0;
|
||
padding: 0.8em 1.2em;
|
||
border-radius: 0 8px 8px 0;
|
||
color: #555;
|
||
}
|
||
.post-body blockquote p { margin: 0.4em 0; }
|
||
.post-body a {
|
||
color: #2d6cdf;
|
||
border-bottom: 1px solid rgba(45, 108, 223, 0.3);
|
||
transition: color 0.2s, border-color 0.2s;
|
||
}
|
||
.post-body a:hover { color: #1a4fae; border-bottom-color: #1a4fae; }
|
||
.post-body code {
|
||
background: rgba(0, 0, 0, 0.05);
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
font-size: 0.9em;
|
||
color: #c7254e;
|
||
}
|
||
.post-body table {
|
||
border-collapse: collapse;
|
||
margin: 1.2em auto;
|
||
font-size: 0.95em;
|
||
}
|
||
.post-body table th, .post-body table td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px 14px;
|
||
}
|
||
.post-body table th { background: #f5f7fa; font-weight: 600; }
|
||
.post-body table tr:nth-child(even) { background: #fafbfc; }
|
||
.post-body ul, .post-body ol { padding-left: 1.6em; margin: 0.8em 0; }
|
||
.post-body ul li, .post-body ol li { margin: 0.35em 0; }
|
||
.post-body hr {
|
||
border: none;
|
||
border-top: 1px dashed #ccc;
|
||
margin: 2em auto;
|
||
width: 60%;
|
||
}
|
||
|
||
/* 暗色模式（跟随系统，不依赖 NexT darkmode class） */
|
||
@media (prefers-color-scheme: dark) {
|
||
body { background: #1b1f24; color: #c8cdd3; }
|
||
.post-body { color: #c8cdd3; }
|
||
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: #e8eaed; }
|
||
.post-body blockquote { background: rgba(74, 144, 217, 0.1); color: #9aa5b1; }
|
||
.post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
|
||
.post-body table th, .post-body table td { border-color: #3a3f45; }
|
||
.post-body table th { background: #2d3238; }
|
||
.post-body table tr:nth-child(even) { background: #262a2f; }
|
||
.post-meta { color: #777; }
|
||
}
|
||
|
||
::selection { background: rgba(74, 144, 217, 0.25); }
|
||
|
||
/* 字体调节按钮 */
|
||
.font-size-control {
|
||
position: fixed;
|
||
right: 18px;
|
||
bottom: 90px;
|
||
z-index: 1000;
|
||
background: rgba(0, 0, 0, 0.65);
|
||
color: #fff;
|
||
border-radius: 20px;
|
||
padding: 6px 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
user-select: none;
|
||
}
|
||
.font-size-control button {
|
||
background: none;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
padding: 3px 8px;
|
||
opacity: 0.85;
|
||
}
|
||
.font-size-control button:hover { opacity: 1; }
|
||
</style>
|
||
|
||
<noscript>
|
||
<link rel="stylesheet" href="/css/noscript.css">
|
||
</noscript>
|
||
</head>
|
||
|
||
<body itemscope itemtype="http://schema.org/WebPage">
|
||
<div class="headband"></div>
|
||
|
||
<main class="main">
|
||
<div class="column">
|
||
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
|
||
<div class="site-nav-toggle">
|
||
<div class="toggle" aria-label="切换导航栏" role="button">
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="site-meta">
|
||
|
||
<a href="/" class="brand" rel="start">
|
||
<i class="logo-line"></i>
|
||
<h1 class="site-title">大染志</h1>
|
||
<i class="logo-line"></i>
|
||
</a>
|
||
<p class="site-subtitle" itemprop="description">Junv's blog</p>
|
||
</div>
|
||
|
||
<div class="site-nav-right">
|
||
<div class="toggle popup-trigger" aria-label="搜索" role="button">
|
||
<i class="fa fa-search fa-fw fa-lg"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<nav class="site-nav">
|
||
<ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
|
||
<li class="menu-item menu-item-search">
|
||
<a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
<div class="search-pop-overlay">
|
||
<div class="popup search-popup">
|
||
<div class="search-header">
|
||
<span class="search-icon">
|
||
<i class="fa fa-search"></i>
|
||
</span>
|
||
<div class="search-input-container">
|
||
<input autocomplete="off" autocapitalize="off" maxlength="80"
|
||
placeholder="搜索..." spellcheck="false"
|
||
type="search" class="search-input">
|
||
</div>
|
||
<span class="popup-btn-close" role="button">
|
||
<i class="fa fa-times-circle"></i>
|
||
</span>
|
||
</div>
|
||
<div class="search-result-container">
|
||
<div class="search-result-icon">
|
||
<i class="fa fa-spinner fa-pulse fa-5x"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
<aside class="sidebar">
|
||
|
||
<div class="sidebar-inner sidebar-overview-active">
|
||
<ul class="sidebar-nav">
|
||
<li class="sidebar-nav-toc">
|
||
文章目录
|
||
</li>
|
||
<li class="sidebar-nav-overview">
|
||
站点概览
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="sidebar-panel-container">
|
||
<!--noindex-->
|
||
<div class="post-toc-wrap sidebar-panel">
|
||
</div>
|
||
<!--/noindex-->
|
||
|
||
<div class="site-overview-wrap sidebar-panel">
|
||
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<img class="site-author-image" itemprop="image" alt="Junv"
|
||
src="/images/avatar.gif">
|
||
<p class="site-author-name" itemprop="name">Junv</p>
|
||
<div class="site-description" itemprop="description">分享编程、运维、生活与思考</div>
|
||
</div>
|
||
<div class="site-state-wrap animated">
|
||
<nav class="site-state">
|
||
<div class="site-state-item site-state-posts">
|
||
<a href="/archives/">
|
||
<span class="site-state-item-count">310</span>
|
||
<span class="site-state-item-name">日志</span>
|
||
</a>
|
||
</div>
|
||
<div class="site-state-item site-state-tags">
|
||
<a href="/tags/">
|
||
<span class="site-state-item-count">249</span>
|
||
<span class="site-state-item-name">标签</span></a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="links-of-author animated">
|
||
<span class="links-of-author-item">
|
||
<a href="https://github.com/wahyd4" title="GitHub → https://github.com/wahyd4" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
|
||
</span>
|
||
</div>
|
||
<div class="cc-license animated" itemprop="license">
|
||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="main-inner index posts-expand">
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/06/01/pencil/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/06/01/pencil/" class="post-title-link" itemprop="url">快速设计界面原型软件pencil</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-06-02 00:00:00" itemprop="dateCreated datePublished" datetime="2011-06-02T00:00:00+10:00">2011-06-02</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>也许你以前还用photoshop设计软件或者网站的UI界面吧，当然photoshop 的华丽和真实性其他软件所无法比拟的，但是photoshop 也有一个很大的缺点，那就是使用photoshop设计一个很完善的UI很费时间，很多时候，也许我们只想快速把脑袋里面的创意和想法初步地画出来。不需要太精确，而只需要一个大概的东西，亦或是想很快速的做出一个效果，和大家讨论。这个时候我们就可以使用这个软件了PENCIL</p>
|
||
</blockquote>
|
||
<ol>
|
||
<li>首先pencil是一个开源软件，可以免费下载，其次它可以在firefox浏览器下运行或者 你可以选择在linux 和windows下面独立运行</li>
|
||
<li>可以设计windows，linux 桌面应用程序的UI，也可以设计WEB网站的UI。还有比较卡通的风格，我个人比较推荐这个。</li>
|
||
<li>我个人还是比较推荐在windows下面独立运行，我觉得在笔记本上面firefox 的启动速度还是比较慢的，而且寄宿于浏览器应该没有独立程序运行速度快吧。</li>
|
||
<li>这个软件虽然是全英文的，不过操作还是会问简单的，即使是英文也是比较简单浅显易懂的英文，然而界面的设计也只需要拖动模块即可！</li>
|
||
</ol>
|
||
<p>其他的就不再赘述了，下面是软件的截图和下载地址。<br><a href="/images/2011/06/xcsd.jpg"><img src="/images/2011/06/xcsd.jpg" title="xcsd"></a></p>
|
||
<blockquote>
|
||
<p>下载地址：<a target="_blank" rel="noopener" href="http://pencil.evolus.vn/en-US/Downloads/Application.aspx">官方下载</a> <a target="_blank" rel="noopener" href="http://u.115.com/file/aqptf45o">网盘下载</a></p>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/05/26/announce/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/05/26/announce/" class="post-title-link" itemprop="url">算是声明吧</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-05-27 00:00:00" itemprop="dateCreated datePublished" datetime="2011-05-27T00:00:00+10:00">2011-05-27</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>反反复复，总是觉得没有激情再把日志写下去了。但是想到自己付出快一年的心血又觉得不忍心啊！原本打算利用写博客指望赚到每一年域名和空间的费用，可是这一年下来我证明我错了，大多数人喜欢来了看一眼博客然后就走掉。</p>
|
||
</blockquote>
|
||
<p>写博客这一年google adsense 大概也就赚到了5美元！</p>
|
||
<p>以前大多写的是分享的东西，没有多少真正属于自己的东西，但是我想从以后应该不一样了吧。我还是决定把博客走技术路线了。不在乎太多，而且现在现在这个博客和域名到底是买国外的，还是使用学校的我有的一个二级域名，我也没有想好！</p>
|
||
<p>毕竟使用学校的不需要钱，但是又要受到和。谐啊！</p>
|
||
<p>我想给大家看一个最近做的东西，基于地图的小小伪原创的东西：</p>
|
||
<blockquote>
|
||
<p>希望大家支持吧：<a target="_blank" rel="noopener" href="http://wxmedia.cdu.edu.cn/">http://wxmedia.cdu.edu.cn</a></p>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/04/11/html5-css3-javascript-coverflow/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/04/11/html5-css3-javascript-coverflow/" class="post-title-link" itemprop="url">Html5+CSS 3实现Cover Flow 动画特效(支持chrome、safari浏览器)</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-04-12 00:00:00" itemprop="dateCreated datePublished" datetime="2011-04-12T00:00:00+10:00">2011-04-12</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p><strong>更新：已经加入了javascript，现支持图片之间进行动态切换，大家enjoy吧！</strong></p>
|
||
<p>下面将要给大家演示的这个东西，算是这几天的一个小小的成果吧，不过目前仅仅是静态的实现，还没有对其加上javascript 等控制。但是这个动画相比传统动画有一个很大的优点就是，动画的内容组成是可以是DIV，因此里面包含的内容可以是canvas 或者图片，甚至可能视频，等等，目前我还没有测试。理论上可以放进DIV 的东西都可以放到动画里面去。</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/04/s_conew1.jpg"><img src="/images/2011/04/s_conew1.jpg" title="s_conew1"></a></p>
|
||
<p>这个动画其实最关键的部分就是使用了一个最新的CSS 3 属性 animation，目前仅有webkit核心的浏览器支持这个特效。</p>
|
||
<p>而在本动画中涉及的有：（动画的声明）</p>
|
||
<blockquote>
|
||
<p>-webkit-animation-name:junv; //动画名称</p>
|
||
<p>-webkit-animation-duration:4s; //动画循环时间，单位为秒</p>
|
||
<p>-webkit-animation-iteration-count:infinite; //动画播放次数，infinite 表示 无线循环 也可以饿确定的数字</p>
|
||
</blockquote>
|
||
<p>注意：这里的” // ” 并不是CSS 的注释，这里这样写，只是为了方便。下面一样，不再重复说明。</p>
|
||
<blockquote>
|
||
<p>@-webkit-keyframes’junv’{</p>
|
||
<p>from{</p>
|
||
<p>}</p>
|
||
<p>to{</p>
|
||
<p>}</p>
|
||
<p>}</p>
|
||
</blockquote>
|
||
<p>上面的是动画的默认形式，</p>
|
||
<blockquote>
|
||
<p>@-webkit-keyframes’junv’{</p>
|
||
</blockquote>
|
||
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">from{ //设置动画起始状态的CSS</span><br><span class="line"></span><br><span class="line">top:15px;</span><br><span class="line"></span><br><span class="line">left:-160px;</span><br><span class="line"></span><br><span class="line">-webkit-transform: rotate(7deg) scale(0.4,0.75) skew(12deg,8deg);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">40%{</span><br><span class="line"></span><br><span class="line">//这是动画过程中 CSS ， 百分之多少，大家可以可以根据自己需要任意设置，数量也不限，设置得越多，对动画的人为控制也越多。</span><br><span class="line"></span><br><span class="line">top:62px;</span><br><span class="line"></span><br><span class="line">left:230px;</span><br><span class="line"></span><br><span class="line">-webkit-transform: rotate(0deg) scale(1,1) skew(0deg,0deg); //设置设置对象的形态， rotate 是旋转，跟的 单位度数，可为负数</span><br><span class="line"></span><br><span class="line">//scale 是放缩，分别对 x,y方向放缩倍数</span><br><span class="line"></span><br><span class="line">//skew 是旋转，即x轴方向旋转多少，y轴旋转多少 ，单位为度</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">70%{</span><br><span class="line"></span><br><span class="line">top:62px;</span><br><span class="line"></span><br><span class="line">left:230px;</span><br><span class="line"></span><br><span class="line">-webkit-transform: rotate(0deg) scale(1,1) skew(0deg,0deg);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">100%{</span><br><span class="line"></span><br><span class="line">top:12px;</span><br><span class="line"></span><br><span class="line">left:580px;</span><br><span class="line"></span><br><span class="line">-webkit-transform: rotate(-7deg) scale(0.4,0.75) skew(-12deg,-8deg);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
||
|
||
<p>这是具体在这个页面里面的代码。</p>
|
||
<p>下面稍微解释一下，我之所以设置40%，和70%状态一样，为为了，让整个动画，可以在中间位置停留更长的时间。</p>
|
||
<p>其他的东西先不多说了，我要回寝室睡觉了，大家有什么不懂的，或者想讨论的留言吧。！</p>
|
||
<blockquote>
|
||
<h2 id="示例（demo）：点我进入"><a href="#示例（demo）：点我进入" class="headerlink" title="示例（demo）：点我进入"></a>示例（demo）：<a href="http://toozhao.com/coverflow/" title="cover flow">点我进入</a></h2></blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/04/11/javascript-dom-pdf/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/04/11/javascript-dom-pdf/" class="post-title-link" itemprop="url">Javascript DOM编程艺术 中文PDF下载</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-04-12 00:00:00" itemprop="dateCreated datePublished" datetime="2011-04-12T00:00:00+10:00">2011-04-12</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p><strong>由于115网盘关闭公开下载了，所以不能再提供网盘了。如果有需要的同学请留邮箱吧，我会把电子书发给你的。！</strong></p>
|
||
<p>最近一直在学习CSS3和HTML5 做前台的东西，大概做了一个类似于动画的东西，我可能会稍后给大家分享一下吧。</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/04/s1958902.jpg"><img src="/images/2011/04/s1958902.jpg" title="s1958902"></a></p>
|
||
<p>还是稍微介绍一下这本书吧，这本书，好像是07年出版的，虽然年代已经有几年了，不过内容倒是挺经典的。这本书我个人认为更加适合没有javascript 惊出或者对javascript有一些，但是不太多认识的人。</p>
|
||
<blockquote>
|
||
<p>全书一共分为12个章节：</p>
|
||
<p>第1章 JavaScript简史</p>
|
||
<p>第2章 JavaScript语法</p>
|
||
<p>第3章 DOM</p>
|
||
<p>第4章 案例研究：JavaScript美术馆</p>
|
||
<p>第5章 JavaScript编程原则和良好习惯</p>
|
||
<p>第6章 案例研究：JavaScript美术馆改进版</p>
|
||
<p>第7章 动态创建HTML内容</p>
|
||
<p>第8章 充实文档的内容</p>
|
||
<p>第9章 CSS-DOM</p>
|
||
<p>第10章 用JavaScript实现动画效果</p>
|
||
<p>第11章 学以致用：JavaScript网站设计实战</p>
|
||
<p>第12章 展望DOM脚本编程技术</p>
|
||
</blockquote>
|
||
<p>看完这本书，你就会觉得，作者真正做到了，使用最简单的语言来描述其他人可能会用很复杂的语言来描述的东西，我相信大家看了一定会喜欢这本书的。</p>
|
||
<blockquote>
|
||
<p>注：如果你可以，请购买正版，附当当网购买链接：<a target="_blank" rel="noopener" href="http://product.dangdang.com/product.aspx?product_id=9236640">点我</a></p>
|
||
<p>下载地址：网盘下载</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p> </p>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/04/03/a-good-gift/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/04/03/a-good-gift/" class="post-title-link" itemprop="url">一个好的礼物——希望对你有所触动</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-04-04 00:00:00" itemprop="dateCreated datePublished" datetime="2011-04-04T00:00:00+10:00">2011-04-04</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>搞IT的同学，平时还是多多休息一下吧，其实身边还有很多东西值得我们去看，去学。</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/04/gift11.jpg"><img src="/images/2011/04/gift11.jpg" title="gift11"></a></p>
|
||
<p>希望大家看后有所感触吧。不要等到我们不健康的那一天才去找回那些失去的美好。珍惜身边的一切。<br>这个视频来自TED</p>
|
||
<blockquote>
|
||
<p>视频下载：<a href="ed2k://|file|TED%E6%BC%94%E8%AE%B2%E9%9B%86.2010.02.%E4%B8%9D%E5%BE%B7%E8%8C%9C%C2%B7%E5%85%8B%E8%8E%B1%E9%BB%98%EF%BC%9A%E6%88%91%E5%BE%97%E8%BF%87%E7%9A%84%E6%9C%80%E5%A5%BD%E7%A4%BC%E7%89%A9.Stacey.Kramer.The.Best.Gift.I.Ever.Survived.Chi_Eng.720X396-YYeTs%E4%BA%BA%E4%BA%BA%E5%BD%B1%E8%A7%86%E5%88%B6%E4%BD%9C.rmvb|13866636|D718486913808798FEF1E71E2CE481C1|/|/">点我下载</a>（请使用电驴或者迅雷复制链接下载）</p>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/03/26/bbc-the-chinese-are-coming/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/03/26/bbc-the-chinese-are-coming/" class="post-title-link" itemprop="url">《BBC 中国人要来了》(BBC The Chinese Are Coming)</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-03-27 00:00:00" itemprop="dateCreated datePublished" datetime="2011-03-27T00:00:00+11:00">2011-03-27</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>很久没有分享关于电影或者影视之类的东西了，今天给大家分享一个纪录片，是英国BBC做的关于中国的。</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/03/11022510472e32b046e54ce959_conew1.jpg"><img src="/images/2011/03/11022510472e32b046e54ce959_conew1.jpg" title="11022510472e32b046e54ce959_conew1"></a></p>
|
||
<p>这个纪录片是BBC做的主要内容是讲关于中国崛起和中国改变世界的格局，里面的记者穿越非洲，南美洲和北美洲通过一些例子去说明这个问题。</p>
|
||
<p>这个纪录片一共两集，每集约60分钟。</p>
|
||
<blockquote>
|
||
<p>我个人看了这个纪录片有以下一些想法：</p>
|
||
<ul>
|
||
<li>这个纪录片是外国人拍的，一个世界上的大国英国，我个人觉得这个纪录片最终拍出来还是不是很客观的说明一些东西。</li>
|
||
<li>这个纪录片反映了中国的强大，和中国的商品和商人正遍布非洲和南美洲这些新兴市场。</li>
|
||
<li>里面讲的有一个观点就是，中国的商品正以廉价占领市场和对当地的商品造成打击。</li>
|
||
</ul>
|
||
</blockquote>
|
||
<p>个人看了这个电影还是感触很多的，只是有一些想法不方便分享出来。有些愤青。大家自己看看吧。不管怎么样，还是挺不错的这个纪录片。</p>
|
||
<blockquote>
|
||
<p>下载地址：<a href="magnet:?xt=urn:btih:O6RFFS6ZZM7QBHXF45RAJUAQHFAQDT7A&tr.0=http://tracker.openbittorrent.com/announce&tr.1=udp://tracker.openbittorrent.com:80/announce&tr.2=http://tracker.thepiratebay.org/announce&tr.3=http://tracker.publicbt.com/announce">打包下载</a>（请使用迅雷，电驴复制链接）</p>
|
||
<p>下载资源来自：<a target="_blank" rel="noopener" href="http://yyets.com/showresource-juji-798.html">http://yyets.com/showresource-juji-798.html</a></p>
|
||
</blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/03/25/omegle-talk-to-strangers/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/03/25/omegle-talk-to-strangers/" class="post-title-link" itemprop="url">Omegle——Talk to strangers！和全世界的陌生人聊天</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-03-26 00:00:00" itemprop="dateCreated datePublished" datetime="2011-03-26T00:00:00+11:00">2011-03-26</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>各位同学平时一般都是和QQ好友之类的聊天吧（就是需要首先添加为好友才可以聊天），大家也都是和中国人聊天吧？各位有没有想过和全世界的陌生人一起聊天，可以不用留下任何信息，如果你愿意你还可以喝外国朋友视频聊天。</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/03/stock-connect_conew1.jpg"><img src="/images/2011/03/stock-connect_conew1.jpg" title="stock-connect_conew1"></a></p>
|
||
<p>和你上面看到的一样，今天给大家分享的就是这样一个网站——<a target="_blank" rel="noopener" href="http://omegle.com/">omegle</a>，你可以直接进入网站和上面在线的外国朋友一起聊天，当然里面也可能碰到中国的朋友，因为和你聊天的人都是网站服务器随机匹配的。</p>
|
||
<ul>
|
||
<li>当然为了更加国际化，那么大家几乎都是使用英语交流，至少在你们没有发现对方也是使用中文之前吧。</li>
|
||
<li>当然面对对方所问的问题，你都可以随意说，因为大家谁都不认识谁，而且你也没有留下任何可以找到你的信息，如果你愿意。</li>
|
||
<li>还可以在线使用视频和外国朋友聊天。</li>
|
||
<li>如果你不喜欢和你聊天的朋友，你可以直接将他PASS掉，给你主动权，当然别人也可以将你PASS掉。</li>
|
||
<li>最后你可以保存你们聊天的内容，遇到聊得来的朋友，可以留下自己的联系方式多为MSN，或者E-mail.</li>
|
||
</ul>
|
||
<p><strong>以下是笔者通过在这个网站和外国朋友聊天得到的一些感触吧：</strong></p>
|
||
<ul>
|
||
<li>很多人喜欢一来就问你ASL，A代表age年龄,S代表sex性别,L代表location代表所在地即国家城市。</li>
|
||
<li>如果遇到台。湾的朋友，不用过于纠结在政。治问题上，否则会很扫兴的，上面的台湾朋友不少，我就在上面认识了几个。</li>
|
||
<li>有些国家的人有些瞧不起中国人，如果听到你是中国人而且你还是个男生，可能会立刻PASS掉。</li>
|
||
<li>视频的话，可能会遇到露阴狂，我曾经遇到过，希望大家注意吧。</li>
|
||
</ul>
|
||
<blockquote>
|
||
<h2 id="点击进入：omegle"><a href="#点击进入：omegle" class="headerlink" title="点击进入：omegle"></a>点击进入：<a target="_blank" rel="noopener" href="http://omegle.com/">omegle</a></h2></blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/03/20/1561/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/03/20/1561/" class="post-title-link" itemprop="url">web 开发者必备的几款google chrome app</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-03-21 00:00:00" itemprop="dateCreated datePublished" datetime="2011-03-21T00:00:00+11:00">2011-03-21</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>博客还是要继续的，只是鄙人有点懒惰，还有点懈怠，而且有时候也是真的不晓得该写些什么好。今天还是分享好东西，google chrome 浏览器的app应用，不过这次是针对web 开发人员或者相关童鞋的，很不错的哦！</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/03/chrome-new-logo_conew1.jpg"><img src="/images/2011/03/chrome-new-logo_conew1.jpg" title="chrome-new-logo_conew1"></a></p>
|
||
<h2 id="Firebug-Lite-for-Google-Chrome"><a href="#Firebug-Lite-for-Google-Chrome" class="headerlink" title="Firebug Lite for Google Chrome"></a><a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench">Firebug Lite for Google Chrome</a></h2><p>这个插件大家应该很熟悉吧，最初是在firefox上的，也是因为这个可能不少童鞋选择使用firefox吧，不过现在firebug 也出chrome版本的了，在浏览器里面调试网页和web应用的童鞋有福了，其实我个人倒也觉得google自己自带的开发者工具也已经很强大了。不过还是萝卜白菜各有所爱吧。 起功能就不用我具体说明了吧！</p>
|
||
<h2 id="Eye-Dropper"><a href="#Eye-Dropper" class="headerlink" title="Eye Dropper"></a><a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka">Eye Dropper</a></h2><p>这是一个很小巧的网页拾色工具，使用它你就可以获得任何网页任何图片任何区域的颜色，我个人觉得这个很方便吧。值得一用。</p>
|
||
<h2 id="Web-Developer"><a href="#Web-Developer" class="headerlink" title="Web Developer"></a><a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm"><strong>Web Developer</strong></a></h2><p>这样一个插件不知道各位哦有没有使用过啊，我还是稍微详细得说一下吧（天哪，这个功能太多太多了，我觉得比神马付费的开发工具都强太多了，功能都多到我都说不清了。）</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>可以控制和分析CSS,你可以选择编辑或者查看css,以及屏蔽掉所有的CSS 属性。</li>
|
||
<li>关于表单form详细的应用，你可以将表单的提交方法在GET和POST间切换，总之关于表单的还有很多功能，各位自己试用吧。</li>
|
||
<li>关于图像，太强大了，可以查到网页所有图片的路径（在网页不允许你下载图片的界面是不是很爽呢?哈哈），可以屏蔽背景图片，显示图片的属性，隐藏所有的图片等等。</li>
|
||
<li>信息功能，你可以查看网页的很多信息，比如所有链接去详情，以及各个元素所处的选择器内，查看网页所有的javascript</li>
|
||
<li>同样可以实现网页拾色功能，已经为图片或者某个页面曲面测量大小。</li>
|
||
<li>可以随意设置网页显示的大小，这个功能可以模拟某些固定的页面显示，以适应不同分辨率的显示器</li>
|
||
<li>还可以Validate html 、css、feed等等，功能</li>
|
||
</ul>
|
||
</blockquote>
|
||
<p>本同学现在越来越觉得它太强大了。强烈严重推荐各位同学去使用一下。</p>
|
||
<p><a href="/images/2011/03/2011-03-21_13-39-04_conew1.jpg"><img src="/images/2011/03/2011-03-21_13-39-04_conew1.jpg" title="2011-03-21_13-39-04_conew1"></a></p>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/03/14/css3-for-web-designers-pdf/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/03/14/css3-for-web-designers-pdf/" class="post-title-link" itemprop="url">CSS3 for web designers [PDF]下载</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-03-15 00:00:00" itemprop="dateCreated datePublished" datetime="2011-03-15T00:00:00+11:00">2011-03-15</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>最近在看css和javascript方面的书籍，不过最新的CSS3几乎找不到什么参考书，只能在网上找到零星的资料。中文资料就更是少了，笔者最近在网上找到一本比较好的CSS书籍——CSS3 for web designers（不过是英文版本的，希望各位将就看吧！）</p>
|
||
</blockquote>
|
||
<p><a href="/images/2011/03/css3_conew1.jpg"><img src="/images/2011/03/css3_conew1.jpg" title="css3_conew1"></a></p>
|
||
<p>本书电子档为高清原文版本，而不是所谓的高清扫描版本。清晰度是没有任何挑剔的。</p>
|
||
<p>不过具体内容笔者还没读完，不好评价整本书，但是在网上看到有些国外的博客推荐，想必应该是不错吧。</p>
|
||
<p>全书分为7个章节</p>
|
||
<ul>
|
||
<li>using CSS 3 today</li>
|
||
<li>understanding css transitions</li>
|
||
<li>hover-crafting with css3</li>
|
||
<li>transforming the message</li>
|
||
<li>multiple backgrounds</li>
|
||
<li>enriching forms</li>
|
||
<li>conclusion</li>
|
||
</ul>
|
||
<p>大家感兴趣的就下载吧，文档不到10M，很小。</p>
|
||
<blockquote>
|
||
<h2 id="下载地址：网盘下载"><a href="#下载地址：网盘下载" class="headerlink" title="下载地址：网盘下载"></a>下载地址：<a target="_blank" rel="noopener" href="http://u.115.com/file/f1a56fabd4">网盘下载</a></h2></blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
|
||
|
||
|
||
<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
|
||
<link itemprop="mainEntityOfPage" href="https://toozhao.com/2011/03/12/chrome-reader/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="image" content="/images/avatar.gif">
|
||
<meta itemprop="name" content="Junv">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
<meta itemprop="description" content="分享编程、运维、生活与思考">
|
||
</span>
|
||
|
||
<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
|
||
<meta itemprop="name" content=" | 大染志">
|
||
<meta itemprop="description" content="">
|
||
</span>
|
||
<header class="post-header">
|
||
<h2 class="post-title" itemprop="name headline">
|
||
<a href="/2011/03/12/chrome-reader/" class="post-title-link" itemprop="url">chrome 阅读文章app——ireader:给你更好的阅读体验</a>
|
||
</h2>
|
||
|
||
<div class="post-meta-container">
|
||
<div class="post-meta">
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建时间：2011-03-13 00:00:00" itemprop="dateCreated datePublished" datetime="2011-03-13T00:00:00+11:00">2011-03-13</time>
|
||
</span>
|
||
<span class="post-meta-item">
|
||
<span class="post-meta-item-icon">
|
||
<i class="far fa-calendar-check"></i>
|
||
</span>
|
||
<span class="post-meta-item-text">更新于</span>
|
||
<time title="修改时间：2026-08-04 20:47:21" itemprop="dateModified" datetime="2026-08-04T20:47:21+10:00">2026-08-04</time>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
<blockquote>
|
||
<p>又有几天笔者没有认真更新博客了，自己有些事需要处理吧，老实说看着自己博客的这个样子有时候性质很高，但是有时候又感觉没有动力。不过我还是会继续更新的。今天给大家分享的还是关于google chrome浏览器的东西，一款阅读app ——ireader.</p>
|
||
<p><a href="/images/2011/03/22_conew1.jpg"><img src="/images/2011/03/22_conew1.jpg" title="22_conew1"></a></p>
|
||
</blockquote>
|
||
<p>如果你厌恶有些网页满篇都是广告，如果你厌恶某些网站的文章的字体让你看起来很不舒服，如果你只想很纯粹的阅读文章，而且看文章的时候网页的背景让眼睛很舒服。那么我推荐各位同学使用这样一款google app ——<a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnbaaldcehkpajlmbc">ireader</a></p>
|
||
<p><a href="/images/2011/03/3-14-2_conew1.jpg"><img src="/images/2011/03/3-14-2_conew1.jpg" title="3-14-2_conew1"></a></p>
|
||
<p>如图是打开某网页进入阅读模式的图片</p>
|
||
<p>如果你安装了这款插件，当你进入有文章的网页时，该插件会自动识别网页，并在浏览器网址栏里面出现ireader app的图标，现在你只需要点击那个图标即可以进入阅读模式。</p>
|
||
<p>阅读模式完全屏蔽网页的广告，自动将文章的字体转换到让你的眼睛很舒服的状态，而且你还可以在该 app 的设置状态设置浏览时选择的字体和是否显示图片。</p>
|
||
<p>注意：可能有些有文章的网页不能够被该插件识别，我个人觉得原因是可能是该网页文章内所含图片的个数太多或者文章的内容过于少了！不过大多数情况是可以识别的！</p>
|
||
<blockquote>
|
||
<h2 id="下载插件：点我进入google-app-store-下载"><a href="#下载插件：点我进入google-app-store-下载" class="headerlink" title="下载插件：点我进入google app store 下载"></a>下载插件：<a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnbaaldcehkpajlmbc">点我进入google app store 下载</a></h2></blockquote>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<nav class="pagination">
|
||
<a class="extend prev" rel="prev" title="上一页" aria-label="上一页" href="/page/9/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/">1</a><span class="space">…</span><a class="page-number" href="/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/page/11/">11</a><span class="space">…</span><a class="page-number" href="/page/31/">31</a><a class="extend next" rel="next" title="下一页" aria-label="下一页" href="/page/11/"><i class="fa fa-angle-right"></i></a>
|
||
</nav>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
|
||
<div class="copyright">
|
||
© 2012 –
|
||
<span itemprop="copyrightYear">2026</span>
|
||
<span class="with-love">
|
||
<i class="fa fa-heart"></i>
|
||
</span>
|
||
<span class="author" itemprop="copyrightHolder">Junv</span>
|
||
</div>
|
||
<div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<div class="toggle sidebar-toggle" role="button">
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
<span class="toggle-line"></span>
|
||
</div>
|
||
<div class="sidebar-dimmer"></div>
|
||
<div class="back-to-top" role="button" aria-label="返回顶部">
|
||
<i class="fa fa-arrow-up fa-lg"></i>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="reading-progress-bar"></div>
|
||
<a role="button" class="book-mark-link book-mark-link-fixed"></a>
|
||
|
||
<noscript>
|
||
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
|
||
</noscript>
|
||
<script>
|
||
/* 字号调节 A- / A / A+（阅读体验） */
|
||
(function () {
|
||
'use strict';
|
||
function initFontSize() {
|
||
var postBody = document.querySelector('.post-body');
|
||
if (!postBody || document.getElementById('font-size-control')) return;
|
||
var bar = document.createElement('div');
|
||
bar.id = 'font-size-control';
|
||
bar.className = 'font-size-control';
|
||
var labels = [['A-', -1], ['A', 0], ['A+', 1]];
|
||
var current = 1.0;
|
||
labels.forEach(function (item) {
|
||
var btn = document.createElement('button');
|
||
btn.textContent = item[0];
|
||
btn.title = item[0] === 'A-' ? '减小字号' : item[0] === 'A+' ? '增大字号' : '恢复默认';
|
||
btn.addEventListener('click', function () {
|
||
if (item[1] === 0) current = 1.0;
|
||
else current = Math.min(1.4, Math.max(0.8, current + item[1] * 0.1));
|
||
postBody.style.fontSize = current + 'em';
|
||
});
|
||
bar.appendChild(btn);
|
||
});
|
||
document.body.appendChild(bar);
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initFontSize);
|
||
} else {
|
||
initFontSize();
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|