US special project combat electricity supplier network

First, the project description, the head of production

1. US special network Projects

Project Name: US special network.

Project Description: US special electricity supplier network is a Web site to complete the home page, list page, making details page, registration page.

2. directory folder

Project Folder: meitewang

Style class picture folder: img

Style folders: css

Product Image folder: upload

Font class folder: fonts

Scripts folder: js

About Style File css: ① let browser-style uniform, commonly used in the initialization statement on base.css. ② public styles in common, css in.

3. Site ico icon

(1) Use ico icon

• First, the icon favicon.ico into the  root directory  under (for compatibility).

• index.html inside, between the head introduced into the code:

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

(2) Production ico icon

 Professional website bits insects: http://www.bitbug.net/

4. Website Optimization three labels

(1) title Website title: US special net - Comprehensive online shopping choice - genuine low-cost, quality assurance, timely delivery, easy shopping!

(2) description Website Description: Supplement keywords in the title and not fully expressed, <120 words.

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

(3) Keywords website Keywords: 6-8 words, separated by commas.

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

 5. font icon

Role: to reduce the introduction of a small photo site shopping cart, messages, etc., it will be converted to text setting more convenient.

Download compatible font package:

①icomoon font : http://icomoon.io         

② Ali font: http://www.iconfont.cn/

Instructions:

① First, the fonts folder into the root directory of the next.

② add structure within html tags inside <span> icon font </ span>

③ In the  style  statement font inside: Tell someone you define the font (must pay attention to the font  file path  issues)

@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;
}

④ to use the font box 

span {
		font-family: "icomoon";
	}

 Additional Fonts icon: the compressed inside selection.json re-upload, so do not delete archive.

6. Home initialization

name	Explanation
Quick Navigation Bar	shortcut
head	header
Mark	logo
shopping cart	shopcar
search for	search
Hot words	hotwrods
navigation	are not
The left navigation	dorpdown contains .dd .dt
Right navigation	navitems

1). Shortcut Production

1. Banner box named shortcut quick navigation, note here to the row height, which can be inherited to the sub-box.
2. Which contains the core part of the box
3. Version of the heart left inside the box 1 comprises a box left floating
4. Version of the heart inside the box comprising a right floating right cassette 2

2). Header production

1. header box must have a high degree
2. No. 1 box logo is a symbol positioning
3. 2 search module search box is positioned
4. Box 3 is positioned hotwrods hot words module
5. No. 4 is shopcar box car car module
   1. count statistics part to do with the absolute positioning
   2. Do not count statistics section width, because more likely to buy a few pieces, so that the number of pieces like a distraction to a height
   3. We must pay attention to the lower left corner and the remaining three are not rounded rounded

3). Nav production

1. nav bar on the box and there is a high degree of bottom border
2. Dorpdown left floating box which contains a number of drop-down navigation dt dd
3. 2, the navigation right cassette floating navitems group

7. logo Optimization

1. First, put a logo inside h1 tags, the purpose is to provide the right to tell the search engine, this place is very important
2. h1 inside a connection in place, you can return to the home page, to connect a logo size and background image
3. Connected inside to put text (site name), in order to search engines us. But the text do not show up
   1. Use text-indent to move outside of the box (text-indent: -9999px) then overflow: hidden Taobao practice
   2. Directly to the font-size: 0; you can not see the text, Jingdong practice.
4. Finally, to connect a mouse to the title this logo, you can see the prompt text

8. Transition (CSS3)

Transition animation: It is gradually transition from one state to another state

Can make the page more dynamic, low version of the browser does not support (ie9 following versions) will not affect the page layout.

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 就可以了  后面俩个属性可以省略 */

Common effects:

Button background picture transform mobile millet effect (shadow effects) Chuanzhi navigation bar effects, etc.

II. Home layout index

1. US special layout Home

name	Explanation
Quick Navigation Bar	shortcut
head	header
Mark	logo
shopping cart	shopcar
search for	search
Hot words	hotwrods
navigation	are not
The left navigation	dropdown contains .dd .dt
Right navigation	navitems
Bottom of the page	footer
Service Module bottom of the page	mod_service
Help Module bottom of the page	mod_help
Copyright bottom of the page module	mod_copyright

(1) nav navigation bar

1. nav bar on the box and there is a high degree of bottom border
2. Left floating dropdown box which contains a number of drop-down navigation dt dd 
3. 2, the navigation right cassette floating navitems group

(2) the bottom of footer

1. banner page footer bottom of the box to a height of gray background
2. First footer inside a large version of the heart
3. Version of the heart which contains 1 box mod_service service module module module means
4. Version of the heart which contains 2 boxes mod_help help module
5. Version 3 contained heart mod_copyright Rights box module

(3) main body module

This part of the index which is proprietary, pay attention to the need for new style file index.css

1. main box width 980 pixels, 220 to the left from a margin-left like, do not need to remove the floating height.

2. which contains the left of the left main box floating focus focus module of FIG.

3. which contains the right cassette main floating right breaking news module newsflash

(4) newsflash Newsflash Module

1. No. 1 box module is news News
2. No. 2 box is lifeservice life service module
3. No. 3 box to bargain Specials

(5) news news module

1. Note that here we is divided into two modules, both modules use div
2. No. 1 box News news-hd head module to a height and bottom border
3. No. 2 box news-bd news topics section which contains ul li and there are links

(6) lifeservice life service module

This place is a tip,

1. lifeservice width of the box 250 is open, but not installed inside the small li 4
2. Allows lifeservice inside ul width 252 can be installed in under four hours li
3. lifeservice box overflow hidden extra parts on it.

(7) recommend recommendation module

1. Which contains two boxes, floating to

2. 1 box recom-hd

3. 2 note box recom-bd inside small vertical

(8) floor area floor

Note that this floor contains a large box, not to the height of the contents of the number, the number of operators

(9) the home appliance module

1. This module jiadian not need to write style
2. Centered version of the heart because the modules are identical, the following basic modules so we use these styles following two boxes are named:
3. No. 1 to a box-hd box height, has a lower border which is divided into two right and left boxes
4. No. 2 box box-bd Do not give height.

(10) box-hd module

1. Highly
2. The left side of the box h3
3. The right div named as tab-list because use tab to switch effect, so there use ul li and do.

(11) box-bd module

1. tab switching principles ::
2.  It should also require the contents of a tab-content to wrap inside the box 5
3. 5 is divided into a large column width inconsistent column

 

III., Page Layout list

(1) List preparation

1. List page is a new page, we need to create list.html

2. Because the head and the bottom of the list are basically the same page, we need the structure of the head and the bottom of the home page of the copy past

3. Style head and the bottom of the list is also required, and therefore list.html also need to introduce common.css

4. At the same time the need for new list.css file this style file, which is written only content list.html like structure inside

(2) modify the list page header and nav

1. Sk box spike positioned to second kill
2. No. 1 which contains sk_list left floating box li and ul
3. No. 2 which contains the left box floating sk_con li and ul

(3) List box sk _container body

The box which contains a list of all the main content of all pages

1. Box No. 1 1200 sk _container not to height to width
2. No. 2 to the Insert Picture box sk_hd
3. No. 3 sk_bd box which contains a lot of ul and li

（4）sk_goods 

1. This li we named sk_goods
2. A Location 1 comprising the following pictures and picture header inserter seckill_mod_goods_img can be done on the effect of one image into the slide mouse
3. No. 2 position title H5 named sk_goods_title
4. No. 3 position for the price of div named sk_goods_price
5. No. 4 position div named sk_goods_progress here, we have taken the form of code to write this navigation bar
6. No. 5 position as a link named sk_goods_buy attention here, because the Father padding around the box we have here with the right positioning.

(5) Production page pagination

1. The biggest box we named div inside page with a note of all the blocks within the line box
2. No. 1 The page_num cassette named set (meaning page) to which a discharge line is converted to a block pattern with the span
3. pn_prev Previous Next pn_next
4. No. 2 with a box named span page_skip (skip jump transfer means) which has input and button Note

(6) get focus

: Focus pseudo-class selector for selecting the element gains focus. We are here mainly for form elements

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

 

IV. Details page layout details

(1) commonly used words

name	Explanation
main body	de_container
Breadcrumbs	crumb_wrap
product description	product_intro (introduction presentation)
Preview Pack	preview_wrap (left side portion)
Preview Thumbnails	preview_img
Preview list	preview_list
Left button	arrow_prev
Right button	arrow_next
Thumbnail list	preview_items
Product Details area	itemInfo_wrap (right portion)
Head name	sku_name skull skull
news	news
Summary	summary
Evaluation	remark
Rate Summary	summary_price
ship to	summary_stock
stand by	summary_support
select	choose
Select button group	choose_btns
Select the number of	choose_amount
minus	reduce
add to Shopping Cart	addshopcar
product details	product_detail (detail description)
The left side	aside
Detailed Description	detail

(2) breadcrumbs

1. crumb_wrap breadcrumbs
2. About the origin of breadcrumbs is a word derived from a fairy tale: Hansel and Anatomy Patel two people through the forest, in order to avoid not find the way home, they walked along the way places It will cast bread crumbs in order to find their way home from these crumbs.

(3) Products Module

1. Box No. 1 named product module This module product_intro (introduction description)
2. This module Do not give content to the right height because the module height is not fixed
3. 2 there is a box into the box 2 and box 3
4. Box No. 2 preview_wrap preview area to the width to height, left floating
5. Box No. 3 itemInfo_wrap product details to the width of the region, not to the left of the floating height

(4) preview area

1. No. 1 for the image preview box named preview_img attention inside the picture, we cut when the map is 398 * 398 pixels
2. No. 2 box to preview the list of named preview_list

（5）preview_list 

1. Box has left and right buttons can be positioned with 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