2020-12-07

最新推荐文章于 2024-08-16 22:57:43 发布

wzx_2725259197

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量63

点赞数

文章标签： CSS选择器分组选择器后代选择器通配符选择器网页布局

本文链接：https://blog.csdn.net/wzx_2725259197/article/details/110825154

版权

其他选择器：分组选择器、后代选择器、通配符选择器。

class在head中style用 . 选择，id用#选择

分组选择器有多个选择器组合的选择器

.s1{font-size: 36px;}
			#p1{font-size: 36px;}

后代选择器标签之间有父子关系

html body .s1{color: dodgerblue;}

通配符选择器选择所有的标签

*{
				font-family: 华文彩云;
			}
			*{
				padding: 0px;
				margin: 0px;
			}

新浪网页头部模仿 logo向左浮动，EN 中文向右浮动

再取消浮动达到最后效果

<style>
			/**{
				padding: 0px;
				margin: 0px;
			}*/
			#header{
				height: 47px;
				line-height: 47px;
				padding-top: 20px 0 26px 0;
				width: 1200px;
				margin:0px auto 0;
			}
			#container{width: 1200px;
				margin:0px auto 0;
			}
			#footer{width: 1200px;
				margin:0px auto 0;
			}
			#header #logo{float: left;}
			#header #logo  a img{vertical-align: middle;}
			#header #gj{float: right;}
		</style>

<body>
		<div id="header" style="border: 1px solid deepskyblue;">
			<div id="logo"><a href=""><img src="img/logo.png"/></a></div>
			<div id="gj">EN  中文</div>
			<div style="clear: left;"></div>
		</div>
		<div id="container" style="border: 1px solid deepskyblue;">中部</div>
		<div id="footer" style="border: 1px solid deepskyblue;">底部</div>
	</body>

wzx_2725259197

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020-12-07

其他选择器：分组选择器、后代选择器、通配符选择器。class在head中style用 . 选择，id用#选择分组选择器有多个选择器组合的选择器.s1{font-size: 36px;} #p1{font-size: 36px;}后代选择器标签之间有父子关系html body .s1{color: dodgerblue;}通配符选择器选择所有的标签*{ font-family: 华文彩云; } *{ padding: 0px; ..
复制链接

扫一扫