`
anxingyu_1984
  • 浏览: 39620 次
  • 性别: Icon_minigender_1
  • 来自: 内蒙古
社区版块
存档分类
最新评论

爱上css

CSSHTML 
阅读更多
以前很不重视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>



附件为例子！
分享到：
| ror datetime 格式化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    pure CSS

    Pure是一个简单、实用的CSS框架，鉴于目前网上对pure的资料比较少，所以我想把使用pure的一些经验介绍给大家，相信你看完本文后也会爱上pure。 Pure包含多个模块：Base(基本样式)、Grids(网格系统)、Forms(表单)、...

    爱上朴实的CSS细节虽不起眼可提高效率

    CSS，这个样式表语言，是构建网页外观和布局的核心工具之一。随着技术的发展，CSS引入了许多新特性，既包括令人惊叹的视觉效果，也包括一些看似微不足道但实则能大幅提升开发效率的细节。本文将探讨一些CSS的实用...

    网页设计.爱上jQuery

    在这个主题中，“爱上jQuery”无疑是为了引导初学者或爱好者深入理解并掌握jQuery的魅力。 首先，jQuery的核心特性包括选择器、DOM操作、事件处理和动画效果。选择器类似于CSS，但提供了更强大的功能，如$("#id")...

    浪漫爱情留言代码就这样爱上了你.docx

    留言的核心信息是：“虽然你没有做什么很浪漫的事，但我还是就这样爱上了你，并且无法自拔。” 这句话通过不同颜色的字体逐字呈现，每种颜色的转换增加了阅读的趣味性和情感的层次感。颜色从暖色调到冷色调的变化...

    CSS3基础相关知识点.txt

    让我们一个走进前端的奇妙世界，这一路走来，虽然经历了千辛万苦，但是我们不要放弃自己学习的动力，慢慢地爱上它，并克服它，共同学习，共同进步，加油，加油，加油，让青春不再失去最初的意义，最后达到了一个自己...

    爱上流行下载 v1.0(SKYCN偷)

    在技术层面上，源码的实现可能涉及到HTML、CSS、JavaScript以及可能的服务器端脚本语言如ASP，这些技术是构建动态网站的基础。对于初学者来说，这是一个极好的学习平台，可以借此机会提升Web开发技能。同时，对于有...

    爬取爱上租网站房源信息

    在Scrapy的Spider中，通常使用`response.xpath()`或`response.css()`方法结合XPath或CSS选择器来提取数据。 接下来，我们讨论如何将爬取的数据存储到数据库。在Scrapy项目中，可以使用Item定义数据结构，然后通过...

    css编辑工具

    如果你不用，你永远也不会知道什么是好的软件，如果你是学编程的建议您用用，说不定，你会爱上它。

    爱上JQUERY

    2. **选择器**: jQuery支持CSS1-CSS3的选择器，甚至包括更复杂的选择器表达式，能够方便地定位到页面中的任何元素。 3. **链式操作**: 通过返回自身，jQuery允许连续调用多个方法，减少了代码的冗余。 4. **事件...

    7款HTML5精美应用教程 让你立即爱上HTML5

    我想下面的这7个HTML5应用一定会让你爱上HTML5的，不信就一起来看看吧。 1、HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了，像这款HTML5折线图表Aristochart是一款很不错的...

    体育网站设计的模板，爱上了的看法

    【体育网站设计的模板，爱上了的看法】 在体育网站的设计中，前端开发起着至关重要的作用，它决定了网站的用户体验、交互性和视觉吸引力。本文将深入探讨“体育网站设计的模板”这一主题，以及为什么人们可能会对这...

    爱上信息网整站程序 v2.1 -ASP源码.zip

    【标题】"爱上信息网整站程序 v2.1 -ASP源码.zip"指的是一个基于ASP编程语言的网站完整程序的源代码版本。这个程序可能是用于建立一个信息类的网站，比如提供新闻、公告或者分类信息等服务。版本号v2.1表示这是该...

    看一眼你就会爱上它 10种不同风格任你选

    这篇博客的标题“看一眼你就会爱上它 10种不同风格任你选”暗示了内容可能涉及一种软件、设计或者编程工具，提供了多种样式或主题供用户选择。结合标签“源码”和“工具”，我们可以推测这可能是一个关于开源工具...

    基于jsp的精品课程网站毕业论文

    这种技术允许开发者将HTML、CSS、JavaScript与Java代码相结合，以实现服务器端的数据处理和逻辑控制。 【描述】：“完整项目，javaWeb，2005数据库，附带毕业论文” 描述中提到了“完整项目”，这通常意味着包含了...

    QQ登录界面2010

    在文件名称列表中，“QQ 2010”可能是设计资源或者代码文件的集合，可能包含设计图、HTML/CSS/JS文件、图片素材等。设计师和开发者会通过这些文件协作完成登录界面的制作。 总之，"QQ登录界面2010"项目涵盖了UI设计...

    React Toolbox:一组实现 Google Material Design 的 React 组件-开源

    我们创建了一个游乐场，因此您无需安装任何东西即可爱上我们的组件，非常有趣！ React Toolbox 默认使用 CSS Modules 来导入使用 PostCSS 和 postcss-preset-env 特性编写的样式表。 如果你想导入已经与 CSS 捆绑的...

    jsp代码实例关于如何连接书就能加

    第四：大师傅 爱上对方快乐 啊撒旦法士大夫 阿三闾大夫 啊撒旦法了撒旦法机房俺的沙发的上飞爱的身份拉屎的风哀伤的立法爱的身份就撒旦法 哀伤的立法家爱迪生飞阿三闾大夫按时大法师的立法的身份啊撒旦法你那是大方 ...

    bootstrap 简洁灵活的流行前端框架及交互组件集 web界面

    需要理由来爱上Bootstrap么？那就请接着向下看。 由匠人建，为匠人用 和您一样，我们乐于创造出色的web应用，于是想帮助更多象我们一样的匠人更为高效快捷地构建产品。Bootstrap因此而生。 适应各种技术水平...

Magicbox
Global site tag (gtag.js) - Google Analytics