0
レスポンシブデザインのポートフォリオページを念頭に置いて作成しました。サーフェスやiPad、電話などの小さな画面ではページ全体が大きく見えます貧しいナビゲーションバーのリンクは、他のいくつかの問題と同様に中心を外しています。以下に列挙するCodePenリンク。前もって感謝します。大きなビューポートではウェブサイトはうまく見えますが、画面が小さくなると品質が低下します
CodePen：http://codepen.io/A-Jordan/pen/yOKNVe/
HTML：
<html>
<head>
<title>Portfolio Page</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="about">
<div class="col-md-4">
<li><a href="#about">About</a>
</li>
</div>
</div>
<div class="portfolio">
<div class="col-md-4">
<li><a href="#portfolio">Portfolio</a>
</li>
</div>
</div>
<div class="contact">
<div class="col-md-4">
<li><a href="#contact">Contact</a>
</li>
</div>
</div>
</div>
</ul>
</div>
</nav>
<div class="div-1">
<div class="row">
<div class="col-md-6">
<img class="my-picture" src="http://s20.postimg.org/vo5nz85kt/my_face.jpg" alt="My face">
</div>
<div class="col-md-6">
<p> Hello! My name is Anthony Jordan, I am a Web Developer. I enjoy learnoing HTML, CSS, JavaScript & jQuery. I love bringing something to life. Please enjoy my portfolio; there is more to come. </p>
</div>
</div>
<div class="div-2">
<h2 id="portfolio">Portfolio</h2>
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/wswgpg4zh/Tennis_Game_New.png" alt="Classic Tennis">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/rv8sa3qd9/Break_Game_Clone_screenshot.png" alt="Brick Destoryer">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="http://s20.postimg.org/6627zhpod/Tribute_Page.jpg" alt="Tribute Page">
</div>
</div>
</div>
<div class="div-4">
<div class="row">
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/tech/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/arch/grayscale" alt="Placeholder">
</div>
<div class="col-md-4 ">
<img class="img-responsive" src="https://placeimg.com/640/480/nature/grayscale" alt="Placeholder">
</div>
</div>
</div>
<hr>
<div class="div-3">
<div class="row">
<h2 id="contact">Contact Me</h2>
<div class="col-md-8">
<p class="p-2"> If you would like to get in touch with me, all I need is your name and email, and I will be more than happy to reach out to you. Thank you.</p>
</div>
<div class="col-md-4 ">
<img class=" ph-1 img-responsive" src="https://placeimg.com/320/240/people/grayscale" alt="Placeholder">
</div>
</div>
<div class="row">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
</div>
</iv>
</form>
</div>
</div>
<nav class=" nav-2 navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<div class="row">
<div class="button-1">
<div class="col-md-4">
<li><a target="_blank" href="https://github.com/A-Jordan">GitHub</a>
</li>
</div>
</div>
<div class="button-2">
<div class="col-md-4">
<li><a target="_blank" href="https://www.linkedin.com/in/akjordan">LinkedIn</a>
</li>
</div>
</div>
<div class="button-3">
<div class="col-md-4">
<li><a target="_blank" href="https://twitter.com/Brotesque">Twitter</a>
</li>
</div>
</div>
</div>
</ul>
</nav>
</body>
</html>
はCSS：
.about {
margin-left: 600px;
}
body {
background-color: #8c8c8c;
color: black;
margin-left: 220px;
margin-right: 220px;
}
.button-1 {
margin-left: 600px;
}
.button-2 {
margin-left: 700px;
}
.button-3 {
margin-left: 800px;
}
.contact {
margin-left: 800px;
}
.div-1 {
background-color: #b3b3b3;
}
.div-2 {
background-color: #d9d9d9;
}
.div-3 {
background-color: #d9d9d9;
margin-bottom: 100px;
}
.div-4 {
background-color: #d9d9d9;
margin-top: 50px;
}
.form-group {
color: black;
}
h1 {
margin-left: 1050px;
}
h2 {
text-align: center;
}
p {
color: black;
font-size: 20px;
margin-right: 220px;
margin-top: 65px;
float: justify;
}
.p-2 {
float: justify;
font-size: 20px;
margin-bottom: 50px;
margin-left: 40px;
}
.ph-1 {
margin-right: 50px;
}
.portfolio {
margin-left: 700px;
}
.my-picture {
max-width: 50%;
-webkit-border-radius: 10%;
-moz-border-radius: 45%;
border-radius: 45%;
margin-left: 145px;
}
.nav-2 {
margin-left: 220px;
margin-right: 220px;
}
どうもありがとう、私はより多くのドキュメントを検討します。 –