米国の特別なプロジェクトの戦闘電力供給ネットワーク

プログラミング 2020-03-09 15:26:36 訪問数: null

まず、プロジェクトの説明、生産の頭部

1.米国の特殊なネットワークプロジェクト

プロジェクト名：US特別なネットワーク。

プロジェクトの説明：US特別な電力供給ネットワークは、詳細ページ、登録ページを作り、ホーム・ページ、リストページを完了するためのWebサイトです。

2.ディレクトリフォルダ

プロジェクトフォルダ：meitewang

スタイルクラスの画像フォルダ：IMG

スタイルフォルダ：CSS

アップロード：フォルダ商品画像

フォントクラスフォルダ：フォント

JS：フォルダスクリプト

スタイルファイル、CSSについて：①一般base.cssの初期化ステートメントで使用される、ブラウザスタイルの制服をしましょう。で共通、CSSの②パブリック・スタイル。

3.サイトICOアイコン

（1）使用ICOアイコン

  • まず、中アイコンfavicon.icoを  ルートディレクトリ （互換性のため）の下で。

  • index.htmlを内側、ヘッドとのコードに導入：

<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

（2）生産ICOアイコン

 プロフェッショナルウェブサイトのビット虫：http://www.bitbug.ne​​t/

4.ウェブサイトの最適化の3つのラベル

（1）タイトルウェブサイトのタイトル：US特別ネット - 総合オンラインショッピングの選択肢 - 本物の低コスト、品質保証、タイムリーな配信、簡単にお買い物！

（2）の説明サイトの説明：補足タイトル内のキーワードとしない完全に表現、<120ワード。

<meta name="description" content="美特MT.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

（3）キーワードのウェブサイトキーワード：6-8の言葉は、カンマで区切って指定します。

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,美特网" />

 5.フォントアイコン

役割：など、メッセージを小さなフォトサイトのショッピングカートの導入を減らすために、それはより便利な設定テキストに変換されます。

互換フォントパッケージをダウンロード：

①icomoonフォント：http://icomoon.io         

②アリフォント：http://www.iconfont.cn/

どのように使用するには：

①まず、フォントがにフォルダのルートディレクトリの次。

②<span>のアイコンフォント</ span>の内側のHTMLタグ内の構造を追加

③では  、スタイル の文フォント内部：あなたがフォントを定義テル誰か（フォントに注意を払う必要があります  ファイルパス の問題）

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

④フォントボックスを使用するには 

span {
		font-family: "icomoon";
	}

 アイコン追加フォント：圧縮された内部selection.json再アップロードは、それほど削除しないアーカイブを行います。

6.ホーム初期化

名前 説明
クイックナビゲーションバー ショートカット
ヘッド ヘッダ
マーク ロゴ
ショッピングカート shopcar
検索 探す
熱い言葉 hotwrods
ナビゲーション ではありません
左側のナビゲーション dorpdownは.DD .DTが含まれています
右ナビゲーション navitems

1）。ショートカット生産

  1. バナーは、サブボックスに継承できるショートカット迅速なナビゲーション、ここでは行の高さにノート、[名前]ボックス。
  2. 箱のコア部分を含んでいます
  3. 心のバージョンは、ボックス内のボックスは、フローティングのまま1備えるを残しました
  4. 右浮動右カセットを含むボックス内の心臓のバージョン2

2）。ヘッダー生産

  1. ヘッダボックスは高い学位を持っている必要があります
  2. 1番のボックスロゴ、シンボル位置であります
  3. 2検索モジュールの検索ボックスが配置されています
  4. ボックス3はhotwrodsに熱い言葉モジュールを配置されています
  5. 第4号shopcarボックス車車のモジュールであります
    1. 統計に絶対位置に関係する部分を数えます
    2. 可能性が高く、いくつかの作品を購入するため、統計の断面幅はカウントされませんので、その高さに気晴らし状片の数
    3. 私たちは、左下隅に注意を払う必要があり、残りの3つは、丸みを帯びた丸みを帯びたではありません

3）。ナビ生産

  1. NAVボックス上のバーと下のボーダー度が高いです
  2. DorpdownはDD DTドロップダウンナビゲーションの数が含まれている浮動ボックスを左に
  3. 図2に示すように、ナビゲーション右カセットフローティングnavitems基

7.ロゴ最適化

  1. まず、H1タグ内のロゴを入れて、目的は、この場所は非常に重要である検索エンジンを指示する権利を提供することです
  2. 代わりに、接続内のH1、あなたがロゴのサイズと背景画像を接続するには、ホームページに戻ることができます
  3. エンジンに私たちを検索するために、プット・テキスト（サイト名）に接続されて内部に、。しかし、テキストは表示されません。
    1. ボックス（テキストインデント：-9999px）の移動外部へのテキストのインデントの使用、その後オーバーフロー：隠された淘宝網の練習
    2. 直接フォントサイズ：0;テキスト、Jingdongの練習を見ることができません。
  4. 最後に、タイトルにこのロゴをマウスを接続するには、プロンプトのテキストを見ることができます

8.移行（CSS3）

トランジションアニメーション：それは徐々に一つの状態から別の状態への遷移であります

ページよりダイナミック、（次のバージョンIE9）をサポートしていないブラウザの低いバージョンを作ることができ、ページレイアウトには影響しません。

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

 

div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
			transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
			/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */
			width: 600px;
			height: 300px
}
transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

一般的な効果：

ボタンの背景画像は、モバイルキビ効果（シャドウ効果）Chuanzhiナビゲーションバーの効果などを変換します

II。ホームレイアウト指数

1.米国の特殊なレイアウトホーム

名前 説明
クイックナビゲーションバー ショートカット
ヘッド ヘッダ
マーク ロゴ
ショッピングカート shopcar
検索 探す
熱い言葉 hotwrods
ナビゲーション ではありません
左側のナビゲーション ドロップダウンは.DD .DTが含まれています
右ナビゲーション navitems
ページの一番下 フッター
ページのサービスモジュール底 mod_service
ページのヘルプモジュールの底 mod_help
ページモジュールの著作権下 mod_copyright

（1）ナビゲーション、ナビゲーションバー

  1. NAVボックス上のバーと下のボーダー度が高いです
  2. DD DTドロップダウンナビゲーションの数が含まれている左浮動ドロップダウンボックス 
  3. 図2に示すように、ナビゲーション右カセットフローティングnavitems基

（2）フッタの底

  1. 灰色の背景の高さにあるボックスのバナーページフッターの下
  2. 心の大規模なバージョン内の最初のフッター
  3. 1箱mod_serviceサービスモジュールモジュールモジュール手段が含まれている心のバージョン
  4. 2箱mod_helpヘルプモジュールが含まれている心のバージョン
  5. バージョン3に含ま心mod_copyright権利ボックスモジュール

（3）本体モジュール

プロプライエタリであるインデックスのこの部分、新しいスタイルのファイルindex.cssの必要性に注意を払います

  1. 980個のピクセル幅のメインボックス、マージン、左から左へ220は浮上を削除する必要はありません、のように。

  2. その図の左側メインボックスフローティングフォーカスフォーカスモジュールの左側を含有します。

  3. これは、右カセットメイン浮動右ニュース速報モジュールのニュース速報が含まれています

（4）ニュース速報ニュース速報モジュール

  1. 第1ボックスモジュールはニュースです
  2. 第2ボックスはlifeservice生活サービスモジュールであります
  3. バーゲンスペシャルに第3のボックス

（5）ニュースニュースモジュール

  1. ここでは、2つのモジュールに分割され、両方のモジュールは、div要素を使用することに注意してください
  2. 高さと下の境界線に第1のボックスニュースニュース-HDヘッドモジュール
  3. UL李が含まれているとのリンクがある第2箱のニュース-BDニューストピックのセクション

（6）lifeservice生活サービスモジュール

この場所は、先端であります

  1. ボックス250のlifeservice幅が開放されているが、小のLi 4の内部にインストールされていません
  2. UL幅252内部lifeservice 4時間李の下に設置することができることができます
  3. その上に隠された余分な部品オーバーフローlifeserviceボックス。

（7）が推奨モジュールをお勧めします

  1. これに浮き、2つのボックスが含まれています

  2. 1箱RECOM-HD

  3. 2メモボックスは、小さな縦の内側RECOM-BD

（8）床面積床

このフロアは、ない数の内容の高さに、オペレータの数を大きな箱が含まれていることに注意してください

（9）家電モジュール

  1. 書き込みスタイルに必要ではない。このモジュールjiadian
  2. 心のバージョンを中心に、我々は2つのボックス以下のこれらのスタイルを使用してモジュールは、以下の基本モジュールと同一であるためには名前が付けられます。
  3. ボックスHDボックスの高さに1号、左右2つのボックスに分割された下部境界を有しています
  4. 第2箱箱-BD Doが高さを与えていません。

（10）ボックス-HDモジュール

  1. 高度に
  2. ボックスH3の左側
  3. これがスイッチ効果に使用タブは、UL李を使用して行うので、タブリストとして命名権のdiv。

（11）ボックス、BDモジュール

  1. タブ切り替え原則::
  2.  また、ボックス内にラップするタブコンテンツの内容を要求すべきである5
  3. 図5に矛盾カラム幅大きいカラムに分割されています

 

III。、ページレイアウトリスト

（1）リスト作成

  1. リストページが新しいページで、我々はするlist.htmlを作成する必要があります

  2. ヘッドと、リストの一番下には基本的には同じページであるため、我々は、ヘッドの構造とコピー過去のホームページの下部を必要とします

  3. スタイルヘッドと、リストの一番下にも必要なので、するlist.htmlもcommon.cssを導入する必要がありますされます

  4. 同時に、新しいlist.cssファイルの必要性構造体の内部のようなコンテンツのみするlist.htmlを書かれているこのスタイルファイル、

（2）リストページヘッダとNAVを変更します

  1. 第二殺すために配置されたSKボックススパイク
  2. ランク1 sk_list左浮動ボックスLiおよびULを含みます
  3. sk_conのLiおよびULフローティング左ボックスを含む2号

（3）リストボックスSK _containerボディ

すべてのページのすべての主要なコンテンツのリストを含むボックス

  1. ない高さと幅のボックス1号1200年SKの_container
  2. 挿入ピクチャボックスsk_hdに2号
  3. ULおよびLiを多く含む第3 sk_bd箱

（4）sk_goods 

  1. この李我々名付けsk_goods
  2. A場所seckill_mod_goods_imgインサータ次ピクチャとピクチャヘッダを含む1は、スライドマウスに一枚の画像の効果に行うことができ
  3. 第2位のタイトルH5命名sk_goods_title
  4. divの名前のsk_goods_priceの価格のための第3位
  5. ここsk_goods_progressという名前第4位のdivが、私たちは、このナビゲーションバーを作成するためのコードの形をとっています
  6. 箱の周りの父のパディングが、我々は右の位置で、ここで持っているので、ここではsk_goods_buy注意をという名前のリンクとして第5位。

（5）生産ページページネーション

  1. ラインボックス内の我々はすべてのブロックをメモしてページ内のdiv要素の名前の最大のボックス
  2. 排出ラインは、スパンとブロックパターンに変換される（ページを意味する）セット名前番号1 PAGE_NUMカセット
  3. pn_prev前へ次へpn_next
  4. 入力ボタンノートを有するスパンpage_skip名前ボックス（ジャンプ転送手段をスキップ）と第2号

（6）がフォーカスを取得します

：要素ゲインフォーカスを選択するためのフォーカス擬似クラスセレクタ。私たちは、フォーム要素のために主にここにいます

.total input {
  border: 1px solid #ccc;
  height: 30px;
  width: 40px;
  transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
  width: 80px;
  border: 1px solid skyblue;
}

 

IV。詳細ページレイアウトの詳細

（1）一般的に使用される単語

名前 説明
主題 de_container
パン粉 crumb_wrap
プロダクト product_intro（導入・プレゼンテーション）
プレビューパック preview_wrap（左側部分）
プレビューサムネイル preview_img
プレビューリスト preview_list
左ボタン arrow_prev
右ボタン arrow_next
サムネール一覧 preview_items
商品の詳細エリア itemInfo_wrap（右部）
頭の名前 SKU_NAME頭蓋骨頭蓋骨
ニュース ニュース
概要 概要
評価します リマーク
料金の概要 summary_price
への配布 summary_stock
サポート summary_support
選択 選択
[選択]ボタングループ choose_btns
の数を選択します choose_amount
マイナス 減らします
カートに入れます addshopcar
商品の詳細 product_detail（詳細な説明）
左側 さておき
詳細な説明 ディテール

（2）パン粉

  1. crumb_wrapパン粉
  2. パン粉の起源についておとぎ話から派生語である：道の家を見つけることができません避けるために、彼らは道の場所に沿って歩いて、森の中をヘンゼルと解剖学パテル2人これは、これらのパン粉から自分の道の家を見つけるためにパン粉をキャストします。

（3）製品モジュール

  1. ボックス番号1という名前の製品モジュールこのモジュールproduct_intro（導入の説明）
  2. モジュールの高さが固定されていないため、このモジュールは、右の高さにコンテンツを与えてはいけません
  3. 2箱2及びボックス3にボックスがあります
  4. 幅と高さにボックス番号2 preview_wrapプレビュー領域、フローティング左
  5. 領域の幅はなく、浮動高さの左にあるボックス番号3 itemInfo_wrapの製品詳細

（4）プレビュー領域

  1. 画像内のpreview_img注意をという名前の画像プレビューボックスの1番、我々は、マップが398個の* 398個のピクセルのときカット
  2. 命名preview_listのリストをプレビューする第2箱

（5）preview_list 

  1. ボックスが残っていると右のボタンはarrow_prev arrow_nextに位置決めすることができます
  2. 中间 用 ul 命名为 list-item 给宽度和高度 然后 margin: 0 auto; 水平居中对齐即可

（6）产品详细信息区域 itemInfo_wrap

  1. 此盒子命名为 itemInfo

  2. 1 号盒子 为 头部 sku_name

  3. 2 号盒子 为 最新新闻 news

  4. 3号盒子 为 产品详细摘要 我们命名为 summary （摘要的意思） 之所以下面都是摘要部分，因为里面格式基本相同。

  5. 详细命名：
    名称 说明
    头部名称 sku_name skull 头骨
    新闻 news
    摘要 summary
    评价 remark
    价格摘要 summary_price
    促销摘要 summary_promotion
    配送至 summary_stock
    支持 summary_support
    选择 choose
    选择版本 choose_version
    选择类型 choose_type
    选择按钮组 choose_btns
    选择数量 choose_amount add 是加的意思
    减去 reduce cursor: not-allowed; 禁止符号
    加入购物车 addshopcar

 

（7）产品细节模块 product_detail

  1. 大盒子为 product_detail 模块 不要给高度 ，别忘记清除浮动
  2. 1号盒子 左侧浮动 命名为 aside 有宽度 不给高度
  3. 2号盒子 右侧浮动 命名为 detail 有宽度不给高度

（7.1） aside 布局

  1. 1 号盒子 命名为 tab_list 给高度就好了 ，里面 放 ul 和 li 注意这是 tab栏切换布局
  2. 2 号盒子 命名为 tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。

（7.2）detail 布局

  1. 1 号盒子 命名为 detail_tab_list 给高度就好了 ，里面 放 ul 和 li 注意这是 tab栏切换布局
  2. 2 号盒子 命名为 detail_tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。

（8）注册页面 register

名称 说明
注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default
Lyrelion
发布了8 篇原创文章 · 获赞 7 · 访问量 261
私信 关注

おすすめ

転載: blog.csdn.net/Lyrelion/article/details/104714491
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com