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; }
大概做成这个样子（图片没做比例，做个大概轮廓）
