<!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">body{ margin:0; padding:0; text-align:center;}#container {font-family:"courier new", monospace...
网格 html {background: #58a;background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);background-size: 50px 50px, 50px 50px,10px 10px, 10px 10px;}具体效果见链接波点可以用如下代码来实现background: #655; background-image:...
一. 居中相关布局1.1 水平居中布局方案一. inline-block + text-aligntext-align是可以控制行内内容（文字、行内元素、行内块级元素）进行水平对齐。对于块级元素我们可以设置display: inline-block进行对齐。注：text-align属性具有继承性，会导致自己元素内部的文本也是居中显示的，需要自身设置text-align覆盖<style>.wrap {width: 100%;height: 200px;background-color: aqua;text-align: center;}.content {width: 200px;heig...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面...
一.继承CSS中的祖先元素也会向后代传递一样东西:CSS属性的值。body元素是所有元素的祖先，所有标签都是它的后代，比如为body元素设置一种字体，那么文档中的所有元素，无论它在层次结构中多么靠下，都将继承这些样式。CSS中有很多属性都可以继承，其中相当一部分都与文本有关。 二.层叠层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程。目的是让浏览器面对某个标签特定属性的多个来源时，确定最终使用哪个值。...
之前写了一个简易的运维管理系统,奈何一直都是用的开发者模式启动django,现想用ngxin代理,参照<<The Django Book>>,上面提供了Apache+mod_python(mod_wsgi|FastCGI)等方式,而我选择了Nginx+FastCGI的方式(机器上本来就有nginx了,并且我平时用nginx也比较多).Django通过FastCGI启动的方式有如下几种:在tcp端口上运行一个线程服务器: ./manage.py runfcgi method=threaded host=127.0.0.1 port=3033在Unix socket 上运行prefork 服务...
1、introduction2、selector13、selector24、border&background15、border&background26、border&background37、text18、text29、box110、box211、box312、homework13、transition14、cubic-bezier15、animation16、animation217、step18、step219、rotate 20、scale 21、skew22、translate+perspective23、perspective224、matrix25、screen&px26、gpu&layout CSS3响应式布局CSS3炫酷转轴展开照片列表3D酷炫动画特效CSS3响应式布局...
Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.Mixins have some nice features:- Arguments just like functions.- Arguments can have default values and optional values.- Named arguments allow us to use optional and default arguments when the m...
一、xhtml css基础知识文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话： 这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句...
第1章CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。1.1 CSS3的现状1、浏览器支持程度差，需要添加私有前缀2、移动端支持优于PC端3、不断改进中4、应用相对广泛1.2 如何对待1、坚持渐进增强原则2、考虑用户群体3、遵照产品的方案4、听Boss的第2章准备工作2.1 统一环境由于CSS3兼容性问题的普遍存在，为了避免因...
部分HTML代码如下：<div class="wrap block"><div class="block-center">块儿居中</div></div><div class="wrap inline"><span class="inline-center">内联居中</span></div>一、absolute拔河效应（元素宽高需设定） .block{ position: relative; } .block-center{ position: absolute; margin: auto; /*这句要写，否则无效果*/ left: 0; top: 0; right: 0; bottom: 0; } 利用margin（元素宽高需设定） .block{positio...
左侧宽固定200，高度自适应，右侧的框宽度都自适应<style> * { margin: 0; padding: 0; } html { height: auto; } body { margin: 0; padding: 0; } #container { background: #ffe3a6; } #wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-a...
一、定位：1、定位的理解（1）相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。#box_relative {position: relative;left: 30px;top: 20px;}...
css三种样式表：1、内嵌样式表： <head> <style type="text/css"> 样式表写法 </style> </head>2、外链样式表： <link rel="stylesheet" href="1.css">3、行内样式表： <h1 style="font-size:30px;color:pink">红豆</h1>三种写法的特点：◆内嵌样式表写法，样式只作用于当前文件，没有真正实现结构（html）表现（css）分离◆外链样式表写法，作用范围是当前站点，范围广，真正实现结构表现分离◆行内样式表写法，作用范围仅限于...
当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。#test{margin:10px;padding:10px;width:100px;height:100px;}如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width＝margin-left margin-right width...