Question

嘿伙计们我正在慢慢学习如何创建一个网站，我已经阅读了很多关于@media的信息来制作一个响应式网站，但每次我尝试它时，它都不适用于我。我放置了我的html和响应代码，我到目前为止工作，我没有得到它。在响应代码中，我试图使我的标题图像覆盖100％并使我的导航栏垂直向下，但我写的东西没有成功。我做了很多关于它的研究，但如果有人能帮助我，我会真的很棒

/*----Media----*/
@media only screen and (min-width: 150px) and (max-width: 1200px){
	.body{
		width:90%;
		font-size:95%;
	}
	
	.mainHeader img{
		width: 100%;
	}

	.mainHeader nav{
		height:160px;
	}
	
	.mainHeader nav ul{
		float:left;
	}

	.mainHeader nav ul li{
		width: 100%;
		text-align:center;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited {
		padding: 10px 25px;
		height:20px;
		display: block;
	}
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8"/>
	<title>Momobear</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="responsive.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Add jQuery library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<!-- Add fancyBox -->
	<link rel="stylesheet" href="source/jquery.fancybox.css?" type="text/css" media="screen" />
	<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
	<!-- Separate CSS File -->

</head>
<body class="body">
	<header id="mainHeader" class="mainHeader">
		<img src="pics\art1.jpg">
	
		<nav id="navBar">
			<ul>
				<li><a href="index.html">WELCOME</a></li>
				<li><a href="contact.html">CONTACT</a></li>
				<li><a class="active" href="artwork.html">ART WORK</a></li>
				<li><a href="blog.html">BLOG</a></li>
				<li><a href="resources.html">RESOURCES</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="shop.html">SHOP</a></li>
			</ul>
		</nav>
	</header>
	<hr/>
	
	<div id="artWorkSection">
		
		<nav id="bottomNavBar" class="artworkBottomNav">
			<ul>
				<li><a class="active" href="artwork.html">ART WORK</a></li>
				<li><a href="geometry.html">GEOMETRY</a></li>
				<li><a href="illumination.html">ILLUMINTION</a></li>
				<li><a href="islimi.html">ISLIMI</a></li>
			<ul>
		</nav>
		
		<section id="section1">
			<div id="artworkArticlesLeft">
				<article id="artworkArticle1">
					<header>
						<h1>Art Work</h1>
					</header>
					<p>Welcome to the main gallery, Welcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completewhich showcases my complete</p>

				</article>
			</div>
			<div id="artworkArticlesRight">
				<div class="verticalLine">
					<article id="artworkArticle2">
						<p>Welcome to the main gallery, which showcaWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeWelcome to the main gallery, which showcases my completeses my completed work.  </p>
						</br>
						<p>Please get in touch via the c</p>
					</article>
				</div>
			</div>
		</section>
	</div>


	<div class="gallery">
		<a class="fancybox" rel="group" href="pics\art1.jpg">
			<img src="pics\art1.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art2.jpg">
			<img src="pics\art2.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art3.jpg">
			<img src="pics\art3.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art4.jpg">
			<img src="pics\art4.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art1.jpg">
			<img src="pics\art1.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art2.jpg">
			<img src="pics\art2.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art3.jpg">
			<img src="pics\art3.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art4.jpg">
			<img src="pics\art4.jpg" width="400" height="300" ></a>
		<a class="fancybox" rel="group" href="pics\art4.jpg">
			<img src="pics\art4.jpg" width="400" height="300" ></a>
	</div>

<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox").fancybox();
});
	
</script>
</body>
</html>

如何使用媒体创建响应式网站？

0 个答案: