Pinyougou Project——Dark Horse Programmer Pink Teacher/Complete Source Code/Project Explanation

Enterprise 2023-06-24 22:26:03 views: null

Not much to say, first upload the renderings, and the code is at the end of the article

 front page

personal registration page

Women's Shoes Module Page

 1. Pinyougou project construction work

  • images: places images that are not frequently changed, such as the background
  • upload: Place pictures that need to be changed frequently in the product category
  • The index.html file corresponds to the home page
  • common.css corresponds to CSS common style file
  • base.css corresponds to the CSS initialization style file

 2. The HTML page introduces the favicon icon

  • <head> </head> Introduce code between elements in the html page 
<link rel="shortcut  icon" href="favicon.ico" type="images/x-icon" />

 3. HTML pages import css files

<!-- 引入css文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入我们的index.css 文件 -->
    <link rel="stylesheet" href="css/index.css">

4. index.html home page file code

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <!-- 网站说明 -->
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电
    脑家居百货、服饰服装、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务。为您提供愉悦的网
    上购物体验！" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机，数码，
    配件，手表，存储卡，京东" />
    <!-- 引入favicon图标 -->
    <link rel="shortcut  icon" href="favicon.ico" type="images/x-icon" />
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入我们的index.css 文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ &nbsp;</li>
                    <li>
                        <a href="#">请登录 &nbsp;</a><a href="register.html" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 快捷导航模块 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 class="input" 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="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li>
                        <li><a href="#">电脑</a>、<a href="#">办公</a></li>
                        <li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li>
                        <li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
                        <li><a href="#">个护化妆</a>、<a href="#">清洁用品</a>、<a href="#">宠物</a></li>
                        <li><a href="list.html">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a></li>
                        <li><a href="#">运动户外</a>、<a href="#">钟表</a></li>
                        <li><a href="#">汽车</a>、<a href="#">汽车用品</a></li>
                        <li><a href="#">母婴</a>、<a href="#">玩具乐器</a></li>
                        <li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a></li>
                        <li><a href="#">医药保健</a></li>
                        <li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a></li>
                        <li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a></li>
                        <li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<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"></li>
                </ul>
            </div>
            <div class="newsflash">
                <div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>[特惠]</strong> 备战开学季全民半价购数码</a></li>
                            <li><a href="#"><strong>[公告]</strong> 品优稳占家电网购六成份额</a></li>
                            <li><a href="#"><strong>[特惠]</strong> 百元中秋全品类礼券限童领男装女装等各类</a></li>
                            <li><a href="#"><strong>[公告]</strong> 上品优生鲜享阳澄湖大闸蟹</a></li>
                            <li><a href="#"><strong>[特惠]</strong> 每日享折扣品优品质游</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">
                </div>
            </div>
        </div>
    </div>
    <!-- main 首页专属模块的制作 end -->
    <!-- 推荐模块 start -->
    <div class="recom w">
        <div class="recom_hd">
            <img src="images/recom.png" alt="">
        </div>
        <div class="recom_bd">
            <ul>
                <li>
                    <img src="upload/recom_03.jpg" alt="">
                </li>
                <li>
                    <img src="upload/recom_03.jpg" alt="">
                </li>
                <li>
                    <img src="upload/recom_03.jpg" alt="">
                </li>
                <li>
                    <img src="upload/recom_03.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块 end -->
    <!-- 1、楼层模块start -->
    <div class="floor">
        <!-- 家用电器模块 -->
        <div class="w jiadian">
            <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>
                        <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="#">4K电视</a>
                                </li>
                                <li>
                                    <a href="#">空气净化器</a>
                                </li>
                                <li>
                                    <a href="#">NH电饭煲</a>
                                </li>
                                <li>
                                    <a href="#">滚筒洗衣机</a>
                                </li>
                                <li>
                                    <a href="#">电热水器</a>
                                </li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt=""></a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-5.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="floor">
        <!-- 2、手机模块 -->
        <div class="w jiadian">
            <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>
                        <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="#">4K电视</a>
                                </li>
                                <li>
                                    <a href="#">空气净化器</a>
                                </li>
                                <li>
                                    <a href="#">NH电饭煲</a>
                                </li>
                                <li>
                                    <a href="#">滚筒洗衣机</a>
                                </li>
                                <li>
                                    <a href="#">电热水器</a>
                                </li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col_329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col_221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt=""></a>
                        </div>
                        <div class="col_219">
                            <a href="#" class="bb">
                                <img src="upload/floor-1-5.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 楼层模块end -->
    <!-- 底部模块 start -->
    <div 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>正品保障，提供发票</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="images\wx_cz.jpg" alt="">
                    <dd>德国和博士生</dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接销售联盟</a>|<a href="#">品优购社区</a>|<a href="#">品优购公益</a>|<a href="#">English SiteContact U</a>
                </div>
                <div class="copyright">
                    地址:北京市昌平区建材城西路金燕龙办公楼一层邮编: 100096 电话: 400- 618-4000传真: 010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702

                </div>
            </div>
        </div>
    </div>
    <!-- 底部模块 end -->
</body>

</html>

 5. List.html women's shoes commodity module code

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <!-- 网站说明 -->
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电
    脑家居百货、服饰服装、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务。为您提供愉悦的网
    上购物体验！" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机，数码，
    配件，手表，存储卡，京东" />
    <!-- 引入favicon图标 -->
    <link rel="shortcut  icon" href="favicon.ico" type="images/x-icon" />
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入list.css文件 -->
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <!-- 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 class="input" 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>
    <div class="sk_container w">
        <div class="sk_hd">
            <img src="upload/bg_03.png" alt="">
        </div>
        <div class="sk_bd">
            <ul class="clearfix">
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
                <li><img src="upload/xie.png" alt=""></li>
            </ul>
        </div>
    </div>

    <!-- nav 导航栏模块 end  -->
    <!-- 底部模块 start -->
    <div 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>正品保障，提供发票</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="images\wx_cz.jpg" alt="">
                    <dd>德国和博士生</dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接销售联盟</a>|<a href="#">品优购社区</a>|<a href="#">品优购公益</a>|<a href="#">English SiteContact U</a>
                </div>
                <div class="copyright">
                    地址:北京市昌平区建材城西路金燕龙办公楼一层邮编: 100096 电话: 400- 618-4000传真: 010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702

                </div>
            </div>
        </div>
    </div>
    <!-- 底部模块 end -->
</body>

</html>

 6. register.html registration page code

<!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" type="images/x-icon" />
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入register.css 文件 -->
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
    <div class="w">
        <div class="header">
            <a href="index.html">
                <img src="images/logo.png" alt=""></a>
        </div>
        <div class="regesterarea">
            <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="error"><i class="sucess_icon"></i>短信验证码输入正确</span></li>
                        <li><label for="">登录密码：</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>密码输入不正确，请重新输入</span></li>
                        <li>
                            <div class="safe">安全程度<em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></div>
                        </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>
        <div class="footer">
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|
                    <a href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接销售联盟</a>|<a href="#">品优购社区</a>|<a href="#">品优购公益</a>|<a href="#">English SiteContact U</a>
                </div>
                <div class="copyright">
                    地址:北京市昌平区建材城西路金燕龙办公楼一层邮编: 100096 电话: 400- 618-4000传真: 010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702

                </div>
            </div>
        </div>
    </div>
</body>

</html>

 7. Base.css initialization code

/* 把我们所有标签的内外边距清零 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* em 和 i 斜体的文字不倾斜 */

em,
i {
    font-style: normal
}


/* 去掉li 的小圆点 */

li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 边框默认是灰色，这里需要手动修改去掉边框 */
    border: 0;
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}


/* 清除浮动 */

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

 8. common.css common style module code

/* 引入字体图标声明 */

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


/* banxin */

.w {
    width: 1200px;
    height: 0 auto;
    margin: auto;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.style_red {
    color: #cb1623;
}


/* 导航栏模块 */

.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    margin: 9px 15px 0;
    background-color: #666;
}

.arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

.header {
    position: relative;
    height: 105px;
    /* background-color: aqua; */
}

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    /* background-color: antiquewhite; */
}

.logo a {
    /* 转换为块级元素 */
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* 文字隐藏 */
    font-size: 0;
}

.search {
    position: absolute;
    top: 25px;
    left: 346px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search .input {
    float: left;
    height: 32px;
    width: 454px;
    padding-left: 10px;
}

.search button {
    float: left;
    height: 32px;
    width: 80px;
    font-size: 16px;
    color: #fff;
    background-color: #b1191a;
}

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

.hotwords a {
    margin: 0 10px;
}

.shopcar {
    position: absolute;
    top: 25px;
    right: 60px;
    width: 140px;
    height: 35px;
    /* 字体垂直居中 */
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

.count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}


/* nav模块制作 */

.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}

.nav .navitems {
    float: left;
}

.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
}

.dropdown .dd {
    /* display: none; */
    height: 465px;
    width: 210px;
    background-color: #c81623;
    margin-top: 2px;
}

.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.dropdown .dd ul li::after {
    position: absolute;
    font-family: 'icomoon';
    content: '\e920';
    top: 1px;
    right: 10px;
    color: #fff;
    font-size: 14px;
}

.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}

.dropdown .dd ul li:hover {
    background-color: #fff;
}

.dropdown .dd ul li:hover a {
    color: #c81623;
}

.navitems ul li {
    float: left;
}

.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}


/* 底部模块制作 */

.footer {
    height: 415px;
    background-color: #f5f5f5;
}

.footer .mod_service {
    height: 120px;
    border-bottom: 1px solid #ccc;
}

.footer .mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    margin-top: 35px;
    padding-left: 35px;
}

.footer .mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    /* 注意精灵图的使用 */
    background: url(../images/icons.png) no-repeat -252px -2px;
    margin-right: 8px;
}

.service_txt h4 {
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}

.mod_help {
    height: 180px;
    border-bottom: 1px solid #ccc;
}

.mod_help {
    margin-top: 20px;
    padding-left: 50px;
}

.mod_help dl {
    float: left;
    width: 200px;
}

.mod_help dl:last-child {
    float: left;
    width: 90px;
    text-align: center;
}

.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}

.mod_help dl dd {
    font-size: 12px;
}

.mod_copyright {
    text-align: center;
    margin-top: 20px;
}

.mod_copyright .link {
    margin-bottom: 15px;
    line-height: 2px;
}

 9. index.css home page style code

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    /* background-color: blue; */
}

.main .focus {
    float: left;
    width: 721px;
    height: 455px;
    overflow: hidden;
    /* background-color: aquamarine; */
}

.main .focus img {
    transition: all .4s;
}

.main .focus img:hover {
    transform: scale(1.1);
}

.main .newsflash {
    float: right;
    width: 250px;
    height: 455px;
    /* background-color: bisque; */
}

.newsflash .news {
    height: 165px;
    border: 1px solid #e4e4e4;
    margin-top: 5px;
}

.newsflash .lifeservice {
    overflow: hidden;
    height: 209px;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
}

.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: url(../images/icons.png) no-repeat -19px -15px;
    margin-top: 12px;
}

.newsflash .bargain {
    margin-top: 5px;
}

.news .news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}

.news-hd h5 {
    float: left;
    font-size: 14px;
}

.news-hd a {
    float: right;
}

.news-hd a::after {
    font-family: 'icomoon';
    content: '\e920';
}

.news-bd ul {
    padding-left: 15px;
}

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 推荐模块 */

.recom {
    height: 163px;
    margin-top: 12px;
    background-color: #ebebeb;
}

.recom .recom_hd {
    float: left;
    width: 205px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

.recom_bd {
    float: left;
}

.recom_bd ul li {
    position: relative;
    float: left;
}

.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

.floor .box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}

.floor .box_hd h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-weight: 400;
}

.tab_list ul {
    float: right;
    line-height: 30px;
}

.tab_list ul li {
    float: left;
}

.floor .tab_list ul li a {
    padding: 0 15px;
}

.floor .w {
    margin-top: 30px;
}

.floor .box_bd {
    height: 361px;
}

.tab_list_item>div {
    float: left;
    height: 361px;
}

.col_210 {
    width: 210px;
    background-color: #f9f9f9;
    text-align: center;
}

.col_210 ul {
    padding-left: 12px;
}

.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}

.col_329 {
    width: 329px;
}

.col_221 {
    width: 221px;
    border-right: 1px solid #ccc;
}

.col_219 {
    width: 219px;
}

.bb {
    /* 一般情况下，a如果包含有宽度的盒子，a要转化为块级元素 */
    display: block;
    border-bottom: 1px solid #ccc;
}

 10. list.css product page code

/* 列表页css文件 */

.nav {
    overflow: hidden;
}

.sk {
    position: absolute;
    left: 180px;
    top: 40px;
    color: #c81623;
    border-left: 1px solid #c81623;
    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;
    color: #000;
    font-size: 16px;
    font-weight: 700px;
}

.sk_con {
    float: left;
}

.sk_con ul li {
    float: left;
}

.sk_con ul li a {
    display: block;
    float: left;
    line-height: 48px;
    padding: 0 20px;
    font-size: 14px;
}

.sk_con ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}

.sk_bd ul li {
    overflow: hidden;
    float: left;
    width: 290px;
    height: 460px;
    border: 1px solid transparent;
    margin-left: 10px;
}

.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}

.sk_bd ul li:hover {
    border: 1px solid #c81623;
}

 11. register.css personal registration style code

.w {
    width: 1200px;
    margin: auto;
}

.header {
    height: 84px;
    border-bottom: 2px solid #c81523;
    padding-top: 18px;
}

.regesterarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.regesterarea h3 {
    font-size: 18px;
    height: 42px;
    background-color: #ececec;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
    font-weight: 400;
    line-height: 42px;
}

.regesterarea .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 .inp {
    width: 242px;
    height: 35px;
    border: 1px solid #ccc;
}

.reg_form span {
    padding-left: 10px;
}

.reg_form .error {
    color: #c81523;
}

.reg_form .error_icon,
.sucess_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;
    margin-top: -2px;
}

.reg_form .sucess_icon {
    background: url(../images/success.png) no-repeat;
}

.safe {
    margin-left: 175px;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.safe .ruo {
    background-color: #de1111;
}

.safe .zhong {
    background-color: #408b3f;
}

.safe .qiang {
    background-color: #791007;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #16a1e6;
}

.btn {
    font-size: 14px;
    width: 200px;
    height: 34px;
    margin: 30px 0 0 110px;
    background-color: #c81523;
    color: #fff;
}

.mod_copyright {
    text-align: center;
    margin-top: 20px;
}

.mod_copyright .link {
    margin-bottom: 15px;
    line-height: 2px;
}

Guess you like

Origin blog.csdn.net/m0_46830821/article/details/123859214
Recommended
微软回应中国区AI团队“打包赴美”传闻
Ranking
How to use ChatGPT to write 100,000+ hot articles for public accounts (includes prompt words)
sudo echo command execution Permission denied
ADO: Using Transactions to Operate Oracle Database
[Java] [Class and Object] equals, hashCode, clone methods
Linux virtual host function
Порт управления rabbitmq открыт
on,where
jQuery WeUI
How can there be a weed pilot in Hangzhou?
tcp / ip model four
Daily
More
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

Code World

© 2018 codetd.com