html - 我的 CSS 的某些部分不起作用-6ren

html - 我的 CSS 的某些部分不起作用

转载作者：太空宇宙更新时间：2023-11-03 23:22:06

HTML代码

<head>
    <title>Purdy designs</title>
    <link href="css/main.css" type="text/css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>


<body>
<header class="navbar-inverse" role="banner">
    <div class="container">
          <nav>
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    </div>
    </header>       





    <div class="jumbotron">
        <div class="container">

            <h1>
            Affordable website design packages from as low as &pound;199
            </h1>

            <p>
            Welcome to Purdy Website Design, If you need an affordable website to help you stand out from the crowd, you've come to the right place.
            </p>
        </div>
    </div>

    <div class="offer">
        <div class="container">
            <div class="row-fluid">
                 <div class="col-xs-4">
                    <div class="thumbnail">
                      <img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
                      <div class="caption">
                        <h3 class="text-center">Thumbnail 1</h3>
                        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                        Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row-fluid">
                  <div class="col-xs-4">
                    <div class="thumbnail">
                      <img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
                      <div class="caption">
                        <h3 class="text-center">Thumbnail 2</h3>
                        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                        Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                      </div>
                    </div>
                  </div>
                </div>



                <div class="row-fluid">
                  <div class="col-xs-4">
                    <div class="thumbnail">
                      <img src="http://dummyimage.com/242x200/f3f3f3/2d2d2d.png" alt="...">
                      <div class="caption">
                        <h3 class="text-center">Thumbnail 3</h3>
                        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                        Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                      </div>
                    </div>
                  </div>
                </div>
                </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </body>





-----CSS------

.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;

}

.nav li {
display: inline; 
}

 .offer { 
   background-color: #f7f7f7;
   padding-top: 0px;
   padding: 4px;


  }

  .body {

   }

  .thumbnail h3 {
   font-family: 'Shift', sans-serif;
   font-size: 18px;
   font-weight: bold;  
   }

   .thumbnail{
   width: 250px;
   height: 400px;
     overflow: auto;
     }

这是我的缩略图，只有我的 CSS 的某些部分有效。例如-

.thumbnail{
    width: 250px;
    height: 400px;
    overflow: auto;

}

此代码的所有部分都有效，但在其他区域时，例如这个 -

.thumbnail h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;

粗体和 18px 有效，但字体没有改变。其他部分也一样，比如这个——

.offer { 
  background-color: #f7f7f7;
  padding-top: 0px;
  padding: 4px;

有些部分不工作。有谁知道为什么？

代码打开链接:http://codepen.io/anon/pen/LEzdGg

最佳答案

您没有加载名为 Shift 的字体系列。您需要使用@font-face 加载字体，并在您的 css 中引用它。

这里有一些关于如何使用@font-face 加载字体的指南:

http://css-tricks.com/snippets/css/using-font-face/

.offer css 工作得很好，但是您在声明 0 padding-top 之后在所有四个边上声明了一个填充，所以您仍然在顶部有一个填充。最好将其重写为:

.offer {
    padding: 0 4px 4px; // Padding every side except top.

关于html - 我的 CSS 的某些部分不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28303294/

文章推荐： c - 错误 : declaration does not declare anything [-Werror]|

文章推荐： c# - 如何从 ResourceDictionary 设置 Button.Command？

文章推荐： c - 如何在qnx上获取进程内存

文章推荐： node.js - 在管道传输之前捕获 super 代理请求错误

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我的 CSS 的某些部分不起作用