以前很不重视css,老板要做静态页面,时间空闲搞java开发的我胜任了,废话不多说了,看例子:
css-common.css
/*
标题设置
*/
#tr-bg{
background-image:url(../images/shoes-title-bg.jpg);
font-size:14px;
font-weight:bold;
}
tr.font{
font-size:12px;
background-color:#E2EFF6;
}
/*
表格设置
*/
table.tbcss1 {
border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */
border:solid #85D2FC; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */
}
table.tbcss1 caption {font-size:14px;font-weight:bolder;}
table.tbcss1 tr {
font-size:12px;
background-color:#E2EFF6;
}
table.tbcss1 th,table.tbcss1 td {border:solid #85D2FC;border-width:0 1px 1px 0;padding:2px;}
tfoot.tbcss1 td {text-align:center;}
/*
超链设置
*/
a:visited{text-decoration:none}
content-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/css-common.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<table>
<tr>
<td>
<iframe src="top.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe>
<hr> </td>
</tr>
<tr>
<td>
<a href="images/shoes-1.jpg"><img src="images/shoes-1.jpg" alt="No.1Cスプリットソール (キャンバス)" width="150" height="150" border="0"></a> </td>
</tr>
<tr>
<td>
<strong>商品名称:</strong>No.1Cスプリットソール (キャンバス) </td>
</tr>
<tr>
<td>
<strong>商品种类:</strong><br>
<table>
<tr> </tr>
</table> </td>
</tr>
<tr>
<td><table width="50%" class="tbcss1">
<tr align="center" id="tr-bg">
<td>色</td>
<td>尺寸・幅</td>
<td>センチ</td>
<td>セール</td>
</tr>
<tr class="font">
<td height="19" align="center" >サーモンピンク</td>
<td align="center">12M・W</td>
<td align="center">26</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">13M・W</td>
<td align="center">26.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">14M・W</td>
<td align="center">27</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">15M・W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">16M・W</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">4W</td>
<td align="center">22</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">5M・W</td>
<td align="center">22.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">15W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">16M</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">3W</td>
<td align="center">21.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">15W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">16M</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
</table>
<hr>
<iframe src="foot.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe> </td>
</tr>
</table>
</BODY>
</HTML>
附件为例子!
css-common.css
/*
标题设置
*/
#tr-bg{
background-image:url(../images/shoes-title-bg.jpg);
font-size:14px;
font-weight:bold;
}
tr.font{
font-size:12px;
background-color:#E2EFF6;
}
/*
表格设置
*/
table.tbcss1 {
border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */
border:solid #85D2FC; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */
}
table.tbcss1 caption {font-size:14px;font-weight:bolder;}
table.tbcss1 tr {
font-size:12px;
background-color:#E2EFF6;
}
table.tbcss1 th,table.tbcss1 td {border:solid #85D2FC;border-width:0 1px 1px 0;padding:2px;}
tfoot.tbcss1 td {text-align:center;}
/*
超链设置
*/
a:visited{text-decoration:none}
content-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/css-common.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<table>
<tr>
<td>
<iframe src="top.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe>
<hr> </td>
</tr>
<tr>
<td>
<a href="images/shoes-1.jpg"><img src="images/shoes-1.jpg" alt="No.1Cスプリットソール (キャンバス)" width="150" height="150" border="0"></a> </td>
</tr>
<tr>
<td>
<strong>商品名称:</strong>No.1Cスプリットソール (キャンバス) </td>
</tr>
<tr>
<td>
<strong>商品种类:</strong><br>
<table>
<tr> </tr>
</table> </td>
</tr>
<tr>
<td><table width="50%" class="tbcss1">
<tr align="center" id="tr-bg">
<td>色</td>
<td>尺寸・幅</td>
<td>センチ</td>
<td>セール</td>
</tr>
<tr class="font">
<td height="19" align="center" >サーモンピンク</td>
<td align="center">12M・W</td>
<td align="center">26</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">13M・W</td>
<td align="center">26.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">14M・W</td>
<td align="center">27</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">15M・W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">サーモンピンク</td>
<td align="center">16M・W</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">4W</td>
<td align="center">22</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">5M・W</td>
<td align="center">22.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">15W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">白</td>
<td align="center">16M</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">3W</td>
<td align="center">21.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">15W</td>
<td align="center">27.5</td>
<td align="center">¥525</td>
</tr>
<tr class="font"height="19">
<td height="19" align="center">黒</td>
<td align="center">16M</td>
<td align="center">28</td>
<td align="center">¥525</td>
</tr>
</table>
<hr>
<iframe src="foot.html" align="middle" scrolling="no" frameborder="0" width="800" height="50"></iframe> </td>
</tr>
</table>
</BODY>
</HTML>
附件为例子!
- shoesSite.rar (3.8 MB)
- 下载次数: 1
发表评论
-
JDK1.5新特性介绍
2010-04-27 09:08 657本文引用:http://www.yesky.com/263 ... -
数据动态插入表格
2009-09-10 13:42 667<%@ page language="java ... -
js 发送邮件
2009-07-22 14:27 6911有时mailto 用起来不是很 ... -
页面分辨率问题
2009-07-22 14:10 983今天需要给页面插入背景图片, 开始是1024*768 标准分 ... -
css 应用
2009-07-09 22:04 761用css控制的语法如下: <span styl ... -
框架说明
2009-06-25 15:05 611数据库底层交互接口,及实现类 ... -
java 按对象属性排序
2009-06-25 13:51 11911、为了尽可能少的交互数据库 2、工作中难免会遇到得到一个集 ... -
表格样式还不错
2009-06-25 13:45 653<table width="100%" ... -
js动态增加表格
2009-06-08 17:52 1206场景: 使用js 实现对表格记录的增删改 页面样式: ... -
数据类型不匹配
2009-06-08 17:42 2164报错信息: java.servlet.ServletExce ... -
物流静态网站
2009-01-16 11:59 641最近帮同事做了个静态网站,物流方面的,就当没事做着玩了 -
mysql 注意
2008-10-22 17:23 868MySql局域网连接慢的解决方法 skip-name-reso ... -
vb 发邮件
2008-10-22 15:22 1523vb 发信,代码如下 Dim sFileName ... -
jdk引入第三方jar
2008-10-22 11:52 1526要求:定时发信功能 细节:只允许装jdk 方案:定时用批处 ... -
mysql 注意
2008-09-03 09:30 690MySql局域网连接慢的解决方法 skip-name-reso ... -
js 应用
2008-08-05 14:28 623如附件1 如附件2 如附件3 -
编码问题
2007-07-19 17:18 983"计算机 "转码 1. u ... -
格式化输出
2007-04-20 10:01 1329// 日期格式化输出字符串 Simple ... -
session listener
2007-02-06 17:41 1140java 代码 package com.l ... -
JDK配制
2007-01-30 11:46 1480通常在 我的电脑---->属性---->高 ...
相关推荐
Pure是一个简单、实用的CSS框架,鉴于目前网上对pure的资料比较少,所以我想把使用pure的一些经验介绍给大家,相信你看完本文后也会爱上pure。 Pure包含多个模块:Base(基本样式)、Grids(网格系统)、Forms(表单)、...
爱上对方了解即可拉萨的积分 ;适当放宽了骄傲是打开了附件asdfkl吉安市地方
未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的镜、颜色等视觉效果;它们有些已经存在一段时间了,但值得我们更好地认识,而有些则刚刚面世。虽然不起眼,但是它们可以提高我们的工作效率...
详细的网页代码标签,方便朋友们观看和引用。使朋友们爱上网页设计
方便好用的轮播图,使用方便,易于上手,相信不久后 你一定会爱上它呦
最新响应式web设计,时代的潮流HTML5+CSS3强大组合
让我们一个走进前端的奇妙世界,这一路走来,虽然经历了千辛万苦,但是我们不要放弃自己学习的动力,慢慢地爱上它,并克服它,共同学习,共同进步,加油,加油,加油,让青春不再失去最初的意义,最后达到了一个自己...
如果你不用,你永远也不会知道什么是好的软件,如果你是学编程的建议您用用,说不定,你会爱上它。
我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。 1、HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的...
jQuery弹出层插件大全_爱上DIV + CSS_.doc
我们创建了一个游乐场,因此您无需安装任何东西即可爱上我们的组件,非常有趣! React Toolbox 默认使用 CSS Modules 来导入使用 PostCSS 和 postcss-preset-env 特性编写的样式表。 如果你想导入已经与 CSS 捆绑的...
第四:大师傅 爱上对方快乐 啊撒旦法士大夫 阿三闾大夫 啊撒旦法了撒旦法机房俺的沙发的上飞爱的身份拉屎的风哀伤的立法爱的身份就撒旦法 哀伤的立法家爱迪生飞阿三闾大夫按时大法师的立法的身份啊撒旦法你那是大方 ...
需要理由来爱上Bootstrap么?那就请接着向下看。 由匠人建,为匠人用 和您一样,我们乐于创造出色的web应用,于是想帮助更多象我们一样的匠人更为高效快捷地构建产品。Bootstrap因此而生。 适应各种技术水平...
这个 repo 托管 Keizaal 的网站。 这个文件是 repo 的 readme 页面,当在 GitHub 上直接访问 repo 时会显示,因此... 这个 CSS不支持 Jekyll 的主题系统,因为 GitHub Pages 使得不使用主题是不可能的。 您通过在 Jeky
用div加css和javascript实现的
GNOME的爱上了,并且有了孩子。 在大多数情况下,它是Deepin主题外观,但具有Arc强调色,窗口按钮以及单选按钮,开关和许多其他样式的假发样式。 这个主题主要是这两个主题的结合,作者或Deepin和Arc GTK主题都值得...
1、包含form表单所需的js文件。 2、包含form表单所需的css文件。 3、后面会出一个简单的使用教程。 4、此文件免费下载,希望大家爱上学习。
NodeJS、JDK、Python开发环境设置工具作者:MrD 主页:一个用于设置NodeJS、JDK、Python...就给套了些CSS(SASS的,如果你不用SASS,直接改assets/css/style.css这个最终生成好CSS也是没问题的)编译:1、npm i2、npm r
CSS JavaScript jQuery Ajax Vue webpack elementUI 微信小程序 动态网页 Servlet Jsp EL JSTL Cookie Session Filter Listener 编程强化 设计模式 JVM优化 数据结构算法 多线程高级 MINA Netty NIO 软件项目,代码...