经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › Web标准学习教程整理 [不断更新]

查看: 72392|回复: 26

[教程] Web标准学习教程整理 [不断更新] [复制链接]

blank　楼主

怿飞

荣誉管理

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-7 21:01:24 |显示全部楼层

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

西部数码顶级域名注册商39元抢注！

使用道具举报

blank　楼主

怿飞

荣誉管理

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-4-7 21:22:38 |显示全部楼层

今天先整理这么多，以后会陆续添加整理

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

beth2004　

高级会员

帖子: 800
体力: 1575
威望: 0
居住地: 广东省深圳市

发表于 2007-4-8 11:06:43 |显示全部楼层

哇！爱死你了！我先前发的那个贴，你回贴说会整理的！没想到速度这么快，不愧是版主！
最主要的是你在这些技术贴中都有回贴更正
我今天要看完这里面所有文章！

一匹来自南方的狼！！！

使用道具举报

261509559　

随枫飘月

银牌会员

帖子: 753
体力: 1698
威望: 4
居住地: 山东省济南市

发表于 2007-4-9 08:32:53 |显示全部楼层

整理这么多不容易丫·辛苦了
在加两个我整理的。

《无懈可击的web设计》之流动的布局

《无懈可击的web设计》之图文混排（dl dt dd）

[ 本帖最后由 261509559 于 2007-4-10 08:24 编辑 ]

yanglei blog

使用道具举报

buttonup　

中级会员

帖子: 64
体力: 423
威望: 0

发表于 2007-4-9 13:04:51 |显示全部楼层

版主推荐置顶吧？太好了！

使用道具举报

z3333426　

探索

金牌会员 

帖子: 8820
体力: 4099
威望: 0

发表于 2007-4-25 12:51:22 |显示全部楼层

有没CSS3的学习手册

下班的时候还在装忙，最后发现那个文件还是只读模式。。。

使用道具举报

zhaoliancheng　

我爱红茶

银牌会员 

帖子: 665
体力: 2025
威望: 0
居住地: 重庆市九龙坡区

发表于 2007-4-27 00:37:05 |显示全部楼层

第二部分语法基础中的第五小点：包含选择符，我不是很明白，不知道怎么引用，能不能举个完整的例子，谢谢！！！

WEB前端132977627 nolure.com

使用道具举报

xzk0532　

新手上路

帖子: 2
体力: 14
威望: 0

发表于 2007-5-14 10:24:32 |显示全部楼层

入门教程中少一个“彻底弄懂CSS盒子模式之四”

RT
4.彻底弄懂CSS盒子模式四(绝对定位和相对定位)

使用道具举报

coolman007　

新手上路

帖子: 1
体力: 7
威望: 0

发表于 2007-5-16 16:57:00 |显示全部楼层

如果能整理成册，弄成电子书格式那就更好了~~！！

使用道具举报

midy　

中级会员

帖子: 51
体力: 220
威望: 0
居住地: 广东省广州市

发表于 2007-5-31 16:03:51 |显示全部楼层

一个超实用圆角边框事例

外框相对定位,圆角绝对定位实现超实用圆角边框
http://midy.coolsj.net/html/cor_box.html
效果:http://midy.coolsj.net/html/demo/cor_demo02.html

copyright coolsj.net

使用道具举报

midy　

中级会员

帖子: 51
体力: 220
威望: 0
居住地: 广东省广州市

发表于 2007-5-31 16:11:17 |显示全部楼层

一个超实用buttom事例

用ul li写的buttom
推荐的buttom写法
效果:http://midy.coolsj.net/html/demo/btn.html

html code

<div class="formtable_btn">
  <ul class="btn01">
<li class="bg02"><span>
   <input type="submit" name="Submit" value="Save Changes" style="width:90px;" />
   </span></li>
<li class="bg01"><span>
   <input type="submit" name="Submit" value="Preview" style="width:60px;" />
   </span></li>
<li class="bg02"> <a href="#">Save Changes</a> </li>
<li class="bg01"> <a href="#">Preview</a> </li>
<li class="bg01" style="display:none;"><span>Save Changes</span> </li>
<li class="bg02" style="display:none;"><span>Save Changes</span> </li>
<li class="bg01"><span>Save Changes</span> </li>
<li class="bg02"><span>Save Changes</span> </li>
  </ul>
</div>

css code

/* button start */
.formtable_btn { height:100px; background-color:#f9f9f9; border:1px solid #eaeae9; padding:10px; margin:20px 0;}
ul.btn01 {
list-style:none;
margin: 0;
padding: 0;
}
ul.btn01 li.bg01 input, ul.btn01 li.bg02 input {
font-family: Verdana;
font-size: 11px;
color: #9a5379;
border-style: none;
background-color: transparent;
margin: 0px;
padding: 0px;
}
ul.btn01 li.bg01 a, ul.btn01 li.bg02 a {
float:left;
display:block;
color:#9a5379;
text-decoration:none;
background-image: url(../images/btn/btn_r.gif);
background-repeat: no-repeat;
background-position: 100% 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top:3px;
height: 19px;
padding-right: 4px;
text-align:center;
}
ul.btn01 li.bg02 a { color:#fff; background-position: 100% -22px;}
ul.btn01 li.bg01 a:hover, ul.btn01 li.bg02 a:hover {
float:left;
display:block;
color:#9a5379;
text-decoration: underline;
background-image: url(../images/btn/btn_r.gif);
background-repeat: no-repeat;
background-position: 100% 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top:3px;
height: 19px;
padding-right: 4px;
text-align:center;
}
ul.btn01 li.bg02 a:hover { color:#fff; background-position: 100% -22px;}
ul.btn01 li.bg01 span, ul.btn01 li.bg02 span {
float:left;
display:block;
color:#9a5379;
text-decoration:none;
background-image: url(../images/btn/btn_r.gif);
background-repeat: no-repeat;
background-position: 100% 0px;
padding-top: 3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 19px;
padding-right: 4px;
}
ul.btn01 li.bg01, ul.btn01 li.bg02 {
float:left;
background-image: url(../images/btn/btn_l.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 4px;
margin-right: 20px;
}
ul.btn01 li.bg02 input {
color: #fff;
}
ul.btn01 li.bg02 span {
color: #fff;
background-position: 100% -22px;
}
ul.btn01 li.bg02 {
background-position: 0px -22px;
}
/* button end */

img

<img src="http://midy.coolsj.net/html/demo/images/btn/btn_r.gif" />
<img src="http://midy.coolsj.net/html/demo/images/btn/btn_l.gif" />

copyright coolsj.net midy

使用道具举报

midy　

中级会员

帖子: 51
体力: 220
威望: 0
居住地: 广东省广州市

发表于 2007-6-12 17:52:26 |显示全部楼层

一个超实用table事例

html code

<table class="tab1">
  <thead>
<tr>
   <td>title01</td>
   <th>title02</th>
   <th>title03</th>
</tr>
  </thead>
  <tbody>
<tr>
   <td>text</td>
   <td>text</td>
   <td>text</td>
</tr>
  </tbody>
</table>
<br />
<table class="tab2">
  <thead>
<tr>
   <td>title01</td>
   <th>title02</th>
   <th>title03</th>
</tr>
  </thead>
  <tbody>
<tr>
   <td>text</td>
   <td>text</td>
   <td>text</td>
</tr>
  </tbody>
</table>
<br />
<table class="tab3">
  <thead>
<tr>
   <th>title01</th>
   <td>title02</td>
   <th>title03</th>
</tr>
  </thead>
  <tbody>
<tr>
   <td>text</td>
   <td>text</td>
   <td>text</td>
</tr>
  </tbody>
</table>
css code

<style type="text/css">
table.tab1 { border-collapse:collapse; border:0px solid #ccc;}
table.tab1 th, table.tab1 td { border:1px solid #ccc; padding:2px 6px;}

table.tab2 { border-collapse:collapse; border:0px solid #ccc;}
table.tab2 th, table.tab2 td { border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:2px 6px;}

table.tab3 { border-collapse:collapse; border:1px solid #ccc;}
table.tab3 th, table.tab3 td { border-top:0px solid #ccc; padding:2px 6px;}
table.tab3 thead th { background-color:#EEE;}
</style>

copyright coolsj.net

使用道具举报