`

JS操作CSS整理

 
阅读更多

逐步整理JS操作CSS,记忆力要提高

 

   //var rightBox =document.getElementById("rightBox");
   //rightBox.style.backgroundImage="url(../images/01.jpg)";
  // rightBox.className=".box2";
 
  //document.getElementById( "rightBox" ).style.backgroundColor = "red";
 
  document.getElementById( "rightBox" ).style.backgroundImage="url(../images/rbj2.jpg)";

 

 

 

漂亮的css table

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<title>坏狼安全网-漂亮CSS Tables</title>
</head>
<style type="text/css">
/* CSS Document */

body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

#mytable {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA  no-repeat;
}
/*power by www.winshell.cn*/
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
/*power by www.winshell.cn*/

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple

PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">居住地点</th>
</tr>
<tr>
<td class="row">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
</table>

</body>
</html>

 

分享到:
评论

相关推荐

    常用CSS跟JS效果整理

    以下是对标题“常用CSS跟JS效果整理”中涉及的知识点的详细说明。 **1. 常用CSS效果** 1. **布局**:CSS提供了流式布局、网格布局(CSS Grid)、Flexbox布局等,帮助开发者创建响应式的网页结构。 2. **定位**:...

    css+javaScript项目特效整理

    "css+javaScript项目特效整理"这个主题集中于利用这两种语言来创建吸引人的网页效果。下面将详细讨论这两个领域的关键知识点及其在项目中的应用。 首先,CSS是负责网页布局、颜色、字体、背景等视觉元素的样式语言...

    HTML+CSS+JS文档整理

    - `class`:用于为多个元素指定相同的CSS样式或JavaScript操作。 - `style`:直接在HTML元素中应用内联样式。 #### 四、HTML文本格式化 - **文本格式化标签**: - `&lt;strong&gt;`和`&lt;em&gt;`:分别用于强调文本的重要...

    CSDN代码整理贴(.net,sql server,javascript,css,ajax,xml)

    本资料包"**CSDN代码整理贴(.net,sql server,javascript,css,ajax,xml)**"聚焦于六个核心领域的知识,这些领域在软件开发中占据了举足轻重的地位。以下是针对每个主题的详尽解析: 1. **.NET框架**:由微软开发的...

    自己整理的网页特效CSS+DIV

    【标题】:“自己整理的网页...11. **jQuery库**:简化JavaScript操作,提供丰富的插件和动画效果,加快特效开发速度。 通过学习和应用这些知识点,你可以创建出富有吸引力且功能强大的网页,提升你的网页设计技能。

    hbuilder css格式化css为单行代码

    在描述中提到的“直接替换beautify-css.js文件,重启HB就可以”,这实际上是指HBuilder中内置了一个名为beautify的CSS美化工具,这个工具的实现是通过JavaScript脚本beautify-css.js来完成的。beautify-css.js是一个...

    三级导航菜单整理 js css

    本资源主要关注的是"三级导航菜单"的设计与实现,使用了JavaScript(js)和层叠样式表(css)这两种核心技术。下面我们将详细探讨这些知识点。 **1. 三级导航菜单的概念** 三级导航菜单是一种具有三层结构的导航...

    Html+Css+Javascript从入门到精通.pdf

    ### Html+Css+Javascript从入门到精通 #### Web开发基础教程概述 《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识,并通过实践逐步深入理解...

    css、js笔记整理

    JavaScript(JS)则是用于网页动态效果和交互的主要脚本语言,它与CSS共同构建了现代网页的动态性和用户体验。JS的基础包括变量、数据类型、操作符、流程控制、函数、对象和DOM操作等,这些内容在实际开发中不可或缺...

    JS代码格式整理工具einars-js-beautify

    6. **CSS和HTML格式化**:除了JavaScript,einars-js-beautify也支持对CSS和HTML文件进行同样的格式化操作。 ### 三、配置与使用 einars-js-beautify提供了丰富的配置选项,允许用户自定义格式化规则。这些配置...

    CSS网页样式表整理合集CHM帮助文档

    【CSS网页样式表整理合集CHM帮助文档】是一份集合了多个关于CSS(Cascading Style Sheets)的电子书资源,旨在为IT行业人士和网页制作爱好者提供全面且深入的CSS学习材料。这些CHM文件是Windows操作系统下的帮助文档...

    网页代码(含有CSS JS)

    网页代码是构建现代网站不可或缺的元素,其中包括了CSS(层叠样式表)和JS(JavaScript),这两种技术在网页设计和开发中扮演着至关重要的角色。本压缩包集合了我个人整理和收集的一些流行且实用的网页代码片段,...

    html+js+css.docx

    1. **MDN Web 文档**:提供了丰富的 JavaScript 教程,涵盖了语言的基本语法、DOM 操作、事件处理等多个方面。地址:[让我们开始 CSS 的学习之旅 - 学习 Web 开发 | MDN (mozilla.org)]...

    HTML+CSS+JAVAscript详细手册(包含9个chm文档)

    (www.liwuguo.com 谢谢赞助整理)本人整理的是Web标准的主要组成部分,初级读者也可以轻松上手。以上文档同样适合正在学习静态网页技术、并想进一步提高的读者,并可作为网页前台工作者的参考手册。

    HTML CSS笔记(含HTML5 CSS3 sublime快捷键整理).docx

    ### HTML CSS笔记(含HTML5 CSS3 sublime快捷键整理) #### 概述 本文档针对Web前端新手,全面系统地介绍了HTML、HTML5、CSS、CSS3的基础知识以及Sublime Text编辑器的快捷键操作技巧。文档共计104页,内容丰富...

    Editplus自动格式化html,css,js的工具

    确保版本支持HTML/CSS/JS的格式化。 2. 打开EditPlus,加载混乱的HTML、CSS或JavaScript文件。 3. 按照上述操作指引,执行相应的格式化命令。 4. 如果需要自定义格式化规则,可以进入“工具”-&gt;“首选项”,在“HTML...

    EditPlus JSON、JS、CSS格式化

    EditPlus是一款强大的文本编辑器,尤其在处理JSON、JavaScript(JS)和CSS代码时,它提供了方便的格式化和美化功能。对于开发者来说,保持代码的整洁和规范至关重要,这不仅可以提高代码可读性,也有利于团队协作和...

    扫描本地页面文件.html或jsp,按照原目录结构,提取页面相关的js.css.img等

    提取页面相关的js.css.img等”指的是一个程序或工具的功能,它能够遍历指定的HTML或JSP文件,并且按照这些文件原本所在的目录结构,找出并提取出与页面相关的资源,如JavaScript(js)、样式表(css)和图片(img)...

    自己整理的常用js

    总的来说,"自己整理的常用js"可能包含JavaScript的基础知识、进阶特性、DOM操作、事件处理和CSS的JavaScript操作等内容,是作者个人学习和实践经验的结晶。对于想要深入理解JavaScript的开发者来说,这是一份宝贵的...

    整理1500个JS特效源码

    JavaScript,简称JS,是一种广泛应用于网页和网络应用开发的轻量级编程语言。它主要负责网页的动态交互,使得静态的HTML页面变得生动有趣。在这个名为"1500个JS特效源码"的资源中,包含了丰富的JavaScript特效示例,...

Global site tag (gtag.js) - Google Analytics