0721

mac2022-06-30 22

css

@charset "utf-8"; #top,#top_main,#nav,#main,#recent_view,#foot_box,#footer,#banner{ width:1200px; margin:auto; overflow:hidden; } /* 头部 */ #top{ height:37px; line-height:37px; } #top .topLeft a{ color:#0076b8; } #top .topLeft,#top .topRight{overflow:hidden} #top a.org{ color:#ff7800; font-weight:normal; } #top a.bold{ font-weight:700; } #top .topRight li{ float:left; margin-right:5px; } #infor_index{ padding: 0px 6px; margin-left: 4px; font-weight: bold; color: #fff; background-color: red; } #top .topRight li b{ height:10px; border-right:1px solid #ddd; margin-right:5px; } #top .topRight li span{ display:inline-block; height:17px; width:20px; } #top .topRight li span:first-child{ background: url(images/nav.png) no-repeat 0 -267px; vertical-align: sub; } #top .topRight li span:nth-child(2){ background: url(images/nav.png) no-repeat 0 -297px; vertical-align: sub; } /* #top .topRight li span:last-child(2){ background: url(images/nav.png) no-repeat 0 -61px; vertical-align: sub; } */ #top_main .top_text{ width:190px; padding:20px; } #top_main .top_text p{ text-align:center; font-size:14px; color:#797979; font-weight:600; } #top_main .top_main_bot{ padding:15px 0px; position:relative; } #top_main .search_box{ padding:9px; } #top_main .search_box .allType { width:112px; height:38px; line-height:38px; text-align:center; border:1px solid #ddd; } #top_main .search_box .search_input{ width:320px; height:36px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } #top_main .search_box .search{ overflow:hidden; } #top_main .search_box .search_button{ text-align:center; color:#fff; background-color:#0076b9; width:76px; height:40px; border:1px solid #ddd; font-size:16px; padding:0px 14px; } /* 搜索中高端品牌 */ #search_other{ text-align:center; color:#2894ff; background-color:transparent; height:40px; border:1px solid #0093e6; font-size:14px; margin-left:12px; cursor:pointer } #search_other:hover{ text-decoration: underline; color:#ff8d26; } /* 热词 */ .search_box .hotword{ margin-top:5px; } .search_box .hotword a{ margin-right:5px; color:#ff7800; } .search_box .hotword a:first-child,.search_box .hotword a:last-child{ color:#bbbbbb; } .search_box .hotword a:nth-child(2){ color:#2894ff; } /* 购物车 */ #shopping_cart{ width:150px; height:40px; margin-left:20px; background: url(images/lcsc_list_pic01_1.png) no-repeat 0 -278px; } #showping_index{ display: inline-block; position: absolute; top: 17px; padding: 1px 6px; right: 117px; color: #fff; background-color: red; } /*导航*/ #nav{ height:50px; background-color:#0093e6; } #category{ width:206px; background-color:#ff7800; padding-left:10px; } #category>a{ display:inline-block; height:50px; line-height:50px; background-color:#ff7800; font-size:16px; font-weight: bold; text-decoration: none; color:#fff; } #nav_items li{ float:left; width:123px; height:50px; } #nav_items li a{ display:inline-block; width:123px; height:50px; text-align:center; line-height:50px; color:#fff; font-size:14px; border-left: 1px solid #66bef0; } #nav_items li a:hover{ text-decoration: none; background-color:#0076b8; } /*侧边栏导航*/ #cate_box{ width:214px; height:470px; overflow:hidden; border:1px solid #dedede; } #cate_box li{ float:left; width:196px; height:36px; padding:0 10px; line-height:36px; } #cate_box li:nth-child(odd){ background-color:#f7f7f7; } #cate_box li h3{ font-weight:normal; font-size:12px; } #cate_box li:hover{ background-color:#fff; border-top:1px solid #dedede; border-bottom:1px solid #dedede; } #cate_box li:last-child a{ color:#f00 !important; margin-left:10px; /* background-color:red; */ } a.ass_pic_470{ background: url(images/index_nav_pic.png) no-repeat 8px -17px; text-indent: 30px; float: left; } /*轮播*/ #slider{ position:relative; overflow:hidden; } #idxs{ position:absolute; right:40px; bottom:20px; } #idxs li{ float:left; display:inline-block; width:14px; height:14px; text-align:center; line-height:14px; border-radius: 50%; background-color:#000; border:1px solid #fff; color:#fff; cursor:pointer; margin-left:5px; } #idxs li.cur{ background-color:#f60; } #focus_extra{ width:214px; height:470px; border:1px solid #ddd; } #focus_extra ul.ex_top{ padding:15px 10px; } #focus_extra ul li{ padding:10px 5px; } #focus_extra ul li.no_log>span{ display:inline-block; width:44px; height:44px; vertical-align: middle; background:url(images/index_icon.png) no-repeat 0 -82px; } .ex_top .btn{ width:83px; height:32px; transition:.3s; line-height:32px; border:none; border-radius:3px; background-color:#8c8a8a; cursor: pointer; color:#fff; outline: 0; } .ex_top .btn.btn01{ background-color:#ff7800; } /* 商城公告 */ .ex_content_top{ height:42px; line-height:42px; background-color:rgb(233, 233, 233); font-size:16px; padding:0 8px; } .ex_content_top>b{ font-weight: normal; font-size:18px; } .ex_content_bottom li{ font-size:13px; } .ex_content_bottom li:befor{ font-size:13px; } /* 合作品牌和成交记录 */ .box{ border:1px solid #ddd; } .box .box-head{ height:42px; line-height:42px; padding:0 15px; font-size:18px; } .box .box-head>a{ float:right; font-size:16px; } .box .box-head>b{ font-weight:normal } .box .box-head>span{ font-size:12px; color:#666; } .box .box-head>span>a{ color:#ff7e6a; font-weight:700; } #main>div.hezuo{ width:378px; overflow:hidden; } #main>div.hezuo ul img{ transition:transform 1s; } #main>div.hezuo ul img:hover{ transform: rotateY(360deg); } #main>div.dear_record{ width:818px; height:210px; overflow:hidden; position:relative; } #sealContent{ position: absolute; top:34px; } #main>div.hezuo li{ float:left; } #tbl-content table{ border-collapse: collapse; font-size:14px; } #tbl-content table tr{ height:34px; } #tbl-content table td{ text-align:center; } #tbl-content .tbl-head td.odd{ background-color:#e2e0e1; } #tbl-content .tbl-head td.even{ background-color:#ededed; } View Code

index

<!DOCTYPE HTML> <html> <head> <title>电商网站</title> <meta charset="utf-8" /> <link href="common.css" type="text/css" rel="Stylesheet" /> <link href="index.css" type="text/css" rel="Stylesheet" /> <script src="js/jquery-1.11.3.js"></script> <script src="js/index.js"></script> </head> <body>  <header id="top"> <div class="topLeft lf"> <img src="Images/star.jpg" alt=""> <span>您好，欢迎来到商城！</span> <a href="#" class="bold">[登录]</a> <a href="#" class="bold">[免费注册]</a> <a href="#" class="org">[PCB/钢网下单系统]</a> <a href="#" class="org">[进入社区]</a> </div> <div class="topRight rt"> <ul class="rt"> <li><span></span><a href="">会员中心</a></li> <li><b></b><span></span><a href="#">系统消息</a><a href="#" id="infor_index">0</a></li> <li><b></b><span></span><a href="">手机客户端</a></li> <li><b></b><a href="">其他入口</a></li> <li><b></b><a href="">Global Website</a></li> </ul> </div> <div class="clear"></div> </header>  <div id="top_main"> <p class="of"><a><img src="Images/advance.jpg" class="lf" alt=""></a></p> <div class="of top_main_bot" > <div class="top_left lf"><a href="#"><img src="Images/logo.jpg" class="lf" alt=""></a></div> <div class="top_text lf"> <p>在线订单成交量全国领先的一站式器件才够自营商城</p> </div> <div class="search_box lf"> <div class="search">  <div class="allType lf"> <a href="#">全部分类</a> <span>></span> </div> <div class="lf"> <input class="search_input" placeholder="请输入型号和产品相关信息" type="text">  </div> <div class="lf"> <input id=search class="search_button" type="button" value="搜索"> </div> <div class="lf"> <input id=search_other class="" type="button" value="实名认证"> </div> <div class="lf" id="shopping"> <input id=shopping_cart class="" type="button" value="我的购物车"> </div> </div>  <div class="hotword"> <a href="#">15元优惠</a> <a href="#">下单最高单返400元</a> <a href="#">回帖赢1000元红包</a> <a href="#">90元品牌优惠券</a> <a href="#">BOM导入搜索</a> <a href="#">资料查找</a> </div> </div> <b id="showping_index">1</b> </div> </div>  <nav id="nav"> <div id="category" class="lf"> <a href="#">全部商品分类</a>  <b></b> </div> <ul class="lf" id="nav_items"> <li><a href="#">商城首页</a></li> <li><a href="#">元器件选购</a></li> <li><a href="#">商品目录</a></li> <li><a href="#">IC代付代售</a></li> <li><a href="#">代付代售型号</a></li> <li><a href="#">方案验证版</a></li> <li><a href="#">海外现货样品</a></li> <li><a href="#">立创社区</a></li> </ul> </nav>  <div id="banner"> <ul id="cate_box" class="lf"> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(16)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(5441)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a class="ass_pic_470" href="">免费赠品区(18479)</a> </h3> </li> <li> <h3> <b></b> <a href="">更多商品分类(18479)</a> </h3> </li> </ul>  <div id="slider" class="lf"> <ul id="imgs"> <li> <a href="#"> <img src="Images/baner01.jpg" alt=""> </a> </li> </ul> <ul id="idxs"> <li class="cur">1</li> <li>2</li> <li>3</li> </ul> </div>  <div id="focus_extra" class="lf"> <ul class="ex_top"> <li class="no_log">  <span></span> Hi! 你好 </li> <li> <button class="btn btn01">请登录</button> <button class="btn btn02">立即注册</button> </li> </ul> <div class="ex_content"> <div class="ex_content_top"> <b>商城公告</b> <a href="javascript:;" class="rt">更多 ></a> </div> <div class="ex_content_bottom"> <ul> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> <li> <span>> </span><a href="javascript:;">IC代付代售调整功能上线公告</a> </li> </ul> </div> </div> </div> </div>  <section id="main">  <div class="box hezuo lf"> <div class="box-head"> <b>合作品牌</b> <a href="javascript:;">更多 ></a> </div> <ul> <li><a href=""><img src="Images/brand01.jpg" alt=""></a></li> <li><a href=""><img src="Images/brand07.jpg" alt=""></a></li> <li><a href=""><img src="Images/brand08.jpg" alt=""></a></li> <li><a href=""><img src="Images/brand09.jpg" alt=""></a></li> </ul> </div>  <div class="box dear_record lf"> <div class="box-head"> <b>成交记录</b> <span> 今天成交 <a href="javascript:;" id="todayOrdersTag">2166</a> 单（金额 <a href="javascript:;" id="todayOrdersMoney">￥3126302.21</a> ），近3天 <a href="javascript:;" id="sectOrdersTag">3828</a> 单，近30天 <a href="javascript:;" id="totalOrdersTag">49772</a> 单 </span> <a href="javascript:;">更多 ></a> </div> <div id="tbl-content" style="position:relative;overflow:hidden"> <table class="tbl-head" style="width:100%"> <tr> <td class="not_bt01 odd" width="12%">客户名称</td> <td class="not_bt01 even" width="19%">订单编号</td> <td class="not_bt01 odd" width="19%">下单时间</td> <td class="not_bt01 not_bt_money even" width="12%">下单金额</td> <td class="not_bt01 odd" width="19%">订单状态</td> </tr> </table> <table class="tbl-content" id="sealContent" style="width:100%"> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> <tr> <td width="12%"> 赵** </td> <td width="19%">SO1807232496</td> <td width="19%"> 18分钟前 </td> <td class="not_bt_money" width="12%">￥40.7</td> <td width="19%">待取货</td> </tr> </table> </div> </div> <div class="clear"></div> </section>  <footer id="recent_view"></footer>  <footer id="foot_box"></footer>  <footer id="footer"></footer> </body> </html> View Code

转载于:https://www.cnblogs.com/pengfei25/p/9347211.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)