web实训学习day2

最新推荐文章于 2022-10-24 14:19:58 发布

陌丶尘

最新推荐文章于 2022-10-24 14:19:58 发布

阅读量154

点赞数

分类专栏： web实训过程

本文链接：https://blog.csdn.net/weixin_43824233/article/details/106758837

版权

web实训过程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

软件用的是HBuilder X
结构：
在这里插入图片描述

layoutTest.html代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<!-- 适配 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		
	</head>
	<body>
		<div id='head'>
			<div >
				<img src="搜索.png"/>
			</div>
			<input type="text" name=""id="" value="" placeholder="123" />
			<div>
				<img src="购物车.png" />
			</div>
		</div>
		
		<div id="body">
			<div class="banner"></div>
			
			<div class="sj_box">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			
		</div>
		
		<div id="footer">
			<div>lzp1</div>
			<div>lzp2</div>
			<div>lzp3</div>
			<div>lzp4</div>
			<div>lzp5</div>
		</div>
	</body>
</html>

style.css代码如下:

@charset "utf-8";/* 编码格式 */

*{margin: 0;padding: 0;}

html,body{
	width: 100%;
	height: 100%;
	font-size: 16px;
	
}
/* 由外到内 */
#head{
	/* 固定定位 */
	position: fixed;
	top: 0;left: 0;
	width: 100%;
	height: 5rem;
	background: blue;
	display: flex;/* 弹性盒子 默认水平，就不需要float了*/
	justify-content: space-between;/* 让元素自动左中右自动分配 */
	padding: 1rem;/* 填充 */
		
}
#head>div{
	text-align: center;
	padding-top: 2rem;
}
#head>div>img{
	width: 2rem;
}
#body{
	width:80%;
	min-height: 50rem;
	border:2px solid greenyellow;
	margin:0 auto;/* 居中 */
	padding: 7rem;
	
}
#body>.banner{
	width: 80%;
	height: 15rem;
	margin: 1.5rem auto;
	background: yellow;
}
#body>.sj_box{
	width: 100%;
	min-height: 30rem;
	overflow: hidden;
}
#body>.sj_box>div{
	width: 40%;
	height: 18rem;
	float: left;
	background: green;
	margin: 2rem;
}
#footer{
	width: 100%;
	height: 5rem;
	position: fixed;
	bottom: 0;
	background: peachpuff;
	display: flex;
	justify-content: space-between;
}
#footer>div{
	flex: 1rem;
	border-right: 2px solid black;
	text-align: center;
	line-height: 5rem;
	font-size: 1.5rem;
}

陌丶尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web实训学习day2

用HBuilder X结构：layoutTest.html代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scala
复制链接

扫一扫

专栏目录