HTML-CSS_Day_1：CSS要点补充说明、项目演练

最新推荐文章于 2024-07-21 17:58:14 发布

孤光冰雪LightIce

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量118

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Brandon_/article/details/119292528

版权

一、CSS要点补充说明

1.margin:0 auto：自适应页面两边宽度

2.inlineinine-block都是文本类元素

3.position:absolutefloat:left/right会在内部将元素转化为display:inline-block

4. 一旦一个文本类元素包含文字，外面的文字会和里面的文字底对齐

vertical-align：调节对齐线

5. 左右两栏分别相对于两个容器向左右浮动：

<body>
	<div>
		<ul style="float:left"></ul>
		<ul style="float:right"></ul>
	</div>
</body>

二、项目演练

贴吧

<body>
	<div>
		贴吧
	</div>
</body>

/*第一种写法*/
*{
	margin:0;
	padding:0;
}

div{
	padding:0 10px;
	width:200px;
	line-height:20px;
	height:20px;
	font-size:12px;
	background:linear-gradient(0deg,blue,#000)
	color:rgba(255,255,255,0.8);
	text-align:center;
}

/*贴吧前的伪元素贴吧logo*/
div::before{
	content:"";
	display:inline-block;
	width:12px;
	height:11px;
	background-image:url(![baidulogo](https://img-blog.csdnimg.cn/0558ed801e014ab1be6367be41aa7c10.gif)
);
	background-size:100% 100%;
	margin-right:5px;
	vertical-align:-1px;
}

/*贴吧后的伪元素箭头*/
div::after{
	content:"";
	display:inline-block;
	background-size:100% 100%;
	width:6.5px;
	height:11.5px;
	float:right;
	margin-top:3px;
	background-image:url(https://cn.bing.com/images/search?view=detailV2&ccid=frJweGhu&id=7B1775EFB3F62442476F806652F5F8323F442415&thid=OIP.frJweGhuVb4vumWfie5MhgAAAA&mediaurl=https%3a%2f%2fimg.51miz.com%2fElement%2f00%2f84%2f24%2f44%2f29fdb4d8_E842444_436b8078.png&exph=400&expw=400&q=%e5%90%91%e5%8f%b3%e7%9a%84%e7%ae%ad%e5%a4%b4%e5%9b%be%e7%89%87%e7%99%bd%e8%89%b2&simid=608052418735250655&FORM=IRPRST&ck=4CC7834BF78AA58E9860419E05C2F51F&selectedIndex=56&ajaxhist=0&ajaxserp=0);
}

/*第二种写法*/
*{
	margin:0;
	padding:0;
}

div{
	padding:10px 10px;
	width:200px;
	line-height:12px;
	height:12px;
	font-size:12px;
	background:linear-gradient(0deg,blue,#000)
	color:rgba(255,255,255,0.8);
}

/*贴吧前的伪元素贴吧logo*/
div::before{
	content:"";
	display:inline-block;
	width:12px;
	height:11px;
	background-image:url(![baidulogo](https://img-blog.csdnimg.cn/0558ed801e014ab1be6367be41aa7c10.gif)
);
	background-size:100% 100%;
	margin-right:5px;
}

/*贴吧后的伪元素箭头*/
div::after{
	content:"";
	display:inline-block;
	background-size:100% 100%;
	width:6.5px;
	height:11.5px;
	float:right;
	background-image:url(https://cn.bing.com/images/search?view=detailV2&ccid=frJweGhu&id=7B1775EFB3F62442476F806652F5F8323F442415&thid=OIP.frJweGhuVb4vumWfie5MhgAAAA&mediaurl=https%3a%2f%2fimg.51miz.com%2fElement%2f00%2f84%2f24%2f44%2f29fdb4d8_E842444_436b8078.png&exph=400&expw=400&q=%e5%90%91%e5%8f%b3%e7%9a%84%e7%ae%ad%e5%a4%b4%e5%9b%be%e7%89%87%e7%99%bd%e8%89%b2&simid=608052418735250655&FORM=IRPRST&ck=4CC7834BF78AA58E9860419E05C2F51F&selectedIndex=56&ajaxhist=0&ajaxserp=0);

笔试

使用语义化的html标签及css完成以下布局：
{最多两行20px #333，顶部对齐图片，底部间距8px}
{12px #666 行高1.2}使用语义化的html标签及css完成以下布局，考虑模块化和延展性。
容器默认宽度320px，右侧。

容器默认宽度320px，图片100*100
hover时容器宽度变成400px

<body>
	<div class="wrapper">
		<img src="图片地址" class="img">
		<p class="content1">{最多两行20px #333，顶部对齐图片，底部间距8px}</p>
		<p class="content2">{12px #666 行高1.2}使用语义化的html标签及css完成以下布局，考虑模块化和延展性。容器默认宽度320px，右侧。</p>
	</div>
</body>

*{
	margin:0;
	padding:0
}

.wrapper{
	width:320px;
}

.wrapper:hover{
	width:400px;
}

.wrapper .img{
	width:100px;
	height:100px;
	float:left;
}

.content1{
	 font-size:20px;
	 line-height:20px;
	 height:40px;
	 overflow:hidden;
	 color:#333;
	 margin-bottom:8px;
}

.content2{
	font-size:12px;
	color:#666;
	line-height:1.2em;
}

孤光冰雪LightIce

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML-CSS_Day_1：CSS要点补充说明、项目演练

一、CSS要点补充说明1.margin:0 auto：自适应页面两边宽度2.inlineinine-block都是文本类元素3.position:absolutefloat:left/right会在内部将元素转化为display:inline-block4. 一旦一个文本类元素包含文字，外面的文字会和里面的文字底对齐    vertical-align：调节对齐线5. 左右两栏分别相对于两个容器向左右浮动：<body> <div&gt
复制链接

扫一扫