我对HTML + CSS非常新，而且非常新的是我带来的非常具有挑战性的任务。我有一个我想为自己制作的网站;这是它的样子：
现在，从外部来看它看起来很棒，而且大多数都是排队的。现在，我知道我的编码是可怕的，可耻的，可怕的等等。我一直在努力教自己编写代码，但我不能完全理解我做错了什么，所以我希望我能在这里找到建议。
免责声明：观众可自行决定是否达到峰值。以下代码可能会扼杀您。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Andre Tiglao</title>
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="./css/styles.css" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/actor:n4:default;alfa-slab-one:n4:default;advent-pro:n4,n7:default;source-sans-pro:n4,n2:default.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Andre Tiglao</a></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navlist">
<li class="navlistitem active"><a href="#">Home</a> </li>
<li class="navlistitem"><a href="#">About</a> </li>
<li class="navlistitem"><a href="file:///Macintosh HD/Users/andre/Desktop/Website Tutorials/Exercise Files/Chapter 05/04/04 Final/portfolio.html">Portfolio</a> </li>
<li class="navlistitem"><a href="file:///Macintosh HD/Users/andre/Desktop/Website Tutorials/Exercise Files/Chapter 05/04/04 Final/contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<img src="./images/gadgets.jpg" class="img-responsive image" alt="Placeholder image">
<div class="container1">
<img class="img-responsive image2" src="images/portrait.jpg" alt="" />
<section class="sectionRight">
<h2>About Me</h2>
<p>I've been working with computers for most of my life, and have been learning many things along the way. I remember starting with an old, vile Dell laptop when I was a kid, and did the usual things like browsing the web and playing video games. As a grew up, so did my technology. I eventually picked up video editting in iMovie, then went to Final Cut Pro to make myself look cooler. But, it was also about the capabilities as well. I then switched to Adobe and started using Premiere Pro and Photoshop. From that point on, I've been exploring all of the different themes, styles, and techniques to make myself a unique artist. I try to make my artwork meaningful with depth and certain elements that make the art piece stick out. I bear the mindset of never giving up, always finding a way to make something workout. Most of my projects bring me to obstacles that make it hard to continue, and I can find myself staring at the screen for minutes, if not hours. For me, design consists of the Brainstorming, the Rough Draft, and the part where you have to hand it in for a deadline.</p>
</section>
</div>
<footer>Copyright 2017. JT Tiglao <a href="#">website</a></footer>
<script src="file:///Macintosh HD/Users/andre/Desktop/Website Tutorials/Exercise Files/Chapter 05/04/04 Final/js/jquery-1.11.3.min.js"></script>
<script src="file:///Macintosh HD/Users/andre/Desktop/Website Tutorials/Exercise Files/Chapter 05/04/04 Final/js/bootstrap.js"></script>
</body>
</html>
@charset "UTF-8";
body {
background-color: #A9A9A9;
background-attachment: scroll;
font-family: source-sans-pro;
font-style: normal;
font-weight: 200;
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
h1 {
font-family: advent-pro;
font-style: normal;
font-weight: 400;
font-size: 1.5em;
text-align: center;
line-height: 1em;
height: 1em;
color: #FFFFFF;
text-shadow: 4px 5px 17px #000000;
}
h2 {
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
font-size: 140%;
text-align: center;
}
footer {
font-size: small;
text-align: center;
clear: both;
position: static;
left: 0px;
bottom: 0px;
width: 100%;
}
.asideLeft {
width: 50%;
float: left;
text-align: center;
background-size: 152% auto;
background-position: 36% 0%;
padding-bottom: 192px;
padding-top: 192px;
}
.sectionRight {
float: right;
padding-top: 0;
background-color: #FFFFFF;
display: inline-block;
padding-left: 2.5%;
vertical-align: middle;
width: 50%;
height: 85vh;
padding-right: 1%;
}
.container1 .sectionRight p {
font-size: 87%;
margin-top: -2%;
}
header {
text-align: center;
margin-top: 70px;
padding-right: 0px;
}
nav {
background-color: #EEEEEE;
}
.navlist {
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
.navlistitem {
}
.navlistitem a {
text-decoration: none;
display: block;
padding-top: 14px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
color: #6B6B6B;
}
.navlistitem a:hover {
color: black;
background-color: #358B6C;
}
.container-fluid .navbar-header .navbar-brand {
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
color: #00CC24;
}
.image {
margin-top: -30px;
padding-top: 0px;
}
.image2 {
float: left;
max-width: 50%;
display: inline-block;
vertical-align: middle;
height: 85vh;
width: 50%;
}
.container1 {
-o-object-fit: cover;
}
@media (max-width: 650px){
.asideLeft {
width: 90%;
float: none;
margin-right: 5%;
margin-left: 5%;
margin-top: 30px;
}
.sectionRight {
width: 90%;
float: none;
margin-right: 5%;
margin-top: 30px;
margin-left: 5%;
margin-bottom: 100px;
}
body {
background-color:darkslategray;
background-image: url();
background-size: cover;
background-attachment: fixed;
font-family: actor;
font-style: normal;
font-weight: 400;
height: 100%;
margin: 0;
}
h1 {
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
font-size: 2em;
text-align: center;
line-height: 1em;
height: 1em;
}
header {
margin-top: 30px;
}
p {
font-size: large;
}
}
@media (max-width: 700px){
.image {
margin-top: -10px;
}
}
我认为我的大部分错误都出现在CSS代码中。 怜悯我......这是我的第一次！
非常感谢您尝试提供帮助，我真的很感激。