PC端品优购项目(下)

品优购列表页制作

品优购列表页制作准备工作

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,相机,数码,配件,手表,存储卡,京东" />
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入我们初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入我们公共的样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入我们列表页的css文件 -->
    <link rel="stylesheet" href="css/list.css">
</head>

列表页 header 和 nav 修改

  • 秒杀盒子 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头部模块制作 start -->
<header class="header w">
    <!-- logo模块 -->
    <div class="logo">
        <h1>
            <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
    </div>
    <!-- 列表页的秒杀模块 -->
    <div class="sk">
        <img src="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">
        我的购物车
        <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 -->

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
/* 列表页专有的css */
.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 有很大的帮助。

HTML5&CSS3
HTML5&CSS3 移动端布局

本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！