我正在使用尺寸为1920 * 1080
的图像
*{
padding: 0;
margin: 0;
}
html{
padding: 10px;
background-color: #fff;
color:white;
font-family: 'Courier New', Courier, monospace;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
header{
background-image:linear-gradient(to bottom,rgba(8, 141, 8, 0.719),grey),url("key.jpg");
height: 100vh;
background-size:cover;
background-position: center;
position: relative;
}
h1{
margin-bottom: 12px;
font-family: 'Cinzel Decorative', cursive;
}
.text-box{
position: absolute;
left: 30%;
top: 35%;
font-family: 'Lobster', cursive;
}
.btn1 ,.btn2 ,.btn3 {
padding: 8px 20px;
background-color: oldlace;
margin-right: 60px;
text-decoration: none;
color: grey;
font-weight: 600;
border-radius: 200px;
}
.btn1:hover ,.btn2:hover ,.btn3:hover,
.btn1:active ,.btn2:active ,.btn3:active{
background-color: rgba(136, 209, 77, 0.733);
transition: 0.3s;
border: steelblue 2px solid;
color: #fff;
}
.logo{
width: 100px;
float: left;
}
.main-nav{
float: right;
list-style: none;
font-family: 'Lobster', cursive;
}
.main-nav li{
display:inline-block;
margin-left: 40px;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a{
color:white;
text-decoration: none;
}
.main-nav li a:hover,
.main-nav li a:active{
font-weight: 700;
}
.row{
color: rgb(80, 77, 77);
font-family: 'Lato', sans-serif;
}
h2{
color: rgb(80, 77, 77);
font-weight: 900;
text-align: center;
padding-bottom: 2%;
}
.section {
clear: both;
padding: 80px 0px;
margin: 0px;
}
.p1{
padding: 0% 13%;
}
.row1{
padding-top: 2%;
left:18%;
}
.row1 p{
font-size: 90%;
line-height: 30px;
}
.ion-social-html5,
.ion-social-javascript,
.ion-social-css3{
font-size: 46px;
}
.ion-social-html5{
color: orange;
}
.ion-social-javascript{
color:rgba(255, 255, 0, 0.911);
}
.ion-social-css3{
color:rgb(45, 45, 190);
}
h3{
padding-bottom: 3%;
}
.html{
padding-right: 5%;
}
.js{
padding-left: 3%;
}
.photo-showcase{
width: 100%;
height: 100vh;
}
.fig img{
max-width: 30%;
max-height: 100vh;
float: left;
display:inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Front End</title>
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:700|Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Lato|Lobster" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="p2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="032 grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ionicons.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<nav>
<div class="Nav">
<img src="logo1.jpg" alt="logo" class="logo">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</nav>
<div class="text-box">
<h1>
Front End Dev. <br>
Where it all begins.
</h1>
<a class="btn1" href="#">Html</a>
<a class="btn2" href="#">css</a>
<a class="btn3" href="#">javascript</a>
</div>
</header>
<section class="section">
<div class="row">
<h2>Front end Dev</h2>
<p class="p1">
Front-end web development is the practice of producing HTML, CSS and usually JavaScript for a website or
Web Application so that a user can see and interact with them directly
</p>
</div>
<div class="row row1">
<div class="col span-1-of-4 html">
<h3>HTML <i class="ion-social-html5"></i></h3>
<p>
Hypertext Markup Language is the standard markup language for creating web pages and web applications.
With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web
</p>
</div>
<div class="col span-1-of-4 css">
<h3>CSS <i class="ion-social-css3"></i> </h3>
<p>
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language.
</p>
</div>
<div class="col span-1-of-4 js">
<h3>JAVASCRIPT <i class="ion-social-javascript"></i></h3>
<p>
JavaScript, often abbreviated as JS, is a high-level, interpreted programming language.
It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
</p>
</div>
</div>
</section>
<section class="Photo-showcase">
<ul class="one">
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
</ul>
<ul class="one">
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
<li>
<figure class="fig"><img src="key.jpg"> </figure>
</li>
</ul>
</section>
</body>
</html>
答案 0 :(得分：0)
使用Makefile。
在display: flex;。
css删除
.Photo-showcase ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin: 10px 0;
}
同时添加此
.fig img {
max-width: 30%;
max-height: 100vh;
float: left;
display:inline-block;
}
这是工作代码
.fig img {
width: 100%;
display: block;
}
*{
padding: 0;
margin: 0;
}
html{
padding: 10px;
background-color: #fff;
color:white;
font-family: 'Courier New', Courier, monospace;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
header{
background-image:linear-gradient(to bottom,rgba(8, 141, 8, 0.719),grey),url("key.jpg");
height: 100vh;
background-size:cover;
background-position: center;
position: relative;
}
h1{
margin-bottom: 12px;
font-family: 'Cinzel Decorative', cursive;
}
.text-box{
position: absolute;
left: 30%;
top: 35%;
font-family: 'Lobster', cursive;
}
.btn1 ,.btn2 ,.btn3 {
padding: 8px 20px;
background-color: oldlace;
margin-right: 60px;
text-decoration: none;
color: grey;
font-weight: 600;
border-radius: 200px;
}
.btn1:hover ,.btn2:hover ,.btn3:hover,
.btn1:active ,.btn2:active ,.btn3:active{
background-color: rgba(136, 209, 77, 0.733);
transition: 0.3s;
border: steelblue 2px solid;
color: #fff;
}
.logo{
width: 100px;
float: left;
}
.main-nav{
float: right;
list-style: none;
font-family: 'Lobster', cursive;
}
.main-nav li{
display:inline-block;
margin-left: 40px;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a{
color:white;
text-decoration: none;
}
.main-nav li a:hover,
.main-nav li a:active{
font-weight: 700;
}
.row{
color: rgb(80, 77, 77);
font-family: 'Lato', sans-serif;
}
h2{
color: rgb(80, 77, 77);
font-weight: 900;
text-align: center;
padding-bottom: 2%;
}
.section {
clear: both;
padding: 80px 0px;
margin: 0px;
}
.p1{
padding: 0% 13%;
}
.row1{
padding-top: 2%;
left:18%;
}
.row1 p{
font-size: 90%;
line-height: 30px;
}
.ion-social-html5,
.ion-social-javascript,
.ion-social-css3{
font-size: 46px;
}
.ion-social-html5{
color: orange;
}
.ion-social-javascript{
color:rgba(255, 255, 0, 0.911);
}
.ion-social-css3{
color:rgb(45, 45, 190);
}
h3{
padding-bottom: 3%;
}
.html{
padding-right: 5%;
}
.js{
padding-left: 3%;
}
.photo-showcase{
width: 100%;
height: 100vh;
}
.Photo-showcase ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin: 10px 0;
}
.fig img {
width: 100%;
display: block;
}