企業 Web サイトの詳細な導入例を共有する

このタスクを達成するには、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>
    <div></div>
</div>
<div>
    <div></div> 
    <a><button>再来一局</button></a>
    <a><button>上传分享</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>
放标签里头

而两外两段scritp不能乱顺序，放在

以上が企業 Web サイトの詳細な導入例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。