Question

我正在尝试制作网站，但问题是，当我定位标题修复前2图像figcatipion隐藏。我正在尝试制作网站，但问题是，当我定位标题修复前2图像figcatipion hide。

＆＃13;

/*********************
General
*********************/
* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}
a {
	text-decoration: none;
}

h1, h3 {
	margin: 0;
}

/*********************
Header
*********************/
.main-header {
	background-color: #3cb371;
	width: 100%;
	float: left;
	text-align: center;
	position: fixed;
	z-index: 1000;
}

.logo {
	font-family: 'Indie Flower', cursive;
}
.name {
	padding-top: 5px;
}
.occptn {
	padding-bottom: 15px;
	font-size: 15px;
}
.main-header a {
	color: #fff;
	margin: 0;
}

.main-nav {
	background-color:#2e8b57;
	font-weight: bold;
}

.main-nav a {
	text-align: center;
}

.main-nav li {
	display: inline-block;
  padding: 15px;
	
}

.selected a:visited {
	color: #000;
}

.main-nav a:hover {
	color: #000;
}

/*********************
Images
*********************/

.container figure {
	margin: 0;
	float: left;
  width: 45%;
	padding: 0 20px ;
	
}

.container img {
	max-width: 100%;
	display: block;
	
}

.container figcaption {
 clear: right;
 background-color: #dcdcdc;
 padding: 10px 0;
 font-size: .8em;
 }
 
 .figureOne , 
 .figureTwo {
  
 }

.clearfix::after {
		content: “”;
		display: table;
		clear: both;
}

/*********************
Footer
*********************/
.main-footer {
	text-align: center;
	width: 100%;
	background-color:  	#7fffd4;
	clear: left;
	padding: 20px;
}
.main-footer a {
	
}
/*********************
Responsive Layout
*********************/

@media (min-width:660px) {
	
	.main-header {
		padding: 10px 0;
		box-shadow: 0 5px #2e8b57;
	}
	
	.logo {
		float: left;
		width: 45%;
		text-align: left;
		padding-left: 20px;
		
	}
	

	.main-nav {
		background-color: #3cb371;
		float: right;
		width: 45%;
	}
	
	.main-nav li {
		
		padding-left: 10px ;
	}
	
	.occptn {
		padding: 0;
	}
}

＆＃13;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Irfan Hussain | Web Developer</title>
	<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> 
	<link rel="stylesheet" href="normalize.css" />
	<link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Start Header -->
	<header class="main-header">
	  <a class="logo" href="index.html">
		<h1 class="name"> Irfan Hussain </h1> 
		<h3 class="occptn">  Web Developer </h3>
		</a>
		<ul class="main-nav">
			<li class="selected"><a href="index.html">Portfolio</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</header>	
	<!-- End Header -->
	<div class="container clearfix">
	<figure class="figureOne"> 
	<figcaption> Experimentation with color and texture. </figcaption> 
	<img src="img/numbers-01.jpg" alt="Irfan Web Developer" />
	</figure>
	
	<figure class="figureTwo">
	<figcaption> Playing with blending mode in photoshop. </figcaption>
	<img src="img/numbers-02.jpg" alt="Irfan Web Developer" />
	</figure>
	
	<figure>
	<figcaption> Trying to create 80's style glow. </figcaption>
	<img src="img/numbers-06.jpg" alt="Irfan Web Developer" />
	</figure>
	
	<figure>
	<figcaption> Drips created using Photoshop brushes </figcaption> 
	<img src="img/numbers-09.jpg" alt="Irfan Web Developer" />
	</figure>
	
  <figure>	
	<figcaption> Creating shapes using repetition. </figcaption>
	<img src="img/numbers-12.jpg" alt="Irfan Web Developer" />
  </figure>
	</div>
	
	<footer class="main-footer"> 
	<p> &copy2018 Copy right Irfan Hussain | Web Developer </p>
	<a href="https://www.facebook.com"> <img src="img/facebook-wrap.png" alt="Facebook" /> </a>
	<a href="https://www.twitter.com"> <img src="img/twitter-wrap.png" alt="Twitter" /> </a>
	</footer>
</body>
</html>

＆＃13;

我正在尝试制作网站，但问题是，当我定位标题修复前2图像figcatipion hide。

前2个图像figcatpion隐藏当我定位标题固定

0 个答案: