电商静态网页 / 憋错料

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;
}

大概做成这个样子（图片没做比例，做个大概轮廓）

原文地址：https://www.cnblogs.com/tasly/p/11517215.html

时间： 2024-08-02 03:29:36

电商静态网页

电商静态网页的相关文章

构建高并发高可用的电商平台架构实践

构建高并发高可用的电商平台架构实践（上）

构建高并发高可用的电商平台架构实践转自网络

【转】构建高并发高可用的电商平台架构实践

电商峰值系统架构设计--转载

构建高并发高可用的电商平台架构实践(转)

构建高并发高可用的电商平台架构实践（转）

【转载】构建高并发高可用的电商平台架构实践

构建高并发高可用的电商平台架构大纲