CSS基本使用

一个闲之
88 阅读4分钟

一个简单的移动端导航页面

<template>
	<view class="chooseWay">
		<view class="bg">
			<div class="bg-img">
				<image style="width: 100%; height: 100%;" :src="url" mode=""></image>
			</div>
		</view>
		<div class="choose">
			<div class="choose_item">
				<p>Choose how you want to sign in</p>
			</div>
			<div class="choose_item">
				<button style="width: 80%;" type="primary" @click="OneClickLogin">一键登录</button>
			</div>
			<div class="choose_item">
				<button style="width: 80%;" type="primary" @click="login">账号登录</button>
			</div>
		</div>
	</view>
</template>


<style scoped lang="scss">
	page {
		height: 100%;
		width: 100%;
		background-color: #fff;
	}

	.chooseWay {
		width: 100%;
		height: 100vh;


		.bg {
			width: 100%;
			height: 60%;
			display: flex;
			justify-content: center;
			align-items: center;

			.bg-img {
				width: 400rpx;
				height: 400rpx;
				margin-top: 90rpx;
			}
		}

		.choose {
			width: 100%;
			height: 40%;

			.choose_item {
				width: 100%;
				height: 150rpx;
				text-align: center;
			}
		}
	}
</style>

页面整体设置

  • 背景颜色设定：

    • 在page选择器中，通过设置background-color: #fff;将整个页面的背景颜色定义为白色，为页面提供了一个简洁清晰的基础底色，使页面内容在视觉上更加突出。

  • 尺寸设定：

    • 同样在page选择器里，设置了height: 100%;和width: 100%;，确保页面元素能在整个可视区域内进行布局，充分利用页面空间，并且能根据不同设备的屏幕尺寸自适应调整。

特定组件（.chooseWay）布局

  • 整体尺寸与视口关联：

    • 对于.chooseWay类，设置了width: 100%;和height: 100vh;。其中width: 100%;让该组件在水平方向上占据整个父容器的宽度，而height: 100vh;则使其在垂直方向上占据整个视口的高度，这样能保证该组件在页面上有一个较为突出且完整的展示区域。

  • 内部组件布局划分：

    • 它内部进一步划分了.bg和.choose两个部分，通过合理设置它们各自的高度（.bg的height: 60%;和.choose的height: 40%;），实现了页面上下区域按照一定比例进行布局，使页面结构清晰明了。

背景图片相关布局（.bg及.bg-img）

  • 背景图片容器布局：

    • 在.bg部分，设置了width: 100%;和height: 60%;来确定其在父容器（.chooseWay）中的尺寸占比，同时使用display: flex;、justify-content: center;和align-items: center;，通过 Flex 布局让内部的背景图片容器（.bg-img）在水平和垂直方向上都能居中显示，保证了背景图片在该区域内的位置美观且整齐。

  • 背景图片尺寸设定：

    • 对于.bg-img，明确设置了width: 400rpx;和height: 400rpx;，限定了背景图片的具体尺寸，并且通过设置margin-top: 90rpx;对其在垂直方向上的位置进行了微调，使其在整体布局中呈现出合适的视觉效果。

选择项部分布局（.choose及.choose_item）

  • 整体与内部尺寸设置：

    • .choose部分设置了width: 100%;和height: 40%;来确定其在父容器（.chooseWay）中的大小占比。其内部的.choose_item则设置了width: 100%;和height: 150rpx;，使得每个选择项在水平方向上占据整个父容器宽度，在垂直方向上有固定的高度，保证了各个选择项在布局上的一致性和整齐性。

  • 文本对齐方式：

    • 在.choose_item中，通过设置text-align: center;让每个选择项中的文本内容（如 “Choose how you want to sign in” 等）都能在水平方向上居中显示，提升了页面的美观度和可读性。

这些 CSS 技巧通过合理设置元素的尺寸、位置、背景颜色以及文本对齐等方面，构建出了一个结构清晰、布局合理且视觉效果较好的页面登录方式选择区域的样式。

总结

  • 在提及 page 选择器的背景色设置时，可补充色彩搭配理论层面的内容，如 “白色（#fff）作为页面背景颜色，遵循了简洁至上的设计原则。在视觉传达领域，白色常象征纯净、开阔与中立，能最大程度减少对用户视线的干扰，与页面上需重点突出的登录交互组件相得益彰。从色彩心理学角度看，这种中性色调有助于营造放松、无压力的浏览氛围，契合登录场景下用户求便捷、高效的心理预期。”
  • 对于 height: 100vh 的运用，详细讲解视口高度适配的优势：“采用 100vh 定义 .chooseWay 组件的垂直高度，是移动端适配的精妙之举。vh 单位基于设备可视窗口高度进行度量，无论手机是常规尺寸还是全面屏、折叠屏形态，该组件总能紧密贴合屏幕垂直方向空间，避免出现因屏幕规格差异导致的布局空白或溢出问题，保障在各类热门移动端设备如 iPhone 系列、华为 P 系列、小米数字系列等上呈现稳定一致的视觉效果，为用户提供连贯流畅的交互体验。”
avatar
文章
阅读
粉丝