Question

目前正致力于将网页添加到网站，我想要做的是在我的网站上以HTML格式显示框。

我查看过HTML和CSS，格式，语法等似乎没有任何问题。所以，我的问题是为什么不出现这些框？

我正在尝试做类似这里的事情： CodePen Example .

这是我的HTML＆amp;页面的CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Projects</title>

    <!-- Custom styles for this template -->
    <link href="css/main.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
      <div class="inner">
        <h3 class="masthead-brand">FV4</h3>
          <ul class="nav masthead-nav">
            <li class="active"><a href="#">About Me</a></li>
            <li class="active"><a href="#">Contact</a></li>
            <li class="active"><a href="#">Projects</a></li>
          </ul>
      </div>

    <div class="mainContent">

      <div class="box">
        <h2>Title 1</h2>
        <p>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.</p>
      </div>

      <div class="box">
        <h2>Title 2</h2>
        <div class="box-banner"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <div class="box">
        <h2>Title 3</h2>
        <p>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.</p>
      </div>

      <div class="box">
        <h2>Title 4</h2>
        <div class="box-banner"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <div class="box">
        <h2>Title 5</h2>
        <p>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.</p>
      </div>

      <div class="box no-text">
        <h2>Title 6</h2>
        <div class="box-banner"></div>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <script src="../../scripts/scripts.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Website CSS

/*
 * 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时出现的唯一内容： Screenshot

Answer 1

您是否尝试从opacity:0 css中删除.box？

http://codepen.io/anon/pen/EaopWv

.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;*/
}

Answer 2

我使用附加的HTML和CSS文件运行代码。问题是css文件。在第27行的.box css声明中，不透明度设置为0，因为哪些框不可见。将其更改为1并再次运行代码。

有关Opacity CSS的更多信息： http://css-tricks.com/almanac/properties/o/opacity/

如何使用Divs使用HTML格式显示框？

2 个答案: