前言:
当前姐妹们对“css3空心圆”大致比较关切,我们都想要了解一些“css3空心圆”的相关文章。那么小编也在网络上收集了一些对于“css3空心圆””的相关资讯,希望朋友们能喜欢,同学们快快来了解一下吧!<font></font>标记和CSS替代语法
文本的大小 文本的颜色 文本的字体
size(1-7,默认值为3) color face
font-size color font-family
<font size=3 color="red" face="楷体">font标签的属性用法</font>
<p style="font-size:20px;color:red;font-family:楷体">文本的CSS用法</p>
<b>标记
font-weight:bold;
<i>标记
font-style:italic;
<u>标记
text-decoration:underline;
实例:
<font color="red" size="3"><b><i>欢迎光临我的网站</i></b></font>
<style type="text/css">.txt1{color:red;background:white;font-style:italic;font-weight:bold;}</style>
<font class="txt1">使用CSS</font><sup></sup> 文字上标字体标签(super)<sub></sub> 文字下标字体标签(subscipt)
.txt_super{vertical-align: super;}.txt_sub{vertical-align: sub;}
<hr/>标记
水平线的高度 对齐方式 宽度 颜色 边框颜色
size align width color
height text-align width background-color border-color
<hr size=50 align="center" width=100 color="red"/><hr style="height:50px;align:center;width:100px";background-color="red"/>
<ul>标记
type属性值
disc 默认值,实心圆。
circle 空心圆。
square 实心方块。
list-style-type:
disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、
upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。
默认值:disc(实心圆)
<ol>标记
type属性值
1 默认值。数字有序列表。(1、2、3、4)
a 按字母顺序排列的有序列表,小写。(a、b、c、d)
A 按字母顺序排列的有序列表,大写。(A、B、C、D)
i 罗马字母,小写。(i, ii, iii, iv)
I 罗马字母,大写。(I, II, III, IV)
list-style-type:
disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、
upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。
默认值:disc(实心圆)
<table>表格
实例:合并图片
利用HTML4提供cellpadding和cellspacing属性,可以达到合并图片的效果,但是HTML5已经确定不再支持这两个属性
<table cellpadding="0" cellspacing="0"><tr><td><img src="ch07_03/1.jpg"/></td><td><img src="ch07_03/2.jpg"/></td></tr><tr><td><img src="ch07_03/3.jpg"/></td><td><img src="ch07_03/4.jpg"/></td></tr></table>
使用CSS样式实现合并图片
<!DOCTYPE HTML><html><head><title>合并图片</title><style type="text/css">table{border-collapse: collapse;} /* 边框会合并为一个单一的边框 */td{padding:0;}img{display: block;}</style></head><body><table><tr><td><img src="ch07_03/1.jpg"/></td><td><img src="ch07_03/2.jpg"/></td></tr><tr><td><img src="ch07_03/3.jpg"/></td><td><img src="ch07_03/4.jpg"/></td></tr></table></body></html>
使用CSS语法进行定位
<!DOCTYPE HTML><html><head><title>合并图片</title><style type="text/css">div{position:absolute;left: 50px;top: 50px;}img{position:absolute;}#img2{left:171px;}#img3{top:200px;}#img4{left:171px;top:200px;}</style></head><body><div><img src="ch07_03/1.jpg" id="img1"/><img src="ch07_03/2.jpg" id="img2"/><img src="ch07_03/3.jpg" id="img3"/><img src="ch07_03/4.jpg" id="img4"/></div></body></html>
标签: #css3空心圆