品优购列表页制作
品优购列表页制作准备工作
1.列表页面是新的页面,我们需要新建页面文件list.html
。
2.因为列表页的头部和底部基本一致,所以我们需要把首页中的头部和底部的结构复制过来。
3.头部和底部的样式也需要,因此 list.html
中还需要引入 common.css
。
4.需要新的 list.css
样式文件,这是列表页专门的样式文件。
头部HTML引入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物! </title> <meta name="description" content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" /> <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> <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>
|

- 秒杀盒子
sk(second kill)
定位即可
- 1 号盒子左侧浮动
sk_list
里面包含 ul
和 li
- 2 号盒子左侧浮动
sk_con
里面包含 ul
和 li
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
| <header class="header w"> <div class="logo"> <h1> <a href="index.html" title="品优购商城">品优购商城</a> </h1> </div> <div class="sk"> <img src="images/sk.png" alt=""> </div> <div class="search"> <input type="search" name="" id="" placeholder="语言开发"> <button>搜索</button> </div> <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"> 我的购物车 <i class="count">8</i> </div> </header>
<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>
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| .nav { overflow: hidden; } .sk { position: absolute; left: 190px; top: 40px; border-left: 1px solid #c81523; padding: 3px 0 0 14px; } .sk_list { float: left; } .sk_list ul li { float: left; } .sk_list ul li a { display: block; line-height: 47px; padding: 0 30px; font-size: 16px; font-weight: 700; color: #000; } .sk_con { float: left; } .sk_con ul li { float: left; } .sk_con ul li a { display: block; line-height: 49px; padding: 0 20px; font-size: 14px; } .sk_con ul li:last-child a::after { content: '\e91e'; font-family: 'icomoon'; }
|
列表页主体 sk _container

- 1 号盒子
sk _container
给宽度 1200,不要给高度
- 2 号盒子
sk_hd
,插入图片即可
- 3 号盒子
sk_bd
,里面包含很多的 ul
和 li
品优购注册页制作
注册页类名命名
注册页面: register.html
注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化。

HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <div class="w sk_container"> <div class="sk_hd"> <img src="upload/bg_03.png" alt=""> </div> <div class="sk_bd"> <ul class="clearfix"> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> <li> <img src="upload/list.jpg" alt=""> </li> </ul> </div> </div>
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .sk_bd ul li { overflow: hidden; float: left; margin-right: 13px; width: 290px; height: 460px; border: 1px solid transparent; } .sk_bd ul li:nth-child(4n) { margin-right: 0; } .sk_bd ul li:hover { border: 1px solid #c81523; }
|
注册页布局

registerarea 布局

HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <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"> <i class="error_icon"></i> 手机号码格式不正确,请从新输入 </span></li> <li><label for="">短信验证码:</label> <input type="text" class="inp"> <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li> <li><label for="">登录密码:</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确,请从新输入 </span></li> <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li> <li><label for="">确认密码:</label> <input type="password" class="inp"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确,请从新输入 </span></li> <li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《知晓用户协议》</a> </li> <li> <input type="submit" value="完成注册" class="btn"> </li> </ul> </form> </div> </div>
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
| .w { width: 1200px; margin: 0 auto; } header { height: 84px; border-bottom: 2px solid #c81523; } .logo { padding-top: 18px; } .registerarea { height: 522px; border: 1px solid #ccc; margin-top: 20px; } .registerarea h3 { height: 42px; border-bottom: 1px solid #ccc; background-color: #ececec; line-height: 42px; padding: 0 10px; font-size: 18px; font-weight: 400; } .login { float: right; font-size: 14px; } .login a { color: #c81523; } .reg_form { width: 600px;
margin: 50px 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; } .error { color: #c81523; } .error_icon, .success_icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url(../images/error.png) no-repeat; margin-top: -2px; } .success { color: green; } .success_icon { background: url(../images/success.png) no-repeat; } .safe { padding-left: 170px; } .safe em { padding: 0 12px; color: #fff; } .ruo { background-color: #de1111; } .zhong { background-color: #40b83f; }
.qiang { background-color: #f79100; } .agree { padding-left: 95px; } .agree input { vertical-align: middle; } .agree a { color: #1ba1e6; } .btn { width: 200px; height: 34px; background-color: #c81623; font-size: 14px; color: #fff; margin: 30px 0 0 70px; }
|
Web 服务器
什么是Web服务器
我们写的品优购网站,目前是放到自己电脑上的,只能自己访问浏览。
如果想要很多人访问我们的网站,可以把品优购放到服务器上,这样就可以多人访问我们的品优购网站了。

服务器(我们也会称之为主机)是提供计算服务的设备,它也是一台计算机。在网络环境下,根据服务器提供
的服务类型不同,服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。
Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等 Web 客户端
提供文档,也可以放置网站文件,让全世界浏览;可以放置数据文件,让全世界下载。
以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同,又可分为本地服务器和远程服务器。
本地服务器
我们可以把自己的电脑设置为本地服务器, 这样同一个局域网内的同学就可以访问你的品优购网站了。
远程服务器
本地服务器主要在局域网中访问,如果想要在互联网中访问,可以把品优购网站上传到远程服务器。
远程服务器是通常是别的公司为我们提供的一台电脑(主机),我们只要把网站项目上传到这台电脑上,任何
人都可以利用域名访问我们的网站了。
比如域名: www.mi.com
可以访问小米网站
总结:
1.服务器就是一台电脑。因为我们主要是做网站,所以我们主要使用web服务器
2.服务器可以分为本地服务器和远程服务器
3.远程服务器是别的公司为我们提供了一台计算机。
4.我们可以把网站上传到远程服务器里面, 别人就可以通过域名访问我们的网站了。
课程总结
1.HTML我们学的就是常用标签, 就是基本盒子
2.CSS 就是用来美化布局网页。
3.HTML+CSS是没有逻辑可言的,基本就是搭积木摆放盒子的过程,你需要的是耐心。
4.对同学们来说,现在最困难的是布局结构 。欠缺分析页面布局的能力,
5.同一个模块,有很多布局方式,能做出来就是好的。
6.多看别人写的页面,模仿人家的布局,每次写页面总会有新的收获。
7.错误总是在所难免,一定要学会利用chrome 调试工具, 他们能快速帮我们排查错误。你还需要细心。
8.学好定位,对后面学习JavaScript 有很大的帮助。