css布局案例

自定义导航栏

配置文件

抖音布局

** **

<template>
    <div class="main">
		<div class="header">
			<div>昆明</div>
			<div>团购</div>
			<div>关注</div>
			<div>商城</div>
			<div>推荐</div>
		</div>
		<div class="content">
			<div>@扎胡子妹妹</div>
			<div>保持勇敢，坚持有趣。</div>
		</div>
		<div class="right">
			<div v-for="(item,index) in 4" :key="index">
				<img src="/static/images/avatar.png" alt="" />
			</div>
		</div>
    </div>
</template>
<style scoped lang="scss">
.main{
	background-color: gray;
	width: 100%;
	height: 100vh;
	display: grid;
	.header{
		grid-area: 1/1/1/1;
		height: 30px;
		line-height: 30px; // 文字垂直居中
		background-color: red;
		display: flex;
		color: white;
		padding: 3px 10px;
		text-align: center;
		div{
			flex-grow: 1; // 平均扩展剩余空间
		}
	}
	.content{
		grid-area: 1/1/1/1;
		bottom: 0;
		background-color: green;
		align-self:self-end;
		margin-bottom: 70px;
		padding: 10px;
	}
	.right{
		grid-area: 1/1/1/1;
		justify-self: end; // 水平方向右边对齐
		align-self: flex-end; // 垂直方向底部对齐
		margin: 0 20px 180px 0; // 增加一点间距撑开
		background-color: pink;
		div {
			width: 50px;
			height: 50px;
			padding:  10px 3px;
			background-color: red;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
}

</style>

tab横向滚动布局

image-20250427182006845

<view class="urls">
    <view class="url-item">
        <view :class="index === 0 ? ' avtive':''"
        v-for="(item,index) in playerList" 
        :key="index"
        @click="moviePlayer(item,index)">
               {{ url_total - index }}
           </view>
    </view>

   // 放在右边可点击全部的按钮
     <view class="more" @click="openMore()">更多</view>
</view>
<view class="dec" @click="openDetail()" v-html="movie.vod_content"></view>

.urls{
    margin-top: 20px;
    height: 60px;
    position: relative; // 相对定位，里面的元素可以绝对定位
    .url-item{
        display: flex; // flex布局方式
        overflow-y: scroll;
        align-items: center;
        view{
            flex-shrink: 0; // 元素不会挤在一起
            padding: 0 10px;
            margin-right: 10px;
            height: 50px;
            border-radius: 5px;
            line-height: 50px;
            color: black;
            background-color: #CCCCCC;
        }
    }
    .avtive{
        background-color: #465CFF;
        border-radius: 5px;
        color: white;
    }

    .more{
        position: absolute; // 绝对定位到当前元素的右边
        right: 0px;
        top:0px;
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 50px;
        background-color: white;
        color: black;
        
    }
}