Css基本样式————综合设计:表格的制作

<table id="tb">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

#tb{
    border-collapse: collapse;
    width: 500px;
}
#tb td,#tb th{
    border: 1px solid bisque;
    padding: 5px;
}
#tb th{
    text-align: left;
    background-color: aqua;
    color: #ffffff;
}
#tb tr.alt td{
    color: black;
    background-color: aquamarine;
}
时间: 2024-11-06 22:10:01

Css基本样式————综合设计:表格的制作的相关文章

BootStrap 之 CSS全局样式中的表格

不使用BootStrap 之 CSS全局样式中的表格,自己也不定义CSS样式 <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐

[转]CSS如何设置html table表格边框样式

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

(11)网页样式综合案列---灵活的电子相册 {上}

本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片(或者某段文字)时,相应的文字(或者相应的某张图片)会以特殊样式显示} 以上部分的介绍将出现在(12)网页样式综合案列---灵活的电子相册 {下},这里只是提前感受. 1.搭建基本框架 搭建框架主要应考虑在实际页面中相册的具体结构和形式,包括照片整体排列的方法,用户可能的浏览情况,照片是否需要自动调整,等等.

CSS自学笔记(5):CSS的样式

CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-color: #000;} 是用纯色作为背景.这时你可以定义其他属性,生成不同效果的背景. CSS中也可以用图片作为背景,这是就需要使用background-image属性了,如果属性值为一个URL值,并且图片文件存在,那么就可以看到用该图片做为背景的网页了 body {background-image:

5.2 CSS图像样式

在五彩缤纷的网络世界中,各种各样的图片组成了丰富多彩的页面,能够让人更直观地感受网页所要传达给浏览者的信息.本节将介绍CSS设置图片风格样式的方法,包括图片的边框.对卉方式和图文混排等,并通过实例综合掌握文字和图片的各种运用. 一.基本设置 作为单独的图片,虽然它本身的很多属性都可以直接在HTML中进行调整,但是通过CSS统一管理,不但可以更加精确地调整图片的各种属性,还可以实现很多特殊的效果.本节主要讲解用CSS设置图片基本属性的方法,为进一步深入探讨打下基础. 图像的基本设置包括设置图像的边

5.1 CSS文字样式

文字和图像是传达信息的基础,是网页设计永远不可缺少的元素,各种各样的文字和图像效果在整个互联网中无处不在.本章从基础的文字设置开始,详细讲解CSS设置各种文字效果的方法,然后再进一步讲解关于图像的几个重要的应用领域. 使用过任何文字处理软件的用户对文字排版都不会陌生.例如在Word软件中可以对文字的字体.大小和颜色等各种属性进行设置.CSS同样可以对HTML页面中的文字进行全面的设置. 一.准备网页 为了便于讲解和实践,首先准备一个非常简单的页面,HTML代码如下. <!DOCTYPE html

【项目总结】扯一扯电商网站前端css的整体架构设计(1)

最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧,因为涉及到甲方的"商业机密",所以打一下马赛克: 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧,所以设计图就不贴那么多了.整个项目的设计图由最开始的ui定了个首页稿基调,剩下的界面大部分都是我在首页稿基础上做出来的,以后有机会再唠.PS:不过

CSS常用样式及示例

CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表

14.5 CSS排版与传统的表格方式排版的分析

在学习完使用CSS的布局方法之后,再来回顾一下传统的使用表格布局的方法.实际上,在十多年前,互联网刚刚开始普及的时候,网页内容非常倚单,形式也非常单调.1997年,美国设计师David Siegel出版了一本里程碑式的网页制作指导书<Creating KillerWeb Sites>(创建杀手级网站),表明使用GIF透明间隔图像和表格可以创建出“魔鬼般迷人”的网站. 此后,使用表格布局几乎成为每一个设计师必须掌握的技术,而且Macromedia公司推出的Fireworks和Adobe公司的Ph