zoukankan      html  css  js  c++  java
  • 电商静态网页

    HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电商项目轮廓</title>
        <!-- 重置浏览器样式 ,在不同浏览器下显示一致-->
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css">
        <!-- 前置工作的css -->
        <link rel="stylesheet" type="text/css" href="css/prepare.css">
        <!-- 引入主css -->
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <!-- 电商布局 -->
        <!-- 布局思路 -->
        <!-- 网页最上面那部分 -->
        <!-- 所有浮动的母元素清除浮动 -->
    
        <!-- 网页最顶部部分 -->
        <div class="top-nav clear-float">
            <!-- container的目的是把所有的容器包起来 -->
            <div class="container clear-float">
                <!-- 定义容器里的小块,左右浮动的两个小块 -->
                <!-- 注意这里的container坍缩了,清除浮动 -->
                <div class="fl">
                    <a class="item" href="">首页</a>
                </div>
                <div class="fr">
                    <a class="item" href="">我的订单</a>
                    <a class="item" href="">我的收藏</a>
                    <a class="item" href="">登录</a>
                    <a class="item" href="">注册</a>
                </div>
            </div>
        </div>
    
        <!-- 网页搜索栏那部分 -->
        <div class="header clear-float">
            <!-- 从左到右,分别是logo,搜索框,购物车,大概比例是2,5,3 -->
            <!-- 首先还是定义一个容器 -->
            <div class="container clear-float">
            <!-- 定义container里的三块内容 -->
                <div class="colume-2">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="colume-5 search-area">
                    <input type="text"></input>
                    <button>搜索</button>
                </div>
                <div class="colume-3 car">
                    <a class="item" href="">购物车</a>
                </div>
            </div>
        </div>
        <!-- 网页主促销区 -->
         
        <div class="main-promote clear-float">
            <!-- 主促销区左边分类块,中间促销商品,右边公告,比例大概是2,6,2 -->
            <!-- 首先还是来个container包裹 -->
            <div class="container clear-float">
                <!-- 分成三块 -->
                <div class="colume-2 category">
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                    <div class="item">item/item</div>
                </div>
                <div class="colume-6">
                    <div class="slider">
                        <img src="images/slider-01.png" alt="">
                    </div>
                    <div class="promote">
                        <div class="colume-05">
                            <img src="images/logo.png" alt="">
                        </div>
                        <div class="colume-05">
                            <img src="images/logo.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="colume-2 info ">
                    <div class="author clear-float">
                        <div class="log"></div>
                        欢迎您购物
                        <div class="anno">
                            <div class="title">公告</div>
                            <div class="content">
                                这是一瓶起泡酒,也是一瓶纪念阿里巴巴成立20年的纪念酒,酒瓶上写有马云逍遥子的笔名,令人神奇的是马云还能在酒里说话...据了解,这瓶酒的正确开启方式是使用支付宝VR扫描盒外的二维码,并将手机放入盒子另一侧,手机中的视频就会反射到酒瓶上,形成类似全息投影的效果,看起来非常的神奇。这是一瓶起泡酒,也是一瓶纪念阿里巴巴成立20年的纪念酒,酒瓶上写有马云逍遥子的笔名,令人神奇的是马云还能在酒里说话...据了解,这瓶酒的正确开启方式是使用支付宝VR扫描盒外的二维码,并将手机放入盒子另一侧,手机中的视频就会反射到酒瓶上,形成类似全息投影的效果,看起来非常的神奇.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- 网页子促销区 -->
        <!-- 促销区有很多行,以三行为例 -->
        <div class="sub-promote1 clear-float">
            <!-- 促销区是各种商品,每块大概占20% -->
            <!-- 首先以container容器包裹 -->
            <div class="container clear-float">
                <div class="colume-2">1</div>
                <div class="colume-2">2</div>
                <div class="colume-2">3</div>
                <div class="colume-2">4</div>
                <div class="colume-2">5</div>
            </div>
        </div>
        <div class="sub-promote2 claear-float">
            <!-- 促销区是各种商品,每块大概占20% -->
            <!-- 首先以container容器包裹 -->
            <div class="container clear-float">
                <div class="colume-2">1</div>
                <div class="colume-2">2</div>
                <div class="colume-2">3</div>
                <div class="colume-2">4</div>
                <div class="colume-2">5</div>
            </div>
        </div>
        <div class="sub-promote3 clear-float">
            <!-- 促销区是各种商品,每块大概占20% -->
            <!-- 首先以container容器包裹 -->
            <div class="container clear-float">
                <div class="colume-2">1</div>
                <div class="colume-2">2</div>
                <div class="colume-2">3</div>
                <div class="colume-2">4</div>
                <div class="colume-2">5</div>
            </div>
        </div>
    
        <!-- 网页的页脚 -->
        <div class="footer clear-float">
            <!-- 页脚有些文字,只需要使得文字居中即可 -->
            <div class="container clear-float">
                文字
            </div>
        </div>
    </body>
    </html>

    CSS代码

    /*准备工作*/
    
    
    /*给所有的东西指定一下*/
    * {
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        /*添加这个是加个透明度,便于分析不同元素位置,
        网页做好了删掉即可*/
        background-color: rgb(0,0,0,.1);
        /*页面颜色变化时间变得柔和一点,没0.2秒一次*/
        -webkit-transition:background 200ms;
        -o-transition:background 200ms;
        transition:background 200ms; 
    }
    
    /*给body再指定一下*/
    body {
        font-size: 12px;
        color: #444;
        line-height: 1.7;
    }
    /*把所有的图片定义一下格式*/
    img {
        display: block;
        max-width: 100%;
    }
    
    /*定义一个类,使其居中*/
    .container {
        /*使其以块级元素显示,一般定义这个容器,都是块级*/
        display: block;
        /*最大宽度1080px,如果窗口宽度大于1080px,
        则只为1080px,如果窗口宽度小于1080px,则为最大窗口。*/
        max-width: 1080px;
        /*上下为0,左右auto,使其居中*/
        margin: 0 auto;
    }
    /*常用左右浮动*/
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    /*container有两个子元素,都是浮动的,这样就撑不起来了,故而container
    的高度为0,这就需要清除浮动,使得container的高度重新撑起来*/
    /*利用css里伪类的概念*/
    .clear-float:after,
    .clear-float:before {
        content: " ";
        display: block;
        clear: both;
    }
    
    /*元素并排显示*/
    /*这里有个细节,如果你写<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    这样并不会说会显示理想的左边占50%,右边占50%,因为钯那么多a当成一个单词
    不会自动给你换行*/
    p {
        width: 25%;
        float: left;
    }
    
    /*在布局中经常使用,
    可以定义一套标准,比如左边10%,右边90%等等
    也就是原子类*/
    .colume-1,
    .colume-2,
    .colume-3,
    .colume-4,
    .colume-5,
    .colume-6,
    .colume-7,
    .colume-8,
    .colume-9 {
        /*就是使得每一部分以块级元素显示*/
        display: block;
        /*每个部分与每个部分之间相对定位显示*/
        position: relative;
        /*给一个最小像素,确保这个有高度*/
        min-height: 1px;
        /*浮动*/
        float: left;
    }
    /*以上指定的是共性,下面指定他们的具体样式*/
    
    .colume-1 {
        width: 10%;
    }
    .colume-2 {
        width: 20%;
    }
    .colume-3 {
        width: 30%;
    }
    .colume-4 {
        width: 40%;
    }
    .colume-5 {
        width: 50%;
    }
    .colume-6 {
        width: 60%;
    }
    .colume-7 {
        width: 70%;
    }
    .colume-8 {
        width: 80%;
    }
    .colume-9 {
        width: 90%;
    }.top-nav {
        /*颜色浅灰*/
        background-color: #eee;
    
    }
    
    /*快捷键:选一个部分之后,按ctrl+d,可以连续选出所有和你选中的部分,
    然后可以同时一起加上你想加的东西*/
    a {
        /*去掉下划线*/
        text-decoration: none;
    }
    
    .top-nav .item {
        display: inline-block;
        /*top-nav类下的item类,上下6像素,左右10像素,单单只设置这个没用,因为
        a默认是inline,上下并不会约束到,应该首先将其转为display: inline-block*/
        padding: 6px 10px;
        /*
            关于inline和inline-block区别
            1、inline:内联,只有水平宽度可以调,没有高度,任何属性调高度无效
            2、inline-block:让元素以内联形式存在,也就是不是块级,但是表现起来
               又有块级元素的高度,,也就是可以调高度;
        */
        color: #666;
    }
    .top-nav .item:hover {
        color: red;
    }
    
    
    /*header*/
    .header {
        /*header外边框上下20px,左右0px,整体上下就分离开*/
        margin: 20px 0px;
    }
    .header .search-area {
        /*边框设置,厚度为2个像素,实线,颜色*/
         border:2px solid #dd182b;
         background-color: #dd182b;
    }
    /*希望的是用外部的边框,但是需要input输入框,可以把input输入框隐藏*/
    .header .search-area input,
    .header .search-area button {
        /*不加这两个会掉下来,转为块元素*/
        display: block;
        float: left;
        /*设置border属性为0即可隐藏*/
        border:0;
        /*内边框距离是10像素,与button的内边框距离一样*/
        padding: 10px;
        /*与border很相似,将其值设为0没有描边*/
        outline: 0;
    }
    .header .search-area input {
        width: 80%;
    }
    .header .search-area button {
        width: 20%;
        /*将button背景色设为要求的颜色*/
        background-color: #dd182b;
    }
    .header .search-area button:hover {
        /*当鼠标经过button的时候,会变色,即获得焦点的时候*/
        background:#ce1829;
    }
    /*购物车所在的块居中显示*/
    .header .car {
        text-align: center;
    }
    
    /*购物车的a块,设置有浮动,内边距和上面的logo和搜素栏一样,设置背景颜色
    设置边框格式,a这个小块占car这个块的805,a的文字颜色是,注意color与background
    的颜色区分开*/
    .header .car a {
        float: right;
        padding: 10px;
        background: #fff;
        border:1px solid #eee;
        width: 80%;
        color: #dd182b;
    }
    
    .main-promote {
        background-color: #dedede;
    }
    /*
        注意:background-color和color区别:
        1、background-color背景颜色
        2、color字体颜色
    */
    .main-promote .category {
        background: #616568;
        color:#fff; 
    }
    .main-promote .category .item {
        padding: 14px 20px;
    }
    /*rgba
        r红色值
        g绿色值
        b蓝色值
        a透明度 取值在0-1之间
    */
    .main-promote .category .item:hover {
        background: rgba(0,0,0,0.1);
    }
    /*生成图片的网站:dummyimage.com*/
    .main-promote .info {
        padding: 10px;
        /*
        line-height:行高,设置文字上下间的距离,可以让层里的元素居中;
        height:高度,定义一个块的高度;
        */
        /*line-height: 50%;*/
        background: #fff;
        color: #888;
        /*使得看起来更有质感*/
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .main-promote .info > * {
        margin-bottom: 10px;
    }
    .main-promote .info .log {
        width: 50px;
        height: 50px;
        background: #aaa;
        /*圆角*/
        border-radius: 50%;
        float: left;
        margin-right: 10px;
    }

    大概做成这个样子(图片没做比例,做个大概轮廓)

  • 相关阅读:
    【ImageMagick】ImageMagick命令行工具
    MAC 下安装PIL
    【转】tmux入门指南
    python编码和小数据池
    ----------BMI指数小程序----------
    ----------简单购物车小程序----------
    python基础数据类型3
    python基本数据类型2
    python基本数据类型
    python循环
  • 原文地址:https://www.cnblogs.com/tasly/p/11517215.html
Copyright © 2011-2022 走看看