当前位置:   article > 正文

html+css注意语句_valign默认值

valign默认值

1、table与div区别

2、span

3、align与valign区别

align和valign分别用于设定水平位置和垂直位置。align的默认值是center;valign的默认值是middle。

align三个选项:left | center | right。

分别表示在水平方向上向左对齐,居中对齐,向右对齐。

valign三个选项:top | middle | bottom。

分别表示在垂直方向上向顶端对齐,向中间对齐,向底部对齐。

div用法

div也是图层的用法

图层的属性

5、列表的创建

列表类型标记符号
定义列表dl
无序列表ul
目录列表dir
有序列表ol

< li>…< /li>来进行列表展示

6、表格的创建

标签说 明
< table>表格标记
< tr>行标记
< td>列表记
< th>表头标记
< caption>表格标题

在这里插入图片描述

     
     

设置边框的样式----frame、rules

frame常见属性

属性值说明
above显示上边框
border显示上下左右边框
below显示下边框
hsides显示上下边框
lhs显示左边框
rhs显示右边框
void不显示边框
vsides显示左右边框

rules常见属性

属性值说明
all显示所有内部边框
groups显示介于行列边框
none不显示内部边框
cols仅显示列边框
rows仅显示行边框

行水平对齐-----align

left
right
center

行垂直对齐-----valign

属性值说明
top顶端对齐
middle居中对齐
bottom底部对齐
baseline基线

跨列—colspan;跨行-----rowspan

7、css中#与.的区别

.用于id
#用于class属性
<style>
    .con {
        color: #39f;
    }
    #con {
        background-color: #f00;
    }
</style>
<div class="con">HTML5中文网</div>
<div id="con">HTML5中文网</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

id属性一般在一个页面中只可以使用一次,而class可以被多次引用。

id标签中出现class情况

<div id="link2">
						<ul>
							<li><a href="#">作品1</a>&nbsp;&lt;<a class="author" href="#">作者1</a>&gt;</li>
													</ul>
						<p><a href="#">OPML</a>&nbsp;&nbsp;<a href="#">更多</a></p>
					</div>
<style>
#links a.author{color: #37d2fc;}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

class中出现id情况

<div class="home-header-waichu">
			<dd>
				<a href="" class="tag">外出申请</a>
				<a href="index1.html" class="tag">
					 <font color="black">外出记录</font>
				</a>
			</dd>
		</div>
<style>
.home-header-waichu dd .tag{
	color: #6ffffb;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

class中出现图片处理时

方法一:
<div class="home-header">
			<dl>
				<dt>
					<img src="img/none.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-header dt > img{
	width: 20%;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
方法二:
<div class="home-categories">
			<!--下面为dl的用法,可以查找dl,dt,dd的用法-->
			<dl>
				<dt>
					<img src="img/ld2.png" alt="">
				</dt>
			</dl>
		</div>

<style>
.home-categories dt img{
	margin-right: 1rem;  /*让图片和字横向设置间距*/
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

class中出现class时

<div class="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码,扫码进出</p>
			<p class="xiao">校~</p>
		</div>

<style>
.xiao{padding-left: 7rem;} 
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

id中出现id

<div id="home-footer">
			<!--注意p标签的用法-->
			<p>请向校方检察人员出示二维码,扫码进出</p>
			<p id="xiao">校~</p>
		</div>

<style>
#xiao{padding-left: 7rem;} 
/*这里不需要写为home-footer #xiao{} 的形式*/
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

8、css中height和line-height的区别

height:表示这个块级元素或行内元素的高度

line-height:表示里面假如需要输入文本,则这个就是给这个文本的空间大小,相当于 word 文档中的行高

font-size:表示文本的大小,这个大小的高度尽量不要超过 line-height 的高度,如果超过了将会导致第二行的文字和第一行的文字发生重叠
参考:【真正的能理解CSS中的line-height,height与line-height

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/176172
推荐阅读
相关标签
  

闽ICP备14008679号