切版练习笔记(四) - 交错漂浮版

于 2021-06-26 05:08:31 发布
阅读量241 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 網頁切版練習 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XI_MILU/article/details/118189498
本文通过交错排列四个图文区块，讲述了金鱼记忆、切版技巧、线上课程和互动环节的故事，展示了灵活的CSS布局与设计技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

交错漂浮版

目标

目标

Step 1.

基本架构，item里面包含图片区块和文字区块，其中图片的大小为600x350

基本架构

<body>
    <div class="wrap">
        <!-- item 1 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=1">
            </div>
            <div class="txt">
                <h2></h2>
                <p></p>
            </div>
        </div>
    </div>
</body>

Step 2.

我们总共需要四块item

在这里插入图片描述

<body>
    <div class="wrap">
        <!-- item 1 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=1">
            </div>
            <div class="txt">
                <h2></h2>
                <p></p>
            </div>
        </div>
        <!-- item 2 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=2">
            </div>
            <div class="txt">
                <h2></h2>
                <p></p>
            </div>
        </div>
        <!-- item 3 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=3">
            </div>
            <div class="txt">
                <h2></h2>
                <p></p>
            </div>
        </div>
        <!-- item 4 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=4">
            </div>
            <div class="txt">
                <h2></h2>
                <p></p>
            </div>
        </div>
    </div>

</body>

Step 3.

调整图片、文字区块的顺序(item 2、4是文字区块在前，图片区块在后)，并补上文案

在这里插入图片描述

<body>
	<div class="wrap">
	        <!-- item 1 -->
	        <div class="item">
	            <div class="pic">
	                <img src="https://picsum.photos/600/350/?random=1">
	            </div>
	            <div class="txt">
	                <h2>金魚都懂的切版</h2>
	                <p>金魚號稱只有七秒的記憶，但其實這是錯誤的，科普一下你就會知道金魚的記憶力其實不只有七秒，所以，你有幾秒的記憶? </p>
	            </div>
	        </div>
	        <!-- item 2 -->
	        <div class="item">
	            <div class="txt">
	                <h2>我的記憶力只有三秒</h2>
	                <p>據稱切出稀飯板的人在全世界只有1%不到! 這樣的話你相信嗎? 如果你不相信的話，
	                    何不當隻金魚跟著AMOS一起學切版呢? 切完之後你就成為了那稀少的人了，那麼我會...
	                    幫你申請瀕臨絕種動物保護(被打)。</p>
	            </div>
	            <div class="pic">
	                <img src="https://picsum.photos/600/350/?random=2">
	            </div>
	        </div>
	        <!-- item 3 -->
	        <div class="item">
	            <div class="pic">
	                <img src="https://picsum.photos/600/350/?random=3">
	            </div>
	            <div class="txt">
	                <h2>這裡打很重要的暴力班廣告</h2>
	                <p>暴力班，Amos 開設的一門線上視訊課程，內容由淺入深，由平和至暴力，從原理到實做，
	                從實做到需求變更，從需求變更到實務理解，從...講那麼多幹嘛? 報名下去你就知道了啦。</p>
	            </div>
	        </div>
	        <!-- item 4 -->
	        <div class="item">
	            <div class="txt">
	                <h2>這邊是敲碗區</h2>
	                <p>金魚的切版敲碗敲了一年總算...碗破了，切版的金魚就跑出來了，你還想看甚麼? 
	                    你要不要去拿個碗出來敲看看? 把碗敲破了的話，你就會...給你媽媽罵。</p>
	            </div>
	            <div class="pic">
	                <img src="https://picsum.photos/600/350/?random=4">
	            </div>
	        </div>
	    </div>
</body>

Step 4.

网页版面初始化

版面初始化

<style>
	* {
		margin: 0;
	   	padding: 0;
	   	list-style: none;
	}
</style>

Step 5.

设定wrap的容器宽度、body的padding(上下都100px)

<style>
	 body {
	     padding: 100px 0;
	 }
	 .wrap {
	     width: 1200px;
	     margin: auto;
	 }
</style>

Step 6.

将item排版(使用flex)，并使item下方与其他item保持70px的距离，而文字的部份，我们让他垂直居中

flex排版

<style>
	.item {
	    display: flex;
	    align-items: center;
	    margin-bottom: 70px;
	}
</style>

Step 7.

给图片、文字区块宽度

<style>
	.item .pic {
	    width: 55%;
	}
	.item .txt {
	    width: 55%;
	}
</style>

Step 8.

加上背景色用以检查版面是否坏掉
-> 没坏掉，因为用的是flex，它会自动调整到合适的大小

在这里插入图片描述

<style>
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 70px;
		background-color: #ccc;
	}
	.item .pic {
		width: 55%;
	}
	.item .txt {
		width: 55%;
		background-color: #fa8;
	}
</style>

Step 9.

将收缩值设为0 (flex-shrink: 0;)，文字区块超出去的部份就不会自动收缩，因此版面可能会坏掉。

在这里插入图片描述

  • 坏掉一

    • 图片右方出现空白区块
      (这是因为图片没设定宽度100%)

    • 图片下方出现空白区块
      (这是因为vertical-align默认为baseline，修改成其他的值即可)

  • 坏掉二
    文字区块超出item范围
    (这是因为flex-shrink: 0;，不会自动调整大小)

<style>
	.item .pic {
		width: 55%;
	 	flex-shrink: 0;
	}
	.item .txt {
		 width: 55%;
		 background-color: #fa8;
		 flex-shrink: 0;
	}
</style>

flex-shrink 属性介绍

  flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，初始值为1，且不允许负值。


Step 10.

修复坏掉一

在这里插入图片描述

<style>
	.item .pic img {
         width: 100%;
         vertical-align: middle;
     }
</style>

Step 11.

修复坏掉二 (制作文字区块盖在图片区块上的效果)

在这里插入图片描述

<style>
	/* 选取item下一层中的第一个物件 */
	.item > :first-child {
        margin-right: -10%;
    }
</style>

CSS选取器介绍

  • 选取器语法: 选取对象A > 选取对象B
    「 > 」选取器是只选到下一层(子代)的物件，至于下下层(孙代)的物件是选不到的。

    范例:

      从以下范例可以看到，son区块的背景色变成黄色了，其他维持粉色不变，证明了.me > div只选到me下一层的物件(son)，而没有选到me下下层的物件(grandson)。

    在这里插入图片描述

    <head>
	<style>
		div {
			padding: 30px;
			background: #f0f;
			border: 5px solid #000;
		}
		.me > div {
			background: yellow;
		}
	</style>
</head>

<body>
	<div class="me">
		<div class="son">
			<div class="grandson"></div>
		</div>
	</div>
</body>

  • 选取器语法: 选取对象 :first-child
    :first-child就是选取第一个子物件。
    .item > :first-child的意思就是，选取item下一层中的第一个物件。

文字区块增加padding，哎呀，又坏了

<style>
	.item .txt {
	    width: 55%;
	    background-color: #fa8;
	    flex-shrink: 0;
	    padding: 50px 30px;
	}
</style>

修复。将box-sizing设为border-box，如此一来，這個物件的內距(padding)和邊框(margin)將不會增加物件本身的寬度。

<style>
	.item .txt {
		width: 55%;
		background-color: #fa8;
		flex-shrink: 0;
		padding: 50px 30px;
		box-sizing: border-box; 
	}
</style>

Step 12.

让文字区块在图片上方、拿掉item的背景色彩

在这里插入图片描述

<style>
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 70px;
		/* background-color: #ccc; */
	}
	.item .txt {
		width: 55%;
		background-color: #fa8;
		flex-shrink: 0;
		padding: 50px 30px;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
</style>

z-index属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。


Step 13

拿掉文字的背景色彩，然后为各个文字区块设定背景色彩

在这里插入图片描述

<style>
	.item .txt {
		width: 55%;
		/* background-color: #fa8; */
		flex-shrink: 0;
		padding: 50px 30px;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
	
	.item:nth-child(1) .txt {
		background-color: #f0aec1;
	}
	.item:nth-child(2) .txt {
		background-color: #2afdd0;
	}
	.item:nth-child(3) .txt {
		background-color: #fec979;
	}
	.item:nth-child(4) .txt {
		background-color: #95dbd6;
	}
</style>

:nth-child()选取器介绍
    :nth-child()，如果想要选取特定单一物件，我们只需要将想要选取的那个物件的排序数字写进刮号内即可。例如:想要选取的是第五个物件，写:nth-child(5) {....}即可。

.item:nth-child(3) .txt {.....}的意思就是，选取第三个item的txt区块。


Step 14.

让文字区块背景有透明效果，将原本用十六进位表示的颜色转成RGBA的形式

在这里插入图片描述

<style>
	.item:nth-child(1) .txt {
       background-color: rgba(240,174,193,0.8);
    }
    .item:nth-child(2) .txt {
        background-color: rgba(42,253,208,0.8);
    }
    .item:nth-child(3) .txt {
        background-color: rgba(254,201,121,0.8);
    }
    .item:nth-child(4) .txt {
        background-color: rgba(149,219,214,0.8);
    }
</style>

语法: rgba(红色，绿色，蓝色，透明度)


Step 15.

为body设定背景色彩

在这里插入图片描述

<style>
	body {
        padding: 100px 0;
        background: linear-gradient(20deg, #3d5493, #1aa2a0) 
                    fixed center center / 100% 100%;
    }
</style>

fixed: 使背景顏色(圖片)不隨畫面捲動而改變。
center center: 为水平、垂直位置。
100% 100%: 为宽度、高度。


Step 16.

设定字型与粗细，使用Google API

在这里插入图片描述

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;900&display=swap" rel="stylesheet">
<style> 
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 70px;
		/* background-color: #ccc; */
		font-family: 'Noto Sans TC', sans-serif;
	}
	.item h2 {
		font-weight: 900;
	}
	.item p {
		font-weight: 300;
	}
</style>

完整程式码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            padding: 100px 0;
            background: linear-gradient(20deg, #3d5493, #1aa2a0)
                        fixed center center / 100% 100%;
        }
        .wrap {
            width: 1200px;
            margin: auto;
        }
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 70px;
            font-family: 'Noto Sans TC', sans-serif;
        }
        .item h2 {
            font-weight: 900;
        }
        .item p {
            font-weight: 300;
        }
        .item .pic {
            width: 55%;
            flex-shrink: 0;
        }
        .item .pic img {
            width: 100%;
            vertical-align: middle;
        }
        .item .txt {
            width: 55%;
            flex-shrink: 0;
            padding: 50px 30px;
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }
        .item > :first-child {
            margin-right: -10%;
        }
        .item:nth-child(1) .txt {
            background-color: rgba(240, 174, 193, .8);
        }
        .item:nth-child(2) .txt {
            background-color: rgba(42, 253, 208, .8);
        }
        .item:nth-child(3) .txt {
            background-color: rgba(254, 201, 121, .8);
        }
        .item:nth-child(4) .txt {
            background-color: rgba(149, 219, 214, .8);
        }
    </style>
</head>
<body>
    
    <div class="wrap">
        <!-- item 1 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=1">
            </div>
            <div class="txt">
                <h2>金魚都懂的切版</h2>
                <p>金魚號稱只有七秒的記憶，但其實這是錯誤的，科普一下你就會知道金魚的記憶力其實不只有七秒，所以，你有幾秒的記憶? </p>
            </div>
        </div>
        <!-- item 2 -->
        <div class="item">
            <div class="txt">
                <h2>我的記憶力只有三秒</h2>
                <p>據稱切出稀飯板的人在全世界只有1%不到! 這樣的話你相信嗎? 如果你不相信的話，
                    何不當隻金魚跟著AMOS一起學切版呢? 切完之後你就成為了那稀少的人了，那麼我會...
                    幫你申請瀕臨絕種動物保護(被打)。</p>
            </div>
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=2">
            </div>
        </div>
        <!-- item 3 -->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=3">
            </div>
            <div class="txt">
                <h2>這裡打很重要的暴力班廣告</h2>
                <p>暴力班，Amos 開設的一門線上視訊課程，內容由淺入深，由平和至暴力，從原理到實做，
                從實做到需求變更，從需求變更到實務理解，從...講那麼多幹嘛? 報名下去你就知道了啦。</p>
            </div>
        </div>
        <!-- item 4 -->
        <div class="item">
            <div class="txt">
                <h2>這邊是敲碗區</h2>
                <p>金魚的切版敲碗敲了一年總算...碗破了，切版的金魚就跑出來了，你還想看甚麼? 
                    你要不要去拿個碗出來敲看看? 把碗敲破了的話，你就會...給你媽媽罵。</p>
            </div>
            <div class="pic">
                <img src="https://picsum.photos/600/350/?random=4">
            </div>
        </div>
    </div>

</body>
</html>

參考资料:

金魚都能懂的這個網頁畫面怎麼切 : 交错漂浮版

MDN Web (z-index)

學習 CSS 版面配置 - box-sizing

金魚都能懂的 CSS 選取器

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值