> 웹 프론트엔드 > CSS 튜토리얼 > 초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)

초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)

奋力向前
풀어 주다: 2021-09-14 17:47:27
원래의
5903명이 탐색했습니다.

이전 글 "CSS를 사용하여 표 테두리 설정 효과를 만드는 방법을 단계별로 가르쳐주세요(코드 포함) "에서는 CSS를 사용하여 표 테두리 설정 효과를 만드는 방법을 소개했습니다. 다음 글에서는 CSS를 사용하여 이미지와 텍스트 레이아웃을 만드는 방법을 소개합니다.

초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)

웹 페이지에는 이러한 CSS 이미지와 텍스트 레이아웃이 종종 있습니다. 렌더링을 살펴본 후 이를 구현하는 방법을 연구하고 html+css 이미지 및 텍스트의 기본을 설명하겠습니다. 레이아웃.

초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)

주로 CSS 속성 visibility:hidden;을 사용하여 p 레이블 텍스트를 숨긴 다음 hover 선택기를 사용하여 변경합니다. 클래스카드는 p 레이블 텍스트 visibility: visible;를 표시합니다. visibility: hidden;p标签文字隐藏起来,再通过hover选择器来改变类card的高度,将p标签文字visibility: visible;显示出来。

1、首先html创建新文件,定义3个div标签。

<body>

		<div class="container">
			<div class="card">
				<div class="img">
					<img  src="54545454.jpg"  alt="초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)" >
					<!-- one -->
				</div>
				<div class="top-text">
					<div class="name">
						第一次班级聚会
					</div>
				</div>
				<div class="bottom-text">
					<div class="text">
						还记的,2018年,大一下学期,开学我们第一次班级聚会,相聚在北海园博园假山,
						一起动手、齐力快乐的一起烧烤,虽然天色黑的伸手不见五指,让人害怕,但我们相聚在一起,
						有说有笑,彼此相知,却一点感觉不到害怕,那刻,仿佛时间停住了,只剩下快乐相伴。
					</div>
				</div>
			</div>
			<!-- two -->
			<div class="card">
				<div class="img">
					<img  src="54545454.jpg"  alt="초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)" >
				</div>
				<div class="top-text">
					<div class="name">
						优秀班级评比
					</div>
					<!-- <p>Apps Developer</p> -->
				</div>
				<div class="bottom-text">
					<div class="text">
						还记得,大二上学期,一次晚点名辅导员说,每个班级要拍出最美的班级照,
						参加最美班级的摄影评比,我们大家一起在群里齐思广议,每个人把自己觉得好的想法分享出来,
						争取拍几张最美的班级照,很想说,我们大家认真付出的样子真的帅呆了。
					</div>
				</div>
			</div>
			<!-- three -->
			<div class="card">
				<div class="img">
					<img  src="54545454.jpg"  alt="초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)" >
				</div>
				<div class="top-text">
					<div class="name">
						团日活动
					</div>
				</div>
				<div class="bottom-text">
					<div class="text">
						还记得,大二下学期,大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动,
						我们大家来到北海美丽的海滩公园,齐心志愿动手去捡垃圾,保护海滩,大家人认真捡着垃圾,
						看到旁边的人举起大拇指,感觉此刻值了。
					</div>
				</div>
			</div>
		</div>
	</body>
로그인 후 복사


2、div盒子的class设置为container,可以避免浮动布局时出现的底部对不齐情况。

3、给container添加样式设置:display: flex弹性布局;align-items: center纵轴方向居中对齐;justify-content: left轴方向左对齐即可。

<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}
로그인 후 복사

代码效果

초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)

4、给card添加样式设置:transition属性鼠标悬停;box-shadow设置阴影效果;background-color属性元素的背景色。

.card{
				height: 270px;
				max-width: 350px;
				margin: 0px 20px;
				background-color: white;
				transition: 0.4s;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			}
로그인 후 복사

5、给hover选择器选择鼠标移样式。

.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}
로그인 후 복사

6、使用img标签处理图片尺寸宽度和高度,object-fit: cover切割图片,保留图片原比例大小。

.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
로그인 후 복사

7、visibility: hidden;p标签文字隐藏起来添加transition属性鼠标悬停。

.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;
로그인 후 복사

8、hover选择器来改变类card的高度,将p标签文字visibility: visible;

1. 먼저 새 HTML 파일을 만들고 div 태그 3개를 정의하세요.

			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;
로그인 후 복사


2. 플로팅 중에 발생하는 하단 오류를 방지하려면 div 상자의 classcontainer로 설정하세요. 레이아웃 완료.

3. container에 스타일 설정 추가: display: flex 탄력적 레이아웃; align-items: center 세로 축을 따라 정렬 < code >justify-content: left 축을 왼쪽으로 정렬하면 됩니다.



	
		
		CSS图片文字排版
		<style type="text/css">
			.container{
				width: 100%;
				height: 500px;
				padding: 0px 40px;
				display: flex;
				align-items: center;
				justify-content: left;
			}
			.card{
				height: 270px;
				max-width: 350px;
				margin: 0px 20px;
				background-color: white;
				transition: 0.4s;
				box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			}
			.card:hover{
				height:400px;
				box-shadow:5px 5px 10px rgba(0,0,0,0.2);
			}
			.card .img{
				height: 200px;
				width: 100%;
			}
			.card .img img{
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
			.card .top-text{
				padding-top: 5px;
			}
			.card .top-text .name{
				font-size: 25px;
				font-weight:600;
				color: #202020;
			}
			.card .top-text p{
				font-size: 20px;
				font-weight:600;
				color: #e74c3c;
				line-height: 20px;
			}
			.card .bottom-text{
				text-indent: 2em;
				padding: 0 20px 10px 20px;
				margin-top: 5px;
				 background-color: white;
				 visibility: hidden;
				 transition: 0.5s;
			}
			.card:hover .bottom-text{
				opacity: 1;
				visibility: visible;
			}
			.card .bottom-text .text{
				text-align: justify;
			}
		
	
초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)
第一次班级聚会
还记的,2018年,大一下学期,开学我们第一次班级聚会,相聚在北海园博园假山, 一起动手、齐力快乐的一起烧烤,虽然天色黑的伸手不见五指,让人害怕,但我们相聚在一起, 有说有笑,彼此相知,却一点感觉不到害怕,那刻,仿佛时间停住了,只剩下快乐相伴。
초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)
优秀班级评比
还记得,大二上学期,一次晚点名辅导员说,每个班级要拍出最美的班级照, 参加最美班级的摄影评比,我们大家一起在群里齐思广议,每个人把自己觉得好的想法分享出来, 争取拍几张最美的班级照,很想说,我们大家认真付出的样子真的帅呆了。
초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)
团日活动
还记得,大二下学期,大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动, 我们大家来到北海美丽的海滩公园,齐心志愿动手去捡垃圾,保护海滩,大家人认真捡着垃圾, 看到旁边的人举起大拇指,感觉此刻值了。
로그인 후 복사
코드 효과🎜🎜WeChat 스크린샷_20210914165944 ng 🎜🎜4. 카드에 스타일 설정 추가: transition 속성 마우스오버; box-shadow 그림자 효과 설정; 배경- color속성 요소의 배경색입니다. 🎜rrreee🎜5. hover 선택기의 마우스 이동 스타일을 선택하세요. 🎜rrreee🎜6 이미지 크기의 너비와 높이를 처리하려면 img 태그를 사용하고, 이미지를 자르고 이미지의 원래 비율을 유지하려면 object-fit:cover를 사용하세요. .
🎜rrreee🎜7. visibility: hide;p 태그 텍스트를 숨기고 마우스 오버 시 transition 속성을 ​​추가하세요. 🎜rrreee🎜8 hover 선택기를 사용하여 클래스 카드의 높이를 변경하고 p 레이블 텍스트를 가시성으로 변경합니다. 보이는;보여보세요. 🎜rrreee🎜좋아, 끝났어! ! 🎜🎜전체 코드🎜rrreee🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜

위 내용은 초보자용 기사: CSS를 사용하여 이미지 및 텍스트 레이아웃을 만드는 방법(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿