《css基础知识》——案例：淘宝首页的登录界面

最新推荐文章于 2021-10-06 22:02:55 发布

AZengz

最新推荐文章于 2021-10-06 22:02:55 发布

阅读量912

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/AZengz/article/details/108692699

版权

CSS基础思维导图
在熟悉内边框、外边框、边框等概念之后，还需掌握父子盒子的知识内容。在弹性盒子中，定父盒子的宽高，子盒子等分父盒子宽度，高度需指定。或者定父盒子的宽高，子盒子设置宽高，控制间距。下面就是这两种方式的例子。
1、子盒子等分宽度，指定高度
html：

<div class="flexbox">
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
</div>

对应的css：

.flexbox{
   
	margin:0 auto;
	width:602px;
	height:401px;
	display:flex;
	flex-wrap:wrap;
	border:red solid;
	border-width:1px 0 0 1px;
}

.flexson{
   
	width:150px;
	height:200px;
	background-color:#ddd;
	border:red solid;
	border-width:0 1px 1px 0;

显示如图：在这里插入图片描述
2、子盒子设置宽高，控制间距
html：

<div class="flexbox2">
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
</div>

CSS:

.flexbox2{
   
	margin:200px auto;
	width:601px;
	height:401px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-content:space-between;
	border:red solid;
	border-width:1px 0 0 1px;
}

.flexson2{
   
	width:130px;
	height:180px;
	background-color:#ddd;
	border:red solid;
	border-width:0 1px 1px 0;
}

显示如图：
在这里插入图片描述
当然这都是基于一定的< html >< head >< body>框架下实现的

在掌握了CSS的一定基础知识后，就可以开始做一些页面的实战。
taobao.html

<html>
	<head>
		<title>第一个前端工程</title

最低0.47元/天解锁文章

AZengz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《css基础知识》——案例：淘宝首页的登录界面

在熟悉内边框、外边框、边框等概念之后，还需掌握父子盒子的知识内容。在弹性盒子中，定父盒子的宽高，子盒子等分父盒子宽度，高度需指定。或者定父盒子的宽高，子盒子设置宽高，控制间距。下面就是这两种方式的例子。1、子盒子等分宽度，指定高度html：<div class="flexbox"> <div class="flexson"></div> <div class="flexson"></div> <div class="flexso.
复制链接

扫一扫