企業 Web サイトの詳細な導入例を共有する-htmlチュートリアル-php.cn

このタスクを達成するには、Twitter のフロントエンドフレームワークブートストラップを使用する必要があります。まずはPSD画像を置きます。

これらの写真をアップロードするのはかなり大変です。このために、Office Picture Manager を使用して画像を圧縮しました。

方法: alt+p+o、次に下のタブ+ボタンを押してWebページを選択し、保存をクリックしてOK

1つ。「年収 500,000」を含む PSD 静的ページを復元します

まず考えてください:

1. 3 つの PSD 画像の先頭と末尾の設定が同じであり、抽出して

g-header に作成できます。 g-content、g-footer

このネーミングは、私の他の記事「CSS スタイルの記述仕様 + 特殊記号」と一致しています。興味がある方は読んでみてください。

2.content の最初のページモジュールがカルーセルチャートであることがわかりました。これは、ブートストラップカルーセルチャートプラグインを通じて実装できます。

3.content のモジュール 2 ～ 6 が 1 行で複数のサブセットに分割されていることがわかりました。これはブートストラップグリッドシステムを通じて実現できます。

さて、マクロで考えるのはOKですが、ここで質問が来ます。

質問 1. フッターが「常に下に沈む」ようにするにはどうすればよいですか?

方法 1: css3 flex レイアウトを使用する

コアコードは次のとおりです:

html{height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*//*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/}body{display:flex;flex-direction:column;height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*//*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/}/*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/.g-header{flex:0 0 auto;
}.g-content{flex: 1 0 auto;/*将 flex-grow 设置为1，该元素会占用全部可使用空间*//*而其他元素该属性值为0，因此不会得到多余的空间*//* 1 flex-grow, 0 flex-shrink, auto flex-basis */}.g-footer{flex: 0 0 auto;
}

ログイン後にコピー

方法 2: 位置配置を使用する

.g-footer-f{position: fixed;bottom:0;width:100%;min-height: 5rem;/*此方法通过position固定在浏览器下方，但是以一种浮动在上层的效果出现的。*//*所以上一个紧挨的并列盒子，即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/ /*而这种特性也被用于实现footer底层样式透明，footer里的按钮不透明。*//*而实现内容不遮挡，只要在g-content的底部新增一个含高度的空div就完成。*/}<div class="g-content">
    <div class="pull-height"></div>
</div>
<div class="g-footer-f">
    <div class="footer-bg"></div> 
    <a href="test7-3.html"><button class="nav-fl bgfb">再来一局</button></a>
    <a href=""><button class="nav-fr bgf6">上传分享</button></a>
</div>

.footer-bg{height:5rem;/*只要再给一个层，然后给个跟父盒子一样高的高度就可以实现底层透明，上层不透明*/background:#29BDE0;filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;/*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/}.pull-height{height:5rem;
}

ログイン後にコピー

質問 2. 「ブートストラップカルーセル」を実装するにはどうすればよいですか?

Webstrom 上で新しいブートストラッププロジェクトを直接作成しましたが、問題も見つかりました。ブートストラップフレームワークをローカルに導入するコードがその機能を実現できませんでした。

最終的には外部リンクを使用することにしました

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css?1.1.11">
放</head>标签里头

而两外两段scritp不能乱顺序，放在</html>标签后
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js?1.1.11"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js?1.1.11"></script>

之所以放在末尾是防止这两段代码影响html初始加载的格局

ログイン後にコピー

さて、フレームワークをロードした後、カルーセルプラグインのコード形式は比較的固定されているので、覚えておいてください

コードは次のとおりです:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!--底部导航点。。。-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!--轮播广告内容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/test8-1/Image1.png">
        </div>
        <div class="item">
            <img src="img/test8-1/Image2.png">
        </div>
        <div class="item">
            <img src="img/test8-1/Image3.png">
        </div>
    </div>
    <!--左右箭头-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <pan class="sr-only">previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <pan class="sr-only">Next</span>
    </a>

ログイン後にコピー

しかし、私たちはこの最初の画像の実装に満足しているわけではありません。では、画像のテキストを ps_cc で実装するのはどうすればよいでしょうか

最初に考えたのは、「レイヤー位置の配置"

キーコード:

.s-pos-center{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}css作用于文字<span>盒子里，两个特点：1.不必知道“宽高度”。2.它是一种图层的形式覆盖在父盒子上，且无视兄弟姐妹盒子。

ログイン後にコピー

ちなみに、他の水平方向と垂直方向のセンタリング方法を確認して比較してください

最初の方法は、インラインとインラインの水平方向と垂直方向のセンタリングを実現することです。ブロック要素 (ミルクとゼリー) から text-align + line-height (ミルクとゼリー) まで

<style>
        .s-lineheight-center{text-align:center;line-height:300px;
        }.test{width:300px;height:300px;
        }.test{background:#5fc0cd;
        }.t-color-damage{background:pink;
        }</style>
</head>
<body>
<div class="test s-lineheight-center"><span class="t-color-damage">元素</span>
    <img src="img/test8-1/pic.png">
    <p>block元素</p>
</div>

ログイン後にコピー

結果は、CSS が親ボックスに適用され、子要素が水平方向と垂直方向の中央に配置されていることを示します。

特徴:

1. ボックスの高さが実際にはラインボックスと等しくなるように、高さの正確な値を知っている必要があります。親ボックスの中心線と重なる要素のラインは、親ボックスの上下のパディングを犠牲にすることで実現されるため、img 画像ではセンタリング効果が得られません

2。 3. 画像の p タグがテスト親ボックスから分離されています。 3. テキストの中心線が親ボックスの中心線に重なっています。

そのため、通常は 1 行のテキストで親ボックスの子要素を垂直方向に中央揃えするために使用されます

2 番目の方法は、table-cell+text-align + によって実現されます。

vertical-align: middle

クラス要素 (ミルク、ゼリー、ナッツ) の水平方向の垂直方向の中央揃え

<style>
        .s-lineheight-center{display:table-cell;text-align:center;vertical-align: middle;
        }.test{width:200px;height:400px;
        }.test{background:#5fc0cd;
        }.t-color-damage{background:pink;
        }</style>
</head>
<body>
<div class="test s-lineheight-center">
    <span class="t-color-damage">元素</span>
    <img src="img/test8-1/pic.png">
    <p>block元素</p>
    <span>inlink</span>
</div>

ログイン後にコピー

这种方法也是作用于父盒子div，通过三个css规范子元素位置。

特点：

1。高度调小时，子元素自适应高度，而且它本身有一个最小高度存在。同时父盒子的块元素虽然会换行，但是不会离开父盒子。（感觉宽高影响不大，不知道要不要高度。暂时是元素的内容宽高）

2。关于img居中的问题：（1。单独img时，可以实现水平垂直居中。2。img+快元素如p为子元素时，会以他们两的高的中线叠加在父盒子div的中线上。所以一般的书本+书名可以用这种方法实现。3。img+行内元素为子元素时，会以他们两的宽度的中线水平在父盒子div的中线上。行内元素的底线重叠img底线。效果就是文字位于img左下角或右下角。

第三种，通过display：flex+jc+ai 实现三类元素的水平垂直居中（牛奶，果冻，坚果）

<br>

ログイン後にコピー

<title>水平居中</title>
    <style>
        .s-lineheight-center{
          display:flex;
          justify-content: center;
          align-items: center;
        }
        .test{
            width:200px;
            height:400px;
        }
        .test{
            background:#5fc0cd;
        }
        .t-color-danger{
            background:pink;
        }
        .t-height-primary{
            height:100px;
        }

    </style>
</head>
<body>
<div class="test s-lineheight-center">
    <span class="t-color-danger">元素</span>
    <img src="img/test8-1/pic.png">
    <p class="t-height-primary">block元素</p>
    <span>inlink</span>
</div>

ログイン後にコピー