如何解决如何压缩div和其中的文本并保持其响应能力?
我回到家[1:https://i.stack.imgur.com/eRq1n.jpg][1]work,建立了一个与图片相似的网站。 我被困在使用“ TECHNOLOGY”的div上,使其与内部文本一起被压缩(右上),并使其具有响应性并停留在父div内。 如果可以的话,我的另一项建议是在文字下方显示绝对位置的图片,并在移动设备上放大。
谢谢!
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
body,html{
margin: 0 auto;
padding: 0;
max-width: 960px;
align-items: center;
font-family: 'Lora',serif;
}
/* ****Start Nav******** */
nav ul{
margin: 5px auto;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
}
li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
padding: 20px 50px;
align-items: center;
text-align: center;
margin: 2px;
color: white;
background-color: rgb(34,101,169);
}
/* ************* End Nav *************** */
/* ******Start 2nd Row with Title********** */
.name{
max-width: 960px;
margin: 20px auto;
display: flex;
padding: 0px 40px;
align-items: center;
}
.title {
Flex: 0 1 auto;
font-size: 1.8rem;
border-right: 1px solid black;
padding-right: 10px;
font-weight: 500;
}
.title2{
padding-left: 10px;
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
}
.contact{
margin-left: 0 auto;
line-height: 3px;
font-size: 0.7rem;
}
/* ******End 2nd Row with Title********** */
/* ********Start blue box with containers */
.blue {
position: relative;
z-index: 0;
display: flex;
max-width: 960px;
margin: 0px 40px;
height: 53vh;
background-color: rgb(189,217,254);
color: white;
align-items: center;
justify-content: center;
}
.tech{
padding: 0px 10px;
border-radius: 5px;
background-color: rgb(49,137,77);
text-align: justify;
transform: rotate(-15deg) skew(20deg) scaleX(6) scaleY(10);
}
.box1,.box2{
background-color: rgb(34,169);
color: white;
}
.box1{
position: absolute;
z-index: 1;
width: 316px;
top: 2em;
left: 2em;
font-size: 0.8rem;
text-align: justify;
padding: 10px;
}
.box1::first-line{
width: 220px;
border-bottom: 1px dashed white;
padding: 5px;
text-align: left;
font-size: 1.1rem;
}
.box2{
position: absolute;
z-index: 1;
padding: 10px 25px;
top: 31rem;
right: 22rem;
text-align: center;
font-size: 3.8rem;
}
解决方法
有很多工作要做,我开始修复它。 您需要使用媒体查询。
body,html{
margin: 0 auto;
padding: 0;
max-width: 960px;
align-items: center;
font-family: 'Lora',serif;
}
/* ****Start Nav******** */
nav ul{
margin: 5px auto;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
}
li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
padding: 20px 50px;
align-items: center;
text-align: center;
margin: 2px;
color: white;
background-color: rgb(34,101,169);
}
/* ************* End Nav *************** */
/* ******Start 2nd Row with Title********** */
.name{
max-width: 960px;
margin: 20px auto;
display: flex;
padding: 0px 40px;
align-items: center;
}
.title {
Flex: 0 1 auto;
font-size: 1.8rem;
border-right: 1px solid black;
padding-right: 10px;
font-weight: 500;
}
.title2{
padding-left: 10px;
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
}
.contact{
margin-left: 0 auto;
line-height: 3px;
font-size: 0.7rem;
}
/* ******End 2nd Row with Title********** */
/* ********Start blue box with containers */
.blue {
position: relative;
z-index: 0;
display: flex;
max-width: 960px;
margin: 0px 40px;
height: 100vh;
background-color: rgb(189,217,254);
color: white;
align-items: center;
justify-content: center;
}
.tech{
padding: 0px 10px;
border-radius: 5px;
background-color: rgb(49,137,77);
text-align: justify;
font-size: 9vw;
transform: rotate(-15deg) skew(20deg);
}
.box1,.box2{
background-color: rgb(34,169);
color: white;
}
.box1{
position: absolute;
z-index: 1;
max-width: 316px;
margin-left: 2em;
top: 2em;
right: 2em;
font-size: 0.8rem;
text-align: justify;
padding: 10px;
}
.box1::first-line{
width: 220px;
border-bottom: 1px dashed white;
padding: 5px;
text-align: left;
font-size: 1.1rem;
}
.box2{
position: absolute;
z-index: 1;
max-width: 20rem;
padding: 10px 25px;
left:20px;
bottom: 20px;
text-align: center;
font-size: 1.8rem;
}
@media screen and (min-width: 1025px) {
.blue {
height: 53vh;
}
.tech{
font-size: 7rem;
}
.box2{
font-size: 3.8rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap" rel="stylesheet">
<title>Implementing a Layout using HTML & CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">about us</a></li>
<li><a href="">contact</a></li>
<li><a href="">company</a></li>
<li><a href="">services</a></li>
</ul>
</nav>
<div class="name">
<div class="title">TechCorporate</div>
<div class="title2">Free PSD Website Template</div>
<div class="contact">
<p>Tel: xxxxxxx xxxxxxxx</p>
<p>Mail: info@domain.com</p>
</div>
</div>
<div class="blue">
<div class="tech">TECHNOLOGY</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet das</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat,unde debitis quibusdam quas accusantium ipsa officia quo iste delectus modi voluptatibus harum rem saepe quod maxime quam. Velit,beatae quos ipsum dolor sit amet consectetur elit. Placeat,unde debitis.</p>
</div>
<div class="box2">Todays Technology »</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。