文章列表
某人专用教程 (1-5)总结
- 博客分类:
- LC UI TEAM
列一下前5天的知识点,看看你还记得不:
第一天:理解结构与表现分离。html做什么。css做什么。JS做什么。你是否能够用自己的语言表述一下呢?
第二天:关键词——doctype。还记得是神马东西么?还有就是,标签的基本规则。。。
<ul><div><li>... 这种是错误的。。记得吧?
第三天:css怎么写,不用我说吧。记得各种选择器的优先级么?如果不太记得也没关系。如果你写了个样式木有生效,记得往这方面想就好了。看看是不是其他优先级更高的选择器将你后定义的css给覆盖掉了。
第四天:讲了个marg ...
今天开始说2列布局吧。
仍然分为html与css两部分来讲。
html部分仍然非常简单。就是下面这个两层div的结构。其中,外层用一个class叫做content包裹起来。内侧有2个容器,分别叫做left和right。
<div class="content" ...
某人专用教程(第4天)—— 开始布局
- 博客分类:
- LC UI TEAM
今天就正式开始写代码了。
额。。hello world不用讲了吧?
我们直接开始写一些布局。
第一个是单栏布局。也就是只有一行的布局。这种布局一般有2种情况。一种是定宽度的。比如宽为800px,另一种是100%宽度的俗称自适应浏览器宽度。
不管哪种形式,单栏布局,就是相当于把所有内容放在一个容器内。一般,这种纯作为布局容器使用的情况下,我们都使用div标签。
html代码是这样的
<div class="box">This is a layout box.</div>
给这个div一个class名 ...
今天讲讲css的基础。先来回顾下昨天的内容。html展示给用户的是一堆数据。css是为了让这些数据展示的更漂亮一些。
css可以做的事情:
定义布局。包括左右结构啊,左中右结构之类的。
定义元素样式。比如文字的颜色,背景色,背景图之类的。
定义元素与元素之间的边距。比如内边距,外边距。
css的基本语法是:
选择器{
属性1: 属性值1;
属性2: 属性值2;
}
其中,常用的选择器包括:
ID选择器
Class选择器
标签选择器(更文艺的说法是:派生选择器)
听起来挺文艺的。转化成普通的说法就是:
如 ...
今天开始正式编码了。。怎么装dw应该不用我教你了。我相信你有的。
反正打开dw,创建一个新html文件。如果你在欢迎面板上点击的创建,最近这几个版本的dw,都会默认新建个xhtml1.0的文件。
关于Doctype,你随便网上搜这个关键字,就能找到一大堆文邹邹的内容。这种玩意我就不讲了。自己搜下。基本就是说它告诉浏览器按照什么规范来解析页面。大概这样的。
反正我里经过的几个时代:html4 xhtml1.0和目前比较火但还不太靠谱的html5
对于html与xhtml的历史,网上也有一大堆。我也不说了。
就表现层上来说,doctype不同,同样一段css ...
某人专用教程(第1天)——理解前端
- 博客分类:
- LC UI TEAM
一般的教程都从什么http协议啊,html历史啊开始讲的。不过这些都是p话。会做才是最重要的。历史都过去了,未来还没有来。html5,css3神马的,暂时也不要好奇哦~~
第一天,咱们先试着理解一些基础概念吧。一张白纸的第一 ...
html与css架构的一点体验
- 博客分类:
- xhtml/css
css本身,可以说是一门非常简单而容易入门的语言。制作一个页面,或者制作一个小企业站,对于css的要求都是非常低的。只要熟悉语法,通过英文单词的含义猜,都基本可以拼出一套样式。更何况市面上还有各种各样的辅助软 ...
新鲜出炉的v0.2版本…………
1,html代码,增加了积分器的div~~为了布局,在外面套了个壳·~就是#gameBox
<div id="gameBox">
<canvas id="canvas" width="350" height="430"></canvas>
<div id="score">0</div>
</div>
2,css部分,没什么好说的,大概的放了个布局。
body{mar ...
v0.1 版本实现功能:
1,canvas中调用一张固定url的粉丝头像,完成头像从上到下的位置移动。
2,绘制“箩筐”(用来接头像的方块),完成“箩筐”的跟随鼠标移动事件。
3,基础碰撞检测。
首先在HTML中书写canvas标签
<c ...
<!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 ...
<!DOCTYPE HTML>
<html>
<head>
<title>A canvas moveto example</title>
</head>
<body>
<div>
<canvas id="tutorial" width="150" height="150"></canvas>
</div>
<script typ ...
表格动态添加删除行。很初级的版本,很久了。自己存档下。
<!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&quo ...
这个问题比较麻烦,bug是这样产生的。input/textarea的外层是block形式的容器,这个外层容器同时拥有float和margin-left/rmargin-right属性时候,会在margin的一边产生双倍边距。其中一部分是真正我们要的margin,另一部分说不出什么,看起来可以算是与margin等宽的padding。
举一些例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans ...
版本号:V0.1
调用方法:
initValue("id","initial text");
id -- input/textarea 的id
initial text -- 初始提示文字
.c_txt 可以用于代表初始化文字的颜色。
缺陷:
使用class name作为判断依据…………不好。
没加trim去空格。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht ...