DAY 11 | 自学前端第十一天

PC端品优购项目

一、品优购项目规划

1.1网站制作流程

客户沟通制定方案
签订合同
预付定金——一般总额30%左右
初稿审核（网页美工制作原型图和 psd效果图）
前端人员页面设计后端人员功能开发——前后端分离
测试验收
上线培训
后期维护（一般半年到一年，bug修复&模块稍微改动）

一般有项目经理全程把控

1.2 品优购项目整体介绍

电商网站，学习PC端首页、列表页、注册页的制作

1.3品优购项目学习目的

了解常用布局；
复习，总结，提高学过的布局技术；
对实际开发中制作PC端页面流程有一个整体的感知；
为学习移动端项目做铺垫。

1.4 开发工具以及技术栈

开发工具：VScode、photoshop、Chrome浏览器
技术栈：HTML5+CSS3；结构样式分离，模块化开发；代码规范

1.5 品优购项目搭建工作

需要创建以下文件夹：

shopping项目文件夹
images样式图片文件夹（不经常更换的）
upload产品类图片文件夹（可能会定期更换的）
css样式文件夹
fonts字体文件夹
js脚本文件夹

首页创建如下文件：

index.html 首页
base.css CSS初始化样式文件 box-sizing: border-box
common.css CSS公用样式文件

列表页创建如下文件：

list.html
list.css

注册页创建如下文件：

模块化开发：

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独做一个模块，重复使用；
common.css公共样式。写好一个样式，其他页面用相同样式；
模块化开发可以重复性使用，修改方便。

1.6 网站favicon图标

favicon.ico 网站标志。

制作favicon图标
favicon图标放到网站根目录下(shopping下)
HTML页面引入favicon图标

<link rel="shortcut icon" href="favicon.ico" />

制作favicon图标

把品优购图标切成PNG图片；
用比特虫把PNG转换为ico图标

1.7 网站TDK三大标签SEO优化

SEO优化：搜索引擎优化，迎合搜索引擎排名规则，提高网站排名。公司一般有专门的SEO人员

页面必须有三个标签来符合SEO优化：title / description / keywords

1. title 网站标题

建议：网站名（产品名）-网站的介绍（尽量不超30字）

例如：京东（JD.COM）- 正品低价、品质保障、配送及时、轻松购物！

2.description 网站说明

“我们是...”“我们提供....”“电话：010....”之类的

3.keywords 关键字

6-8个关键字，英文逗号分割，最好的产品往前写

二、品优购首页制作

2.1常用模块命名

快捷导航栏——shortcut
标志——logo
头部——header
购物车——shopcar
搜索——search
热点词——hotwords
导航——nav
导航左侧——dropdown包含dd dt
导航右侧——navitems
页面底部——footer
页面底部服务模块——mod_service
页面底部帮助模块——mod_help
页面底部版权模块——mod_copyright

2.2 快捷导航栏shortcut制作

通栏——版心——左浮动右浮动
fl——ul>li>a
空格 
公共类名的调用style_red
fr——小竖线是设置成宽度1px的even li，margin值布局
伪元素字体图标arrow-icon、fonts文件夹、字体声明css路径

2.3 头部header制作

版心header——logo、search、hotwords、shopcar

LOGO SEO优化：

logo里放一个h1标签；（提高权重）
h1里放一个a标签，路径可以返回首页的，a标签设置logo的背景图片；转成块级设置宽高
链接里要放文字（网站名称），但文字不要显示出来；text-indent:-9999px，overflow-hidden；font-size:0;
最后给链接一个title属性，这样鼠标放在logo上可以看到提示文字。

search

大边框盒子search包含两个小盒子input search（placeholder）和button

2.4 nav导航制作

只有下边框的大盒子——版心——浮动的两个盒子dropdown和navitems
dropdown 下拉栏要写dt dd
给块级化的a标签padding值，可以扩大选中范围

2.5 footer底部制作

通栏——版心——上中下三个盒子 mod_service、mod_help、mod_copyright
mod_service 下边框——ul>li——图标h5精灵图——div (h4 p)
mod_help下边框——dl>dt>dd>a——dl浮动
mod_copyright

2.6 main主体模块制作

main主体模块是index里面专有的，注意需要新的样式文件index.css。
版心——main盒子——两个盒子focus、newsflash
newsflash——news（hd bd）、lifeservice（ul>li）字体图标i、bargin

2.7推荐模块recom制作

版心——左右两个盒子
左hd——img p
右bd——ul>li

2.8楼层区floor 制作

楼层区没有高度
一楼——版心——hd（h3、tab_list-ul>li）
Tab栏原理——布局需求——tab_content-tab_list_item

三、品优购列表页制作

3.1 准备工作

list.html
列表页头部尾部基本一致，去首页将头尾结构复制过来
头尾样式也需要，list.html引入common.css
list.css

3.2 列表页header和nav修改

秒杀 sk 绝对定位
nav——版心——sk_list（ul>li>a）——sk_con（ul>li>a）

四、品优购注册页制作

4.1 注册页命名

register.html ——注册页面比较隐私，不需要对当前页面进行SEO优化
注册专区——registerarea
注册内容——reg-form
错误的——error
成功的——success
默认的——default

4.1 注册页布局

头部 header——div-logo
主体 registerarea——h3-div——reg_form-form>ul>li（label input span i）
底部 footer

五、代码

5.1 base.css:

/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* CSS3盒子模型 */box-sizing: border-box;
}/* 斜体文字不倾斜 */
em,
i {font-style: normal;
}/* 去掉li的小圆点 */
li {list-style: none;
}img {/* border 0 照顾低版本浏览器 如果 图片外边包含了链接 会有边框的问题 */border: 0;/* 取消图片底端有空白间隙的问题 */vertical-align: middle;
}button {/* 鼠标经过按钮时变成小手 */cursor: pointer;
}a {color: #666;text-decoration: none;
}a:hover {color: red;
}button,
input {/* \5BBB\4F53是宋体的意思，这样浏览器兼容性比较好 */font-family: Microsoft YaHei, heiti SC, tahoma, arial, hiragino sans gb, "\sbbb\4f53";/* 默认有灰色边框，我们需要手动去掉 */border:0;outline: none;
}body {/* CSS3属性，抗锯齿性，让文字放大显示更清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;/* 1.5倍行高 */font: 12px/1.5 microsoft yahei, heiti SC, tahoma, arial, hiragino sans gb;color: #666;
}.hide,
none {display: none;
}/* 清除浮动 */
.clearfix:after {/* 溢出隐藏，位置保留 */visibility: hidden;clear: both;display: block;content: ".";height: 0;
}.clearfix {*zoom: 1
}

5.2 common.css :

/* 声明字体图标  这里一定要注意路径变化！ */
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?no40lt');src:  url('../fonts/icomoon.eot?no40lt#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?no40lt') format('truetype'),url('../fonts/icomoon.woff?no40lt') format('woff'),url('../fonts/icomoon.svg?no40lt#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}
/* 版心 */
.w {width: 1200px;margin: auto;
}
.fl {float: left;
}
.fr {float: right;
}
.style_red {color: #c81623;
}
/* 快捷导航模块 start*/
.shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1;font-size: 12px;
}
.shortcut ul li {float: left;
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;margin: 9px 15px 0;background-color: #666;
}
.arrow-icon::after {margin-left: 10px;content: '\f107';font-family: 'icomoon';
}
/* 快捷导航模块 end*//* header头部模块 start */.header {position: relative;height: 105px;}
.logo {position: absolute;top: 25px;width: 171px;height: 61px;
}
.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;/* 文字隐藏——京东的做法 *//* font-size: 0; *//* 文字隐藏——淘宝做法 */text-indent: -9999px;overflow: hidden;
}
.search {position: absolute;top: 25px;left: 348px;width: 540px;height: 38px;border: 2px solid #b1191a;
}
.search input {float: left;width: 456px;height: 34px;padding-left: 10px;background-color: #fff;
}
.search button {float: left;width: 80px;height: 34px;background-color: #b1191a;font-size: 16px;color: #fff;
}
.hotwords {position: absolute;top: 70px;left: 348px;
}
.hotwords a {margin: 0 10px;
}
.shopcar {position: absolute;top: 25px;right: 65px;width: 140px;height: 36px;line-height: 36px;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.shopcar::before {margin-left: 20px;content: '\f07a';font-family:'icomoon';color: #b1191a;
}
.shopcar::after {margin: 0 15px;content: '\f105';font-family:'icomoon';
}
.count {position: absolute;top: -5px;/* 右对齐的话 数字转向是反向 */left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #b1191a;padding: 0 5px;border-radius: 7px 7px 7px 0;
}
/* header 模块 end */
/* nav 模块 start  */
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}
.dropdown .dt {width: 100%;height: 100%;line-height: 45px;text-align: center;color: #fff;font-size: 16px;
}
.dropdown .dd {/* display: none; */width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}
.dropdown ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;color: #fff;
}
.dropdown ul li::after {position: absolute;right: 15px;font-family: 'icomoon';content: '\f105';
}
.dropdown ul li:hover {background-color: #fff;
}
.dropdown ul li:hover a {color: #c81623;
}
.dropdown ul li a {font-size: 14px;color: #fff;
}
.nav .navitems {float: left;
}
.navitems ul li {float: left;
}
.navitems ul li a {display: block;height: 45px;line-height: 45px;padding: 0 25px;font-size: 16px;
}
/* nav模块 end *//* footer 区域 start */
.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}
.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}
.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px;
}
.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -253px -2px;margin-right: 8px;
}
.service_txt h4 {font-size: 14px;
}
.service_txt p {font-size: 12px;
}
.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}
.mod_help dl {float: left;width: 200px;
}
.mod_help dl:last-child {width: 90px;text-align: center;
}
.mod_help dl dt {font-size: 16px;
}
.mod_help dl dd {font-size: 10px;
}
.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a {padding: 15px;
}
.copyright {line-height: 20px;
}
/* footer 区域 end */

5.3 index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购商城 - 正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明，一般ico人员来写 --><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><!-- 关键字，一般ico人员来写 --><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入css初始化 --><link rel="stylesheet" href="css/base.css"><!-- 引入css共同样式 --><link rel="stylesheet" href="css/common.css"><!-- 引入index.css --><link rel="stylesheet" href="css/index.css">
</head><body><!-- 快捷导航栏模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a>&nbsp;&nbsp;<a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li></li><li class="arrow-icon"><a href="#">我的品优购</a></li><li></li><li><a href="#">品优购会员</a></li><li></li><li><a href="#">企业采购</a></li><li></li><li class="arrow-icon"><a href="#">关注品优购</a></li><li></li><li class="arrow-icon"><a href="#">客户服务</a></li><li></li><li class="arrow-icon"><a href="#">网站导航</a></li></ul></div></div></section><!-- 快捷导航栏模块 end --><!-- header头部模块 start --><header class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords模块 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar"><a href="#">我的购物车</a><i class="count">8</i></div></header><!-- header头部模块 end --><!-- nav模块 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a> </li><li><a href="list.html">手机、数码、通信</a></li><li><a href="#">电脑、办公</a></li><li><a href="#">家居、家具、家装、厨具</a></li><li><a href="#">男装、女装、童装、内衣</a></li><li><a href="#">个户化妆、清洁用品、宠物</a></li><li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li><li><a href="#">运动户外、钟表</a></li><li><a href="#">汽车、汽车用品</a></li><li><a href="#">母婴、玩具乐器</a></li><li><a href="#">医药保健</a></li><li><a href="#">图书、音像、电子书</a></li><li><a href="#">食品、酒类、生鲜、特产</a></li><li><a href="#">彩票、旅行、充值、票务</a></li><li><a href="#">理财、众筹、白条、保险</a></li></ul></div></div><div class="navitems"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆城</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul></div></div></nav><!-- nav模块 end --><!-- 首页main模块制作 start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="Newsflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news-bd"><ul><li><a href="#"><strong>[重磅]</strong>备战开学季&nbsp;全民半价购数码</a></li><li><a href="#"><strong>[重磅]</strong>备战开学季&nbsp;全民半价购数码全民半价购数码全民半价购数码全民半价购数码</a></li><li><a href="#"><strong>[重磅]</strong>备战开学季&nbsp;全民半价购数码</a></li><li><a href="#"><strong>[重磅]</strong>备战开学季&nbsp;全民半价购数码</a></li><li><a href="#"><strong>[重磅]</strong>备战开学季&nbsp;全民半价购数码</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- 首页main模块制作 end --><!-- recom 模块 start --><div class="recom w"><div class="recom_hd"><img src="data:images/clock.png" alt=""><p>今日推荐</p></div><div class="recom_bd"><ul><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li></ul></div></div><!-- recom 模块 end --><!-- favitems 猜你喜欢模块 start --><div class="favitems w"><div class="favitems_hd"><h3> 猜你喜欢</h3><a href="#">换一批</a></div><div class="favitems_bd"><ul><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li><li><img src="upload/fav.png" alt=""><div class="price"><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span>&yen;116.00</span></div></li></ul></div></div><!-- favitems 猜你喜欢模块 end --><!-- 楼层区 floor 制作 start --><div class="floor"><!-- 1楼家电 --><div class="jiandian w"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">热门</a>|</li><li><a href="#"> 大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li></ul><a href="#"><img src="upload/floor_1.png" alt=""></a></div><div class="col_328"><a href="#"><img src="upload/floor_02.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor_03.png" alt=""></a><a href="#"><img src="upload/floor_10.png" alt=""></a></div><div class="col_220"><a href="#" class="br"><img src="upload/floor_05.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor_04.png" alt=""></a><a href="#"><img src="upload/floor_12.png" alt=""></a></div></div></div></div></div><!-- 2楼手机 --><div class="shouji w"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">热门</a>|</li><li><a href="#"> 大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li><li><a href="#">节能补贴</a></li></ul><a href="#"><img src="upload/floor_1.png" alt=""></a></div><div class="col_328"><a href="#"><img src="upload/floor_02.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor_03.png" alt=""></a><a href="#"><img src="upload/floor_10.png" alt=""></a></div><div class="col_220"><a href="#" class="br"><img src="upload/floor_05.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor_04.png" alt=""></a><a href="#"><img src="upload/floor_12.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区 floor 制作 end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><img src="data:images/wx_cz.jpg" alt="">品优购客户端</dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> |<a href="#">商家入驻</a> | <ahref="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | EnglishSite | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100邮箱:zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end -->
</body></html>

5.4 index.css:

/* main 模块 start */
.main {width: 980px;height: 455px;margin-top: 10px;margin-left: 220px;
}
.focus {float: left;width: 720px;height: 455px;
}
.Newsflash {float: right;width: 250px;height: 455px;
}
.news {height: 165px;border: 1px solid #e4e4e4;
}
.news-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}
.news-hd h5 {float: left;
}
.news-hd .more {float: right;
}
.news-hd .more::after {content: '\f105';font-family: 'icomoon';padding-left: 5px;
}
.news-bd {padding: 5px 15px 0;
}
.news-bd ul li {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 24px;line-height: 24px;
}
.lifeservice {overflow: hidden;height: 210px;border: 1px solid #ccc;border-top: 0;
}
.lifeservice ul {width: 252px;
}
.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}
.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;background-color: pink;margin-top: 12px;background: url(../images/icons.png) no-repeat -19px -15px;
}
.bargain {margin-top: 5px;
}
/* main 模块 end */
/* recom 模块 start */
.recom {height: 164px;margin-top: 10px;background-color: #ebebeb;
}
.recom_hd {float: left;width: 206px;height: 164px;background-color: #5c5251;text-align: center;
}
.recom_hd img {margin: 32px 0 10px;
}
.recom_hd p {font-size: 18px;color: #fff;
}
.recom_bd {float: left;
}
.recom_bd ul li {position: relative;float: left;
}
.recom_bd ul li img {width: 248px;height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {content: '';position: absolute;top:10px;right: 1px;width: 1px;height: 145px;background-color: #ddd;
}
/* recom 模块 end */
/* favitems 猜你喜欢模块 start */
.favitems {margin-top: 20px;height: 275px;
}
.favitems_hd {height: 40px;line-height: 40px;font-size: 18px;
}
.favitems_hd h3 {float: left;font-weight: 400;padding-left: 2px;
}
.favitems_hd a {float: right;padding-right: 3px;
}
.favitems_bd {height: 230px;border: 1px solid #ccc;
}
.favitems_bd ul li {display: inline-block;width: 160px;height: 200px;margin: 20px;
}
.favitems_bd ul li:last-child{margin:20px 0px 15px 20px;
}
.favitems_bd ul li img {text-align: center;
}
.favitems_bd .price {padding: 0 15px;
}
.favitems_bd ul li span {font-size: 18px;color: red;
}
/* favitems 猜你喜欢模块 end */
/* 楼层区 floor 制作 start */
.floor .w{margin-top: 30px;margin-bottom: 40px;
}
.box_hd {height: 28px;border-bottom: 2px solid #c81623;
}
.box_hd h3 {float: left;font-size: 18px;color: #c81623 ;font-weight: 400;
}
.box_hd .tab_list {float: right;line-height: 28px;
}
.box_hd .tab_list ul li {float: left;
}
.box_hd .tab_list ul li a {padding: 0 15px;
}
.box_bd {height: 360px;
}
.tab_list_item>div {float: left;
}
.col_210 {width: 210px;height: 360px;background-color: #f9f9f9;text-align: center;
}
.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;line-height: 33px;text-align: center;margin-right: 10px;
}
.col_210 ul {padding-left: 12px;
}
.col_210 img {margin-top: 27px;
}
.col_328 {width: 328px;
}
.col_221 {width: 221px;background-color: #fff;border-right: 1px solid #ccc;
}
.col_220 {width: 220px;border-right: 1px solid #ccc;
}
.bb {display: block;border-bottom: 1px solid #ccc;
}
/* 楼层区 floor 制作 end */

5.5 list.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表页 - 正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明，一般ico人员来写 --><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><!-- 关键字，一般ico人员来写 --><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷导航栏模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a>&nbsp;&nbsp;<a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li></li><li class="arrow-icon"><a href="#">我的品优购</a></li><li></li><li><a href="#">品优购会员</a></li><li></li><li><a href="#">企业采购</a></li><li></li><li class="arrow-icon"><a href="#">关注品优购</a></li><li></li><li class="arrow-icon"><a href="#">客户服务</a></li><li></li><li class="arrow-icon"><a href="#">网站导航</a></li></ul></div></div></section><!-- 快捷导航栏模块 end --><!-- header头部模块 start --><header class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 列表页秒杀模块 --><div class="sk"><img src="data:images/sk.png" alt=""></div><!-- search模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords模块 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar"><a href="#">我的购物车</a><i class="count">8</i></div></header><!-- header头部模块 end --><!-- nav模块 start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优秒杀</a></li><li><a href="#">即将售罄</a></li><li><a href="#">超值低价</a></li></ul></div><div class="sk_con"><ul><li><a href="#">女装</a></li><li><a href="#" class="style_red">女鞋</a></li><li><a href="#">男装 </a></li><li><a href="#">男鞋</a></li><li><a href="#">母婴童装</a></li><li><a href="#">食品</a></li><li><a href="#">智能数码</a></li><li><a href="#">运动户外</a></li><li><a href="#">更多分类</a></li></ul></div></div></nav><!-- nav模块 end --><!-- 列表页主体模块 sk_container start --><div class="w sk_container"><div class="sk_hd"><img src="upload/sk_hd.png" alt=""></div><div class="sk_bd"><ul><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li><li><div class="tu"><img src="upload/sk_bd.png" alt=""></div><div class="text"><p>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</p><div class="price"><span class="style_red">&yen;6088</span> <span class="del">&yen;6988</span></div><div class="jindutiao">已售87%<div class="bar"><div class="bar_in"></div></div>剩余<strong class="style_red">29</strong>件</div></div><button>立即抢购</button></li></ul></div></div><!-- 列表页主体模块 sk_container end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><img src="data:images/wx_cz.jpg" alt="">品优购客户端</dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> |<a href="#">商家入驻</a> | <ahref="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | EnglishSite | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100邮箱:zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end -->
</body></html>

5.6 list.css:

/* 列表页专用css */
/* 秒杀模块 */
.sk {position: absolute;left: 185px;top: 40px;border-left: 1px solid #b1191a;padding: 3px 0 0 14px;
}
/* 导航栏模块 */
.sk_list {float: left;
}
.sk_list ul li {float: left;padding: 0 30px;
}
.sk_list ul li a {display: block;line-height: 47px;font-size: 16px;font-weight: 700;color: #000;
}
.sk_con {float: left;
}
.sk_con ul li {float: left;padding: 0 23px;
}
.sk_con ul li a {display: block;line-height: 47px;font-size: 14px;
}
.sk_con ul li:last-child a::after{content: '\f107';font-family: 'icomoon';
}
/* 列表页主体模块 sk_container start */
.sk_hd {margin-bottom: 25px;
}
.sk_bd {overflow: hidden;
}
.sk_bd ul {width: 1210px;
}
.sk_bd ul li {float: left;width: 290px;height: 460px;margin: 0 12px 10px 0;font-size: 14px;border: 1px solid transparent;
}
.sk_bd ul li:hover {border: 1px solid #b1191a;
}
.sk_bd ul li .tu {text-align: center;
}
.sk_bd ul li .text {padding: 0 10px;
}
.sk_bd ul li .price {padding: 10px 0;
}
.sk_bd ul li .price .style_red {font-size: 22px
}
.sk_bd ul li .price .del {text-decoration: line-through;
}
.sk_bd ul li .jindutiao {height: 16px;line-height: 16px;
}
.sk_bd ul li .bar {display: inline-block;width: 140px;height: 14px;border: 1px solid #ed282e;border-radius: 7px;margin: 0 1px;padding: 1px;
}
.sk_bd ul li .bar .bar_in {width: 80%;height: 100%;background-color: #ed282e;border-radius: 7px;
}
.sk_bd ul li button {width: 100%;height: 50px;background-color: #b1191a;margin-top: 9px;font-size: 20px;color: #fff;
}
/* 列表页主体模块 sk_container end */

5.7 register.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人注册</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/register.css">
</head><body><div class="w"><!-- 头部模块制作 start --><header><div class="logo"><a href="index.html"><img src="data:images/logo.png" alt=""></a></div></header><!-- 头部模块制作 end --><!-- 主体区域制作 start--><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登陆</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</label> <input type="text" class="inp"> <span class="error"><iclass="error_icon"></i>手机号码格式不正确，请从新输入 </span></li><li><label for="">短信验证码：</label> <input type="text" class="inp"><span class="success"><iclass="success_icon"></i>短信验证码输入正确</span></li><li><label for="">登陆密码：</label> <input type="password" class="inp"> <span class="error"><iclass="error_icon"></i>密码不少于6位数，请从新输入 </span></li><li class="safe">安全程度 <em class="weak">弱</em><em class="normal">中</em><em class="strong">强</em></li><li><label for="">确认密码：</label> <input type="password" class="inp"> <span class="error"><iclass="error_icon"></i>密码不一致，请从新输入 </span></li><li class="agree"><input type="checkbox"> 同意协议并注册 <a href="#">《知晓用户协议》</a></li><li><input type="submit" value="提交注册" class="btn"></li></ul></form></div></div><!-- 主体区域制作 end--><!-- 底部模块制作 start --><footer><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> |<a href="#">商家入驻</a> | <ahref="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | EnglishSite | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100邮箱:zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></footer><!-- 底部模块制作 end --></div>
</body></html>

5.8 register.css:

.w {width: 1200px;margin: 0 auto;
}
header {height: 84px;border-bottom: 2px solid #b1191a;
}
header .logo {padding-top: 18px;
}
.registerarea {height: 524px;border: 1px solid #ececec;margin-top: 20px;
}
.registerarea h3 {height: 42px;line-height: 42px;border-bottom: 1px solid #ececec;background-color: #ececec;padding: 0 10px;font-size: 18px;font-weight: 400;
}
.login {float: right;font-size: 14px;
}
.login a {color: #b1191a;
}
.reg_form {width: 600px;margin: 55px auto 0;
}
.reg_form ul li {margin-bottom: 20px;
}
.reg_form ul li label {display: inline-block;width: 88px;text-align: right;
}
.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}
.reg_form ul li .error {color: #df3033;
}
.error_icon,
.success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin: -2px 3px 0;
}
.reg_form ul li .success {color: green;
}
.success_icon {background: url(../images/success.png) no-repeat;
}
.safe {padding-left: 170px;
}
.safe em {padding: 0 12px;background-color: pink;margin: 0 1px;color: #fff;
}
.safe .weak {background-color: #de1111;
}
.safe .normal {background-color: #40b83f;
}
.safe .strong {background-color: #f79100;
}
.agree {padding-left: 90px;
}
.agree input {vertical-align: middle;
}
.agree a {color: #93caf0;
}
.btn {width: 200px;height: 35px;background-color: #c81623;color: #fff;font-size: 14px;margin: 30px 0 0 110px;
}
/* footer 区域 start */
.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a {padding: 15px;
}
.copyright {line-height: 20px;
}
/* footer 区域 end */

六、Web服务器

6.1 什么是服务器

服务器 是提供计算服务的设备，它也是一台计算机。

文件、数据库、应用程序、Web服务器

Web服务器可以分为本地服务器和远程服务器

6.2 本地服务器

把自己的电脑设置成本地服务器，局域网内可以访问

6.3 远程服务器

通常指别的公司为我们提供的一台电脑，我们只需要将项目上传到这台电脑上，任何人都可以利用域名访问网站了。

比如域名：www.baidu.com 可访问百度网站

6.4 如何将自己的网站上传到服务器

一般稳定的服务器都是要收费的例如：阿里云

DAY 11 | 自学前端第十一天相关推荐

WPF自学入门（十一）WPF MVVM模式Command命令 WPF自学入门（十）WPF MVVM简单介绍...
WPF自学入门(十一)WPF MVVM模式Command命令在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式.正 ...
自学前端真的没有前途吗？
现在全职从事前端工作,到20年年底整6年,在做前端之前,我是那种跟在销售后面,他投标,我负责把他吹的牛逼变出来的板儿砖型程序员,什么语言和技术栈,根本不是借口,deadline放在那里,让你今天学一个 ...
自学前端，需要学习哪些知识点？学多久可以入职前端工程师？
假如有那么残酷的一天,我不小心喝错了一瓶药,一下子抹掉了我这十多年的编程经验,把我变成了一只小白.我想自学前端,并且想要找到一份工作,我预计需要 6 个月的时间,前提条件是每天都处于高效率的学习状态 ...
自学前端需要达到什么水平才能去找工作？来看看这套前端学习路线图
自学前端需要达到什么水平?当然是水平越高,越容易找到工作. 在竞争这么激烈的2020年,就需要更加的努力,充实自己,让自己不被代替! 看了好多的回答,大家都是再说学到什么水平能找到工作,我就来分享干货 ...
iOS 11开发教程（十一）了解iOS11应用视图
iOS 11开发教程(十一)了解iOS11应用视图在iPhone或者iPad中,用户看到的和摸到的都是视图.视图是用户界面的重要组成元素.本节将主要讲解视图的添加.删除以及位置和大小的设置等内容. ...
grep从文件末尾开始找_新人自学前端到什么程度才能找工作？
这个问题打我记事起到现在,问过我的人,没有1000也有800了.足以见得这个问题是多么的不得人心. 自学前端开发,不管他在网上百度了多少资料,看了多少教程,你总得先做个网页出来.所以,很多人都是从ht ...
如何系统地自学前端（女生），女生发展前端是否是青春饭?
看问题描述,题主应该对互联网开发了解的不多,题主问的就是两方面: 1.女生如何自学前端? 2.女生如果从事前端开发这个工作能不能长远的发展? 最初我入行的时候也有这样的担忧,很正常. 网上大力鼓吹兴趣 ...
自学前端，一天学4个小时左右，能到什么水平？
自学前端,你的学习时间不是最主要的而是你拿着这些时间做了什么如果只是简单的看一些理论知识,没有实际操作那是远远不够的如果你是拿这些时间全部用来写demo,折腾一些实战项目那用不了多久,你水平 ...
是自学前端还是培训学前端？
"学web前端是自学好还是去培训机构,哪个靠谱?" 类似的问题应接不暇,包括前段时间逛知乎,关于这个话题的热度,还是居高不下. 都快2021年了,匆匆入场的人还是很多,尤其是在校大 ...
自学前端很难吗？只要你足够努力，高中学历也能获得offer
这是一位粉丝朋友分享的他的故事,很感人,希望以此激励那些转行前端现在却很吃力的朋友们. 正文开始: 不得不说,我的人生比很多人都要黑暗,我是2014届的本科生,但是本科我只读了三年就中途退学了. 当时 ...