html中div框之后,如何使框使用Div出现在HTML中？

目前正在为网站添加一个页面，并且我想要做的是在我的网站上以HTML格式显示框。如何使框使用Div出现在HTML中？

我已经浏览了HTML和CSS，似乎没有任何格式化，语法等问题。所以，我的问题是为什么不出现这些框？

我试图做类似这样的东西在这里： CodePen Example .

这是我的HTML CSS &为页面

Projects

FV4

• About Me
• Contact
• Projects

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.

Title 6

/*

* Globals

*/

@import 'http://fonts.googleapis.com/css?family=Open+Sans:400,700';

.mainContent{

perspective: 80em;

width: 960px;

margin: 0 auto;

}

.box{

float:left;

position: relative;

display: inline;

width: 300px;

height: 180px;

background: #FFFFFF;

box-sizing: border-box;

padding: 15px;

margin: 10px;

box-shadow: 0px 0px @shadowBlurRadius fade(@page-background-main-color, 35%);

opacity: 0;

}

h2 {

margin: 0;

margin-bottom: 10px;

}

p {

margin: 0;

}

.box-banner{

background: #CCCCCC;

height: 80px;

margin: 0px -15px;

margin-bottom: 6px;

background-position: center center;

}

&.no-text .box-banner{

height:129px;

}

.toolbar{

position: absolute;

display:block;

z-index:999;

top: 0px;

right: 0px;

width:100%;

transform:scale(0);

}

.btn{

font-size:1.5em;

font-weight: 700;

text-decoration:none;

background: rgba(0,0,0,0.4);

padding: 0px 10px 4px 10px;

color: lighten(@page-background-main-color, 10%);

display:block;

&.left {

float:left;

font-weight:400;

}

&.right{

float:right;

}

}

a,

a:focus,

a:hover {

color: #fff;

}

/*

* Base structure

*/

html,

body {

height: 100%;

background-color: white;

}

body {

color: black; /*#bf0a0a*/

text-align: center;

text-shadow: 0 1px 1px rgba(0,0,0,.5);

}

/* Extra markup and styles for table-esque vertical and horizontal centering */

.site-wrapper {

display: table;

width: 100%;

height: 100%; /* For at least Firefox */

min-height: 100%;

-webkit-box-shadow: inset 0 0 200px rgba(0,0,0,.5);

box-shadow: inset 0 0 200px rgba(0,0,0,.5);

}

/* Padding for spacing */

.inner {

padding: 30px;

}

.headshot{

width: 25%; /* you can use % */

height: auto;

}

/*

* Header

*/

.masthead-brand {

margin-top: 10px;

margin-bottom: 10px;

}

.masthead-nav > li {

display: inline-block;

}

.masthead-nav > li + li {

margin-left: 20px;

}

.masthead-nav > li > a {

padding-right: 0;

padding-left: 0;

font-size: 16px;

font-weight: bold;

color: #fff; /* IE8 proofing */

color: black;

border-bottom: 2px solid transparent;

}

.masthead-nav > li > a:hover,

.masthead-nav > li > a:focus {

background-color: transparent;

border-bottom-color: #a9a9a9;

border-bottom-color: rgba(255,255,255,.25);

}

.masthead-nav > .active > a,

.masthead-nav > .active > a:focus {

color: black;

border-bottom-color: #bf0a0a;

}

.masthead-nav > .active > a:hover {

color: #bf0a0a;

border-bottom-color: black;

}

@media (min-width: 768px) {

.masthead-brand {

float: left;

}

.masthead-nav {

float: right;

}

}

/*

* Cover

*/

.cover {

padding: 0 20px;

}

/*

* Affix and center

*/

@media (min-width: 768px) {

/* Pull out the header and footer */

.masthead {

position: fixed;

top: 0;

}

.mastfoot {

position: fixed;

bottom: 0;

}

/* Start the vertical centering */

.site-wrapper-inner {

vertical-align: middle;

}

/* Handle the widths */

.masthead,

.mastfoot,

.cover-container {

width: 100%; /* Must be percentage or pixels for horizontal alignment */

}

}

@media (min-width: 992px) {

.masthead,

.mastfoot,

.cover-container {

width: 700px;

}

}

a .fa:hover{

color: white;

}

/* HyperLink Style */

a:link {

color: #BF0A0A;

text-decoration: none;

}

a:visited {

color: #87CEEB;

text-decoration: none;

}

a:hover {

color: #780078;

text-decoration: none;

}

a:active {

color: #FF0000;

text-decoration: none;

}

/* End HyperLink Style */

这是当我在浏览器中打开index.html出现的唯一的事：