安固途径
知识来源于感觉和经验
VS code调试JavaScript
搜索并安装VS Code插件 - Debugger for Chrome
添加用于调试js的launch.json文件到.vscode目录下
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
阅读全文
垂直对齐单行区块内的图片和文本
垂直对齐单行区块内的图片和文本
DOM结构
<div class="prj-item"><a href="#"><img src="img/icon_4.png" height="40" alt=""> <span>竞足单关</span><p class="small">曼联vs皇家马德里队</p> </a></div>
prj-item 作为图片和文本容器
CSS
.prj-item { padding-left: 50px; }
.prj-item img{ position: absolute; left: 15px; height: 40px; }
.prj-item p.small{ color: #8b8b8b; padding-left: 12px; margin-bottom: 0; }
主要是给容器prj-item里面的唯一一个图片img以绝对定位。然后给prj-item padding-left足以容下img，这样span标签的开始位置就不会是容器prj-
...阅读全文
免记，图片轮滑插件js及css
jQuery插件 materialize.min.js 包含了图片轮滑的插件slider.js，使用该轮滑插件相比其他同类插件，DOM结构最为简单。但是 materialize.min.js 依赖其框架的css文件 materialize.min.css。而materialize.min.css是一套完整的css框架，会对浏览器元素的默认样式重置，这种重置会对诸如表单、按钮等过度的渲染，口味重，我个人认为这种重置会对页面元素的表现起破坏作用。因此为了配合materialize.min.js的轮滑插件，必须提取materialize.min.css起作用的部分。
CSS文件
/* slider.css */
/* block slider */
.slider {
position: relative;
height: 400px;
width: 100%;
}
.slider .slides {
background-color: #9e9e9e;
margin: 0;
height: 400px;
}
.slider .slides l阅读全文
不翻墙打开docs.angularjs.org
http://docs.angularjs.org打不开，是因为用的是googleapi.com作为angularjs的cdn网站。而googleapi.com被墙，要想打开angular的官方主页angularjs.org要么翻墙，要么出国，或者替换掉ajax.googleapi.com为cdn.bootcdn.com。
(function(){
function replaceUri(){
var scripts = document.getElementsByTagName("script");
// bootcdn.cn
var baseUrl = '//cdn.bootcss.com/angular.js/1.5.8/';
for(var i=0; i<scripts.length;i++){
// if exists of googleapis.com ->
var src = scripts[i].src;
if(s阅读全文
最简单js，表格隔行变色
jQuery实现 有利用到jQuery的伪选择器:odd Selector, :even Selector, 事件hover( handlerIn, handlerOut )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 demo - table odd color</title>
<style>
table{
border-collapse: collapse;
}
table, td, th{
border: 1px solid #ccc;
}
th, td{
padding:8px;
}
.silver{
background-color: green !important;
}
</style>
</head>
<body>
&l阅读全文
关于
关注电脑软件、软件维修。做个记录，希望能给后来者一些参考。 