用不同尺寸创建img和p标签
问题描述:
我是网络开发的新手,我被困在这个问题上。我想要做的是在左边(20-30%宽/小方块)和img(70-80%大方块)右边然后右边显示一个字。直接在它下面有一个小的img盒大字框在右边。 对于我的生活,我不能同时做到这一点。 对不起,我正在描述它是我能做到的最好的方式。 我希望它看起来像这个网站的预订和关于div。 https://dribbble.com/shots/2052368-Faicco-s-Italian-Restaurant-Parallax/attachments/366053用不同尺寸创建img和p标签
function sorry(){
\t alert("This is just a example.")
}
body{
\t margin: 0;
\t padding: 0;
}
img{
\t max-width: 100%;
}
h1,h2,h3,h4,p{
\t margin: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
html{
background: url("background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
#header-background{
\t background: url("restaurant.jpg");
\t height: 75vh;
\t width: 90%;
\t margin: 5% auto 0 auto ;
\t background-size: cover;
\t background-size: 100% 100%
}
header h3{
\t float: left;
margin: 21px 0 0 45px;
\t font-family: Brush Script MT, cursive;
\t font-size: 42px;
\t color: white;
}
nav{
\t float: right;
\t display: inline-block;
\t position: relative;
\t right: 5%;
\t top:1.5%;
}
nav ul{
\t list-style-type: none;
}
nav li{
\t float: left;
\t text-decoration: none;
margin: 0 27px;
padding: 0;
display: flex;
justify-content: space-around;
color: white;
font-family: 'Lobster', cursive;
}
nav li:before{
\t padding-right:10px;
}
#header-middle{
\t width: 50%;
\t margin:200px auto 0 auto;
\t text-align: center;
}
.rise h1{
\t font-size: 50px;
\t color: white;
\t margin:0;
\t letter-spacing: 4px;
}
.rise h2{
\t font-size: 50px;
\t color: white;
\t margin: 0;
}
.rise{
\t position: relative;
\t animation-name: rise;
\t animation-duration: 1.5s;
}
@keyframes rise{
\t 0% {bottom: -500px; opacity:-3;}
\t 100%{ bottom: 0px; opacity: 1; }
}
.rise2{
\t position: relative;
\t animation-name: rise2;
\t animation-duration: 2s;
}
@keyframes rise2{
\t 0% {bottom:-500;opacity:-8;}
\t 100%{bottom:0px; opacity:1;}
}
/*Inner Content*/
#middle{
\t height: 45vh;
\t width: 90%;
margin: 0 auto 5% auto ;
\t background-color: WhiteSmoke;
}
#inner-content-wrapper{
\t width: 80%;
}
#inner-wrapper{
\t position: relative;
\t bottom: 35px;
\t width: 50%;
\t margin: 0 auto;
background-color: white;
}
#wrapper{
\t position: absolute;
\t width: 100%;
}
#inner-content{
\t width: 80%;
object-fit: contain;
\t float: left;
\t display: block;
}
#inner-content img{
max-width: 100%;
max-height:100%;
display: block;
}
#inner-content:first-child {
\t width: 20%;
}
#inner-content:nth-child(3){
\t \t width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="food.css">
\t <title></title>
</head>
<body>
<div id="header-background">
\t <div class="cf">
\t \t <header >
\t \t <h3>Taco Día Del</h3>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li>Shop</li>
\t \t \t \t <li>Recipes</li>
\t \t \t \t <li>News</li>
\t \t \t \t <li>About Us</li>
\t \t \t \t <li>Contact</li>
\t \t \t </ul>
\t \t </nav>
\t \t </header>
\t </div>
\t <div id="header-middle" class="rise">
\t \t <h2>Taco Día Del</h2>
\t \t <h1 class="rise2">Mexican Specialties</h1>
\t \t </div>
</div>
<div id="wrapper">
<div id="middle">
\t <div id="inner-wrapper" class="cf">
\t \t <div id="inner-content-wrapper" class="cf">
<div id="inner-content" class="cf">
\t \t <h2>Reservation</h2>
\t \t <br>
\t \t <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
<div id ="inner-content" class="cf">
\t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
\t \t </div>
\t \t <!--Extra-->
\t \t <div id ="inner-content" class="cf">
\t \t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg">
\t \t </div>
\t \t <div id="inner-content" class="cf">
\t \t <h2>Reservation</h2>
\t \t <br>
\t \t <p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</section>
\t \t </div>
\t </div>
</div>
</div>
<script type="text/javascript" src="food.js"></script>
</body>
</html>
答
有很多的问题要与你的代码,开始你是如何命名的标签。几乎所有的标签都使用了相同的ID。如果要使用相同的CSS样式对多个元素进行样式设置,请使用不是ID的类。并为您想要改变风格的单个元素提供唯一的ID。 我刚取出来的代码的相关部分,并修改了一些东西来演示如何网格(响应)已经或可以实现:
- 而不是使用的img标签,使用图像作为背景为包含它的div。
- 使用vw单位创建具有相同尺寸的正方形,并使其自身响应。
- 对于字体,你也可以使用如下所示的vw单位。
- 根据元素的唯一ID将元素左右浮动。
注意:这仅仅是一个不从 从头开始实现这个代码的解决方法。但有很多更好更清洁的方法可以实现这一点 。你可以使用CSS网格或flexbox等。
function sorry() {
alert("This is just a example.")
}
#wrapper{
width:100%;
}
.inner-content-wrapper {
width:81vw;
margin:0 auto;
}
#inner-content1,
#inner-content4 {
width: 20vw;
height: 20vw;
font-size: 1.3vw;
float:left;
border:1px solid gray;
}
#inner-content4{
float:right;
}
#inner-content1,
#inner-content2,
#inner-content3,
#inner-content4 {
display: block;
padding: 0;
margin: 0;
}
#inner-content2 {
width: 60vw;
height: 20vw;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
float:right;
border:1px solid gray;
}
#inner-content3 {
float:left;
width: 60vw;
height: 20vw;
border:1px solid gray;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg/1200px-001_Tacos_de_carnitas%2C_carne_asada_y_al_pastor.jpg");
background-size:cover;
}
<div id="wrapper">
<div id="inner-wrapper" class="cf">
<div class="inner-content-wrapper" class="cf">
<div id="inner-content1" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
<div id="inner-content2">
</div>
</div>
<div class="inner-content-wrapper" class="cf">
<div id="inner-content3">
</div>
<div id="inner-content4" class="cf">
<h2>Reservation</h2>
<br>
<p>Call us now to book a table in our restaurant. Calls must be in the same day as the reservation.</p>
<br>
<a onclick="sorry()">BOOK A TABLE</a>
</div>
</div>
</div>
</div>
非常感谢你的建议和帮助我。我自我教导自己和我收到的所有建议,我真的很感激。 – Ace