EWSHOP布局实战
-
目录结构
/ewshop/
|- index.html 首页
|- css/ CSS目录
|- global.css 全局样式
|- index.css index.html文件样式
|- img/ 图像资源目录
|- font/字体图标目录 -
global.css
主要作用：设置全局样式，清空默认样式 base.css,设置常用的基础类
<!--讲解案例-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>EWshop</title><style>body,ul,ol,li,p,div,section{padding:0px;margin:0px;}ul,ol{border:1px solid red;}li{list-style:none;border:1px solid black;}a{text-decoration: none;}/*设置通用的颜色*/:root{--border-color:black;--bg-color:#ccc;--font-color:#666;}div{font-color:var(--font-color)}</style></head><body><div>我是你的优乐美</div><ul><li>aaaaa</li></ul><ol><li>bbbbb</li></ol></body>
</html>
-
iconfont字体图标
地址：https://www.iconfont.cn/
-
Unicode在线图标使用方式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>EWshop</title><style>/*font unicode方式 在线方式 只右针对自己生成的在线链接才管用*//*@font-face {*//* font-family: 'iconfont'; !* Project id 3978920 *!*//* src: url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.woff2?t=1679897692963') format('woff2'),*//* url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.woff?t=1679897692963') format('woff'),*//* url('https://at.alicdn.com/t/c/font_3978920_oewa1j06rbk.ttf?t=1679897692963') format('truetype');*//*}*//*只要右更新就需要从新加载*/@font-face {font-family: 'iconfont'; /* Project id 3978920 */src: url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.woff2?t=1679897884734') format('woff2'),url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.woff?t=1679897884734') format('woff'),url('https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.ttf?t=1679897884734') format('truetype');}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}</style></head><body><i class="iconfont"></i><i class="iconfont"></i></body>
</html>
- fontClass在线图标使用方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.css">
</head>
<body><i class="iconfont icon-gouwuche"></i><i class="iconfont icon-MBEfenggeduosetubiao-gouwuche"></i>
</body>
</html>
- Symbol在线图标使用方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://at.alicdn.com/t/c/font_3978920_hr7ehafwe7d.js"></script><style>.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gouwuche"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-MBEfenggeduosetubiao-gouwuche"></use></svg>
</body>
</html>
- 离线图标使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@font-face {font-family: 'iconfont';src: url('./font/iconfont.woff2?t=1679898366337') format('woff2'),url('./font/iconfont.woff?t=1679898366337') format('woff'),url('./font/iconfont.ttf?t=1679898366337') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style><script src=""></script>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/iconfont.js"></script><style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head>
<body>
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-lanmu"></use>
</svg>
</body>
</html>
- 布局实战
global.css文件内容
/*base.css*/
body,ul,li,ol,p,h3,a,div,section,form,input,textarea{margin:0px;padding:0px;
}
li{list-style:none;
}
a{text-decoration: none;color:black;
}
body{font-size:12px;
}
:root{--font-white:white;--bg-red:#E60012;--bgcolor-f5:#f5f5f5;--bgcolor-fc:#fcfcfc;--border-40:#404040;--border-d4:#d4d4d4;--border-ea:#eaeaea;--border-dd:#ddd;--font-red:red;--font-666:#666;--font-dddadb:#dddadb;--font-555:#555;--font-333:#333;
}
ewshop.css文件内容
/*设置公告样式样式*/
.fl{float:left;
}
.fr{float:right
}
.c{clear: both;
}/*宽度*/
.w-100{width:100%;
}
.w-980px{width: 980px;
}
/*高度*/
.h-100{height: 100%;
}
/*外间距*//*顶部*/
.mt-0{margin-top: 0px;
}
.mt-1{margin-top:5px;
}
.mt-2{margin-top:10px;
}
.mt-3{margin-top: 15px;
}
.mt-4{margin-top: 20px;
}
/*左侧*/
.ml-0{margin-left: 0px;
}
.ml-1{margin-left:5px;
}
.ml-2{margin-left: 10px;
}
.ml-3{margin-left: 15px;
}
.ml-4{margin-left: 20px;
}
/*底部*/
.mb-0{margin-bottom: 0px;
}
.mb-1{margin-bottom: 5px;
}
.mb-2{margin-bottom: 10px;
}
.mb-3{margin-bottom: 15px;
}
.mb-4{margin-bottom: 20px;
}
/*右侧外间距*/
.mr-0{margin-right: 0px;
}
.mr-1{margin-right: 5px;
}
.mr-2{margin-right: 10px;
}
.mr-3{margin-right: 15px;
}
.mr-4{margin-right: 20px;
}
/*水平方向外间距*/
.mx-0{margin-left:0px;margin-right:0px;
}
.mx-1{margin-left:5px;margin-right:5px;
}
.mx-2{margin-left:10px;margin-right:10px;
}
.mx-3{margin-left:15px;margin-right:15px;
}
.mx-4{margin-left:20px;margin-right:20px;
}
/*垂直方向外间距*/
.my-0{margin-top:0px;margin-bottom:0px;
}
.my-1{margin-top:5px;margin-bottom:5px;
}
.my-2{margin-top:10px;margin-bottom:10px;
}
.my-3{margin-top:15px;margin-bottom:15px;
}
.my-4{margin-top:20px;margin-bottom:20px;
}
/*块状元素居中*/
.m-auto{margin-left: auto;margin-right: auto;
}
/*同时设置四个方向外间距*/
.m-0{margin-left: 0px;margin-top: 0px;margin-bottom: 0px;margin-right: 0px;
}
.m-1{margin-left: 5px;margin-top: 5px;margin-bottom: 5px;margin-right: 5px;
}
.m-2{margin-left: 10px;margin-top: 10px;margin-bottom: 10px;margin-right: 10px;
}
.m-3{margin-left: 15px;margin-top: 15px;margin-bottom: 15px;margin-right: 15px;
}
.m-4{margin-left: 20px;margin-top: 20px;margin-bottom: 20px;margin-right: 20px;
}
/*内间距*//*同时设置四个方向内间距*/
.p-0{padding-bottom: 0px;padding-left: 0px;padding-top: 0px;padding-right: 0px;
}
.p-1{padding-bottom: 5px;padding-left: 5px;padding-top: 5px;padding-right: 5px;
}
.p-2{padding-bottom: 10px;padding-left: 10px;padding-top: 10px;padding-right: 10px;
}
.p-3{padding-bottom: 15px;padding-left: 15px;padding-top: 15px;padding-right: 15px;
}
.p-4{padding-bottom: 20px;padding-left: 20px;padding-top: 20px;padding-right: 20px;
}
/*设置顶部内间距*/
.pt-0{padding-top: 0px;
}
.pt-1{padding-top: 5px;
}
.pt-2{padding-top: 10px;
}
.pt-3{padding-top: 15px;
}
.pt-4{padding-top: 20px;
}
/*设置左侧内间距*/
.pl-0{padding-left: 0px;
}
.pl-1{padding-left: 5px;
}
.pl-2{padding-left: 10px;
}
.pl-3{padding-left: 15px;
}
.pl-4{padding-left: 20px;
}
/*设置右侧内间距*/
.pr-0{padding-right: 0px;
}
.pr-1{padding-right: 5px;
}
.pr-2{padding-right: 10px;
}
.pr-3{padding-right: 15px;
}
.pr-4{padding-right: 20px;
}
/*设置底部内间距*/
.pb-0{padding-bottom: 0px;
}
.pb-1{padding-bottom: 5px;
}
.pb-2{padding-bottom: 10px;
}
.pb-3{padding-bottom: 15px;
}
.pb-4{padding-bottom: 20px;
}
/*设置垂直方向内间距*/
.py-0{padding-top: 0px;padding-bottom: 0px;
}
.py-1{padding-top: 5px;padding-bottom: 5px;
}
.py-2{padding-top: 10px;padding-bottom: 10px;
}
.py-3{padding-top: 15px;padding-bottom: 15px;
}
.py-4{padding-top: 20px;padding-bottom: 20px;
}
/*设置水平方向内间距*/
.px-0{padding-left: 0px;padding-right: 0px;
}
.px-1{padding-left: 5px;padding-right: 5px;
}
.px-2{padding-left: 10px;padding-right: 10px;
}
.px-3{padding-left: 15px;padding-right: 15px;
}
.px-4{padding-left: 20px;padding-right: 20px;
}
/*边框*/
.border{border:1px solid var(--border-40)
}
.border-top{border-top: 1px solid var(--border-40)
}
.border-bottom{border-bottom:1px solid var(--border-40);
}
.border-40{border-color: var(--border-40);
}
.border-d4{border-color: var(--border-d4);
}
.border-dd{border-color: var(--border-dd);
}
.border-ea{border-color: var(--border-ea);
}
.border-0{border:none;
}
/*设置怪异盒*/
.border-box{box-sizing: border-box;
}
/*超出内容隐藏*/
.overflow-hidden{overflow: hidden;
}
/*背景色*/
.bg-color-red{background: var(--bg-red);
}
.bg-color-f5{background:var(--bgcolor-f5);
}
.bg-color-fc{background: var(--bgcolor-fc);
}
/*字体色*/
.font-white{color:var(--font-white)
}
.font-red{color:var(--font-red)
}
.font-666{color:var(--font-666)
}
.font-dddadb{color: var(--font-dddadb);
}
.font-555{color:var(--font-555)
}
.font-333{color: var(--font-333);
}
/*字体大小*/
.font-12px{font-size:12px;
}
.font-14{font-size:14px;
}
.font-16{font-size:16px;
}
.font-weight-bold{font-weight: bold;
}
/*内容水平设置*/
.align-center{text-align:center;
}
.align-left{text-align: left;
}
.align-right{text-align: right;
}
- index.css 文件内容
/*header style*/
.top_left{width: 200px;
}
.top_right{width: 310px;
}/*search style*/
.logo{width: 145px;
}
.search_form{/*border:1px solid red;*/width: 400px;margin-left: 80px;height: 50px;line-height: 50px;position: relative;
}
.search_form input[type=search]{width: 315px;box-sizing: border-box;height: 34px;border:2px solid #E60012;
}
.search_form input[type=submit]{width: 80px;height: 34px;border:none;box-sizing: border-box;background: #E60012;color: white;position: absolute;top:9px;
}
.phone{border-radius: 25px;
}
/*nav style*/
nav ul li{padding-left:5px;padding-top: 1px;background: url('../img/li_bg.gif') no-repeat right center;
}
nav ul li a{padding-left: 30px;padding-right: 30px;
}
nav ul li a:hover{background: #fff;color:#E60012;
}/*bargain style*/
.bargain_left{width:200px;height: 300px;
}
.bargain_left>div:first-child{background: url("../img/tb9.gif") no-repeat 8px center;padding-left: 30px;padding-top: 8px;padding-bottom: 8px;border-top:2px solid var(--border-40);border-left:1px solid var(--border-dd);border-bottom:1px solid var(--border-dd);border-right:1px solid var(--border-dd);
}
.bargain_left>div:last-child{width: 100%;height: 263px;border-left: 1px solid var(--border-dd);border-bottom: 1px solid var(--border-dd);border-right: 1px solid var(--border-dd);background: url('../img/tuijian_bg.gif') repeat-x bottom;/*background-size: 100%;*/
}
.bargain_goods{width: 100%;box-sizing: border-box;border-bottom: 1px dotted var(--border-dd);
}
.bargain_goods>img{height: 60px;border:1px solid var(--border-dd)
}
.bargain_goods>div{height: 60px;
}.bargain_center{width: 530px;height: 300px;
}
.bargain_right{width: 238px;height: 300px;box-sizing: border-box;
}
.bargain_right_top{padding:8px 0px;border-top-left-radius: 5px;border-top-right-radius: 5px;
}
.bargain_right_bottom{border:1px solid red;height: 265px;box-sizing: border-box;border-left: 1px solid var(--border-dd);border-right: 1px solid var(--border-dd);border-bottom: 1px solid var(--border-dd);
}
.bargain_right_bottom ul li{line-height: 30px;height: 30px;border-bottom: 1px #ddd dashed;list-style:url("../img/tb6.gif") inside;padding-left: 1px;
}
.bargain_right_bottom ul li a{color:#333;
}
.bargain_right_bottom ul li:hover a{color:orange;
}/*新品推荐 开始*/
.newGoods{height: 270px;background: url('../img/hy_rtt.gif') repeat-x;
}
.newGoods_title{background: url('../img/tb8.gif') no-repeat 10px center;padding-left: 30px;padding-top: 10px;padding-bottom: 10px;
}
.newGoods_goods{width: 100%;height: 231px;/*border:1px solid red;*/box-sizing: border-box;background: url("../img/tuijian_bg.gif") repeat-x bottom;
}
.newGoods_goods div{width: 195px;height: 225px;background: url("../img/tuijian_bg1.gif") no-repeat right;margin-top: 3px;border: 1px solid transparent;box-sizing: border-box;
}
.newGoods_goods div>div:hover{border:1px solid orange;box-sizing: border-box;
}
.newGoods_goods div>div{width:152px;height: 152px;
}
.newGoods_goods div>div>a>img{width: 100%;height: 100%;
}
.newGoods_goods div>p:nth-of-type(1){/*border:1px solid red;*/margin: 5px 0px;padding-left: 15px;
}
.newGoods_goods div>p:nth-of-type(1)>a{color: var(--font-555);
}
.newGoods_goods div>p:nth-of-type(2)>small{color:#888;text-decoration: line-through;
}
/*前端模块通用样式 */
.web{background: url('../img/hy_rtt.gif') repeat-x;
}
.web_title{background: url('../img/tb8.gif') no-repeat 10px center;padding-left: 30px;padding-top: 10px;padding-bottom: 10px;box-sizing: border-box;border-left:1px solid var(--border-dd);border-right:1px solid var(--border-dd)
}
.web_body{height: 459px;box-sizing: border-box;
}
.web_body_left{width: 734px;border-left:1px solid var(--border-dd);border-top:1px solid var(--border-dd);box-sizing: border-box;
}
.web_body_left>div{width: 183px;height: 229px;box-sizing: border-box;border-bottom: 1px solid var(--border-dd);border-right: 1px solid var(--border-dd);float: left;
}
.web_body_left>div>div:first-child{width: 150px;height: 150px;margin: 10px auto 8px auto;
}
.web_body_left>div>div:first-child>a>img{width: 100%;
}
.web_body_right{box-sizing: border-box;width: 236px;border:1px solid var(--border-dd);
}
.web_body_right>div:first-child{height: 32px;line-height: 32px;border-top: 1px solid var(--border-dd);border-bottom: 1px solid var(--border-dd);background: #f8f8f8;
}
.web_body_right>ul{padding: 0px 5px;box-sizing: border-box;
}
.web_body_right>ul>li{padding: 11px 0px;box-sizing: border-box;border-bottom: 1px dotted var(--border-dd);
}
.web_body_right>ul>li>span:first-child{width:62px;height: 62px;border:1px solid var(--border-dd);box-sizing: border-box;
}
.web_body_right>ul>li>span:first-child img{width: 100%;height: 100%;
}
.web_body_right>ul>li>span:last-child {margin-left: 5px;padding-top: 2px;height: 62px;box-sizing: border-box;
}
.web_body_right>ul>li>span:last-child>a{width: 100%;height: 38px;
}
/*网站底部*/
.fingerpost{height: 135px;border:1px solid var(--border-d4);box-sizing: border-box;
}
.fingerpost>div:not(.qq,.bottom-libg){width: 175px;height: 100%;background: url("../img/item_bg.gif") repeat-x;padding: 10px 20px;box-sizing: border-box;
}
.fingerpost>div>h3{padding-bottom: 8px;background: url("../img/link_bg.gif") repeat-x center bottom;
}
.fingerpost>div>ul{padding-bottom: 30px;
}
.fingerpost>div>ul>li{list-style: url("../img/tb6.gif") inside;line-height: 22px;
}
.fingerpost>.bottom-libg{width: 2px;height: 100%;background: url("../img/bottom_libg.gif") no-repeat;padding: 0px;
}
.qq{height: 100%;width: 270px;box-sizing: border-box;
}
.qq>div:last-child{height: 36px;background: url("../img/foot_tel.gif") no-repeat left center;width: 243px;margin-top: 10px;line-height: 33px;color: var(--font-white);font-size: 20px;padding-left: 100px;
}
.foot>div:last-child>a{color:green;
}
.foot>div:last-child>a:hover{color: orange;
}
- index.html文件内容
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>EWshop首页</title><link rel="stylesheet" href="./css/global.css" /><link rel="stylesheet" href="./css/ewshop.css" /><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3979780_xm8vkr6gys.css"></head><body><!--公共头部--><header><!--头部内容--><div id="top" class="w-100 border-top border-box bg-color-f5 border-bottom border-dd"><div class="top w-980px overflow-hidden m-auto"><div class="top_left fl py-1 font-666">您好，欢迎使用EWShop商城系统</div><div class="top_right fr"><ul class="w-100 fl py-1"><li class="fl"><a href="" class="fl px-3 font-666">登录</a><span class="font-dddadb fl">|</span></li><li class="fl"><a href="" class="fl px-3 font-666">注册</a><span class="font-dddadb fl">|</span></li><li class="fl"><a href="" class="fl px-3 font-666"><i class="iconfont icon-gouwuche"></i>购物车<span class="font-red">0</span>件</a><span class="font-dddadb fl">|</span></li><li class="fl"><a href="" class="fl px-3 font-666">订单查询</a></li></ul></div></div></div><!--搜索区域--><div class="search my-4 w-980px m-auto"><div class="fl logo"><img src="./img/logo.png" class="w-100" alt=""></div><div class="fl search_form"><form action="" method="get"><input type="search" name="search" id=""><input type="submit" value="搜索" /></form></div><div class="fr phone border border-dd bg-color-f5 font-16 font-red font-weight-bold mt-2 py-1 px-3">咨询热线：400-700-8888</div></div><div class="c"></div><!--导航区域--><nav class="w-980px overflow-hidden my-2 m-auto bg-color-red"><ul class="fl"><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">首页</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">前端</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">后端</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">云计算</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">产品设计</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">前沿</a></li><li class="fl"><a href="" class="font-white font-weight-bold fl font-14 py-2 px-4">关于我们</a></li></ul></nav><!--广告--><div class="w-980px m-auto"><img src="./img/ad.png" alt=""></div></header><!--特价商品--><section class="bargain mt-2 w-980px overflow-hidden m-auto "><div class="bargain_left fl"><div class="font-14 font-weight-bold bg-color-fc border-box w-100 font-555 pl-4">特价商品</div><div class="bargain_left_bottom border-box fl px-1"><div class="bargain_goods fl py-2"><img src="./img/s.png" class="fl" alt=""><div class="fr px-1"><a class="font-12px font-555">《细说PHP》 第4版</a><p class="font-12px mt-4"><span class="font-red">￥108.0</span><del class="font-555">￥158.0</del></p></div></div><div class="bargain_goods fl py-2"><img src="./img/s.png" class="fl" alt=""><div class="fr px-1"><a class="font-12px font-555">《细说PHP》 第4版</a><p class="font-12px mt-4"><span class="font-red">￥108.0</span><del class="font-555">￥158.0</del></p></div></div><div class="bargain_goods fl py-2"><img src="./img/s.png" class="fl" alt=""><div class="fr px-1"><a class="font-12px font-555">《细说PHP》 第4版</a><p class="font-12px mt-4"><span class="font-red">￥108.0</span><del class="font-555">￥158.0</del></p></div></div></div></div><div class="bargain_center border-box overflow-hidden fl"><img src="./img/2020-0827-5f474a7259d67.png" class="w-100 h-100" alt=""></div><div class="bargain_right fr"><div class="bargain_right_top fl w-100 bg-color-red"><div class="fl ml-2 font-white font-weight-bold font-14">网站公告</div><a href="" class="fr mr-2 font-white font-weight-bold font-14">更多>></a></div><div class="bargain_right_bottom fl w-100"><ul class="px-1"><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li><li><a href="">2020年新书商家，共有新品3000套</a></li></ul></div></div></section><!--商品推荐--><section class="w-980px newGoods overflow-hidden my-2 m-auto border border-box border-dd"><div class="newGoods_title font-14 font-555 font-weight-bold">商品推荐</div><div class="newGoods_goods"><div class="fl"><div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div><p><a href="">《细说PHP》第2版</a></p><p class="mt-2 align-center"><span class="font-16 font-red">￥78.0</span><small class="">￥118.0</small></p></div><div class="fl"><div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div><p><a href="">《细说PHP》第2版</a></p><p class="mt-2 align-center"><span class="font-16 font-red">￥78.0</span><small class="">￥118.0</small></p></div><div class="fl"><div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div><p><a href="">《细说PHP》第2版</a></p><p class="mt-2 align-center"><span class="font-16 font-red">￥78.0</span><small class="">￥118.0</small></p></div><div class="fl"><div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div><p><a href="">《细说PHP》第2版</a></p><p class="mt-2 align-center"><span class="font-16 font-red">￥78.0</span><small class="">￥118.0</small></p></div><div class="fl"><div class="m-auto mt-3"><a href="" class=""><img class="" src="./img/2020-0820-5f3e084e2b714.png" alt=""></a></div><p><a href="">《细说PHP》第2版</a></p><p class="mt-2 align-center"><span class="font-16 font-red">￥78.0</span><small class="">￥118.0</small></p></div></div></section><div class="c"></div><!--前端--><section class="web w-980px m-auto overflow-hidden border-box my-2"><div class="web_title fl w-100"><div class="fl font-14 font-555 font-weight-bold">前端</div><div class="fr pr-1"><a href="" class="font-555">更多>></a></div></div><div class="web_body fl w-100 mt-2"><div class="web_body_left fl h-100"><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div></div><div class="web_body_right fr h-100"><div class="w-100 fl font-14 font-555 font-weight-bold pl-2 border-box">【前端】 热销排行</div><ul class="fl w-100"><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li></ul></div></div></section><!--云计算--><section class="web w-980px m-auto overflow-hidden border-box my-2"><div class="web_title fl w-100"><div class="fl font-14 font-555 font-weight-bold">云计算</div><div class="fr pr-1"><a href="" class="font-555">更多>></a></div></div><div class="web_body fl w-100 mt-2"><div class="web_body_left fl h-100"><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div><div><div><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></div><div class="pl-2"><a href="" class="font-555">《细说网页制作》</a></div><div class="align-center mt-3"><span class="font-16 font-red">￥38.0</span><del class="font-666">￥58.0</del></div></div></div><div class="web_body_right fr h-100"><div class="w-100 fl font-14 font-555 font-weight-bold pl-2 border-box">【前端】 热销排行</div><ul class="fl w-100"><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li><li class="fl w-100"><span class="fl"><a href=""><img src="./img/2020-0820-5f3e08d935cc4.png" alt=""></a></span><span class="fl"><a href="" class="font-555 fl">《细说网页制作》</a><span class="font-red">￥ 38.0</span></span></li></ul></div></div></section>
<!-- 底部广告--><div class="w-980px m-auto border-box"><img src="./img/ad.png" alt=""></div>
<!-- 网站底部--><footer class="w-980px m-auto overflow-hidden border-box my-2"><div class="fl fingerpost w-100"><div class="fl"><h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3><ul class="pl-2 mt-1"><li><a href="" class="font-666">订单查询</a></li><li><a href="" class="font-666">验货与签收</a></li><li><a href="" class="font-666">配送时间及运费</a></li></ul></div><div class="fl bottom-libg"></div><div class="fl"><h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3><ul class="pl-2 mt-1"><li><a href="" class="font-666">订单查询</a></li><li><a href="" class="font-666">验货与签收</a></li><li><a href="" class="font-666">配送时间及运费</a></li></ul></div><div class="fl bottom-libg"></div><div class="fl"><h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3><ul class="pl-2 mt-1"><li><a href="" class="font-666">订单查询</a></li><li><a href="" class="font-666">验货与签收</a></li><li><a href="" class="font-666">配送时间及运费</a></li></ul></div><div class="fl bottom-libg"></div><div class="fl"><h3 class="font-666 pl-2 mt-2 font-14">用户指南</h3><ul class="pl-2 mt-1"><li><a href="" class="font-666">订单查询</a></li><li><a href="" class="font-666">验货与签收</a></li><li><a href="" class="font-666">配送时间及运费</a></li></ul></div><div class="fl bottom-libg"></div><div class="fl qq pl-3"><div class="qq_title font-666 font-16 mt-3">欢迎使用EWShop商城系统</div><div class="mt-2"><a href=""><img src="./img/button_11.gif" alt=""></a><a href=""><img src="./img/button_11.gif" alt=""></a><a href=""><img src="./img/button_11.gif" alt=""></a></div><div>400-700-8888</div></div></div><div class="link fl w-100 p-2 border-box border border-dd my-2"><span class="font-666 mr-2">友情链接:</span><a href=""class="font-666 ml-2">学习猿地</a><a href=""class="font-666 ml-2">学习猿地</a><a href=""class="font-666 ml-2">学习猿地</a><a href=""class="font-666 ml-2">学习猿地</a></div><div class="foot my-3"><div class="align-center font-333">Copyright © 学习猿地 2019-2022 All Rights Reserved 京ICP备1101010121号 京公网安备 101010101</div><div class="align-center font-333 my-1">咨询热线：400-700-8888 咨询QQ：779050720,46458494,8888888 </div><div class="align-center font-333">Powered by<a href="">EDUWORK</a></div></div></footer></body>
</html>
![[ACM独立出版]2024年虚拟现实、图像和信号处理国际学术会议（ICVISP 2024）](http://pic.xiahunao.cn/[ACM独立出版]2024年虚拟现实、图像和信号处理国际学术会议（ICVISP 2024）)
