CSS-table样式+

文章目录

table样式
轮播图

table样式

table一般不用来布局，主要用来格式化数据。
属性：
width:宽度
height:高度
border-collapse:collapse; 单线边框
border:边框线
td,tr属性：
width:宽度
height:高度
text-align:文本水平方向对齐方式(left(默认)/center/right)
vertical-align:文本垂直方向对齐方式(top/middle(默认)/bottom)
列表样式
不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。

列表类型
- 无序(ul)、有序(ol)和自定义列表(dl)。
- ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。
- dl一般用来设定一个定义，比如名词解释等。dt：标题,dd：描述，用来对dt的内容进行解释并说明的。
样式(用来修改标识类型)
- list-style-image:用图像表示标识
- list-style-position:标识的位置(inside(占用文本空间的值)/outside(默认)（不占用）)
- list-style-type:标识类型
  - list-style-type的属性值：
    a)无序
    disc(默认)(空心圆点)/circle（实心圆点）/square（实心矩形框）
    b)有序
    decimal(默认)（数字）/decimal-leading-zero（数字编号前有一个零）/lower-roman（小写罗马字符）/upper-roman（大写罗马字符）/lower-alpha（小写字母）/upper-alpha（大写字母）/ lower-greek（小写希腊字母）/lower-latin（小写拉丁字母）/upper-latin（大写拉丁字符）…
    c)有序和无序：
    none（取消前面的字符）

简写：

 list-style:list-style-image list-style-position list-style-type;

list-style的值可以按任意顺序列出，而且可以任意省略，只要提供一个值，其它的都自动默认。

轮播图

<div class="carousal"><!-- 1.轮播组图 --><ul class="carousal-img"><li><a href="#"><img src="img/微信图片_20190720165815.jpg" alt="banner"></a></li><li><a href="#"><img src="img/微信图片_20190720165827.jpg" alt="banner"></a></li><li><a href="#"><img src="img/微信图片_20190720165838.jpg" alt="banner"></a></li><li><a href="#"><img src="img/微信图片_20190720165905.jpg" alt="banner"></a></li></ul><!-- 2.控制器 --><div class="prev"></div><div class="next"></div>  <!-- 3.计数器 --><div class="count"><ul><li class="active"></li><li></li><li></li><li></li></ul></div>
</div>

*{margin: 0;padding: 0;
}
li{list-style-type:none;
}
a{text-decoration: none;
}
.carousal{width: 800px;height: 400px;margin: 0 auto;background-color: #5F9EA0;position: relative;/* 相对定位 ，很重要，一定要有*/overflow: hidden;
}
/* 轮播图 */
.carousal-img{width: 99999px;
}
.carousal li{float: left;
}
.carousal-img img{width: 800px;height: 400px;
}
/* 控制器 */
.prev,.next{width: 32px;height: 32px;position: absolute;/* 绝对定位，脱离文档流 ,它相对于和position: relative;定义的元素进行定位*/top: 50%;margin-top: -16px;
}
.prev{background-image: url(../img/prev.png);left: 20px;
}
.next{background-image: url(../img/next.png);right: 20px;
}
/* 计数器 */
.count{width: 800px;height: 10px;position: absolute;bottom: 25px;
}
.count ul{width:80px;height: 10px;margin: 0 auto;/* background-color: #0000FF; */
}
.count ul li{width: 10px;height: 10px;background-color: #666666;float: left;margin-right: 10px;border-radius: 50%;/* 圆角 */opacity: .5;/* 不透明度，取值范围[0,1]之间的一个数，可以是小数 */cursor: pointer;/* 将鼠标形状设置为手型 */
}
.count .active{background-color: #000000;
}

CSS-table样式+相关推荐

TABLE 的css的样式表
TABLE 的css的样式表 <script></script> 标签:css it TABLE 的css的样式表 ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
html5 table样式css,css表格样式的布局篇
进修了div css构造后,确凿css对表格样式的设置就变得简单了.一样平常对table配置class或id来对其设置装备摆设CSS花色. 表格CSS花式配置实例代码: 表格CSS设置装备摆设实例 C ...
css 设置table样式
<style type="text/css" > table tr td{height:39px; font-size: 13px; line-height ...
还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
html table样式_CSS表格样式
表格的样式一般可以在HTML中直接定义,但是结构和样式需要分开声明,这可以方便后期的维护和修改.CSS中的表格样式有caption-side(表格标题位置).border-collapse(表格边框合 ...

CSS-table样式+

文章目录

table样式

轮播图

CSS-table样式+相关推荐

最新文章

热门文章