HTML与CSS实现淘宝静态页面（参考版）

本文章内容是利用HTML与CSS实现淘宝静态页面，没有js交互。点我下载源代码。由于CSDN下载源码需要积分，所以建议拉到文章底部，免费获取源码

效果

html代码

<html>
<head><title>淘宝网-淘！我喜欢</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="index.css"></head>
<body><div class="wrapper"><!-- 导航条+ad --><div class="top-nav-wrap"><div class="top-nav"><ul class="top-nav-l"><li class="top-nav-menu china"><span class="c-span">中国大陆</span><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu login-sign"><a href="#" class="login">亲，请登录</a><a href="#" class="sign">免费注册</a></li><li class="top-nav-menu"><a href="#">手机逛淘宝</a></li></ul><ul class="top-nav-r"><li class="top-nav-menu my-taobao"><a href="#">我的淘宝</a><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu shop-car"><a href="#"><span class="bg-pic shopCar-pic"></span><span>购物车</span></a><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu like"><a href="#"><span class="bg-pic like-pic"></span><span>收藏夹</span></a><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu goods"><a href="#">商品分类</a></li><li class="top-nav-menu cut-off"><span>|</span></li><li class="top-nav-menu seller"><a href="#">卖家中心</a><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu customer"><a href="#">联系客服</a><span class="bg-pic xsj-pic"></span></li><li class="top-nav-menu web-nav"><a href="#"><span class="bg-pic web-nav-pic"></span><span>网站导航</span></a><span class="bg-pic xsj-pic"></span></li></ul></div><div class="ad-wrap"><div class="ad"><img src=""></div>    </div></div><!-- 搜索区域 --><div class="search-wrap"><div class="search-con"><div class="logo-box"></div><div class="search-box"><div class="search-t"><div class="search-tab"><ul><li class="select">宝贝</li><li>天猫</li><li>店铺</li></ul></div><div class="search-panel"><a href="#" class="sousuo"></a><form action=""><div class="btn"><button class="submit">搜索</button></div><div class="search-inp-box"><div class="search-inp"><!-- placeholder为灰色字体 --><input type="text" name="" placeholder="荣耀10降价"></div></div></form><a href="#" class="camera"></a></div></div><div class="search-bl"><a href="#" class="active">新款连衣裙</a><a href="#">四件套</a><a href="#">潮流T恤</a><a href="#">时尚女鞋</a><a href="#" class="active">短裤</a><a href="#">半身裙</a><a href="#">男士外套</a><a href="#">墙纸</a></div></div><div class="code-box"><a href="#" class="phone">手机淘宝</a><a href="#" class="code"></a><a href="#" class="close">X</a></div></div></div><!-- 导航条 --><div class="screen-nav"><div class="screen-nav-con"><h2>主题市场</h2><ul><li><a href="#">天猫</a></li><li><a href="#">聚划算</a></li><li><a href="#">天猫超市</a></li></ul>   <ul><li><a href="#">|</a></li><li><a href="#">淘抢购</a></li><li><a href="#">电器城</a></li><li><a href="#">司法拍卖</a></li><li><a href="#">淘宝心选</a></li><li><a href="#">兴农扶贫</a></li></ul><ul><li><a href="#">|</a></li><li><a href="#">飞猪旅行</a></li><li><a href="#">智能生活</a></li><li><a href="#">苏宁易购</a></li></ul></div></div><!-- 图片主体展示部分 --><div class="screen-box"><div class="main"><div class="main-inner"><div class="inner-left"><ul><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li><li><a href="#">乐器</a> /<a href="#">乐器</a> /<a href="#">乐器</a><span></span></li></ul></div><div class="inner-content"><div class="pic-box"><img src="./img/pic2.png" alt=""></div><div class="inner-mall"><div class="head"><img src="./img/tm.png" alt=""><span class="tm">理想生活上天猫</span><a href="#"><img src="./img/pic3.png" alt=""></a></div></div></div><div class="inner-right"><a href="#"><img src="./img/pic1.png" alt=""></a><div class="hot"><span>今日热卖</span><a href="#"><img src="./img/pic4.png" alt=""></a></div></div></div><div class="main-bottom"><div class="content"><div class="logo-box"></div><a href="#"><img src="./img/pic5.png"><h4>万圣节去哪玩？良阅二次元游园会等你来！</h4><p>哈喽，大家好，我是你们的微漫酱！万圣节快要到了，在此推荐给大家一个好玩的二次元线下活动，一起来了解一下把！</p></a></div></div></div><div class="col-right"><div class="member"><div class="member-head"><div class="head"><a href="#"></a></div><span class="info">hi!您好</span><p><a href="#" class="icon"><span></span>领淘金币抵钱</a><a href="#" class="club"><span></span>会员俱乐部</a></p></div><div class="member-foot"><a href="#" class="login">登录</a><a href="#">注册</a><a href="#">开店</a></div></div><div class="message"><a href="#">网上有害信息举报<span></span></a></div><div class="notice"><div class="title"><ul><li><a href="#">公告</a></li><li><a href="#">公告</a></li><li><a href="#" class="active">论坛</a></li><li><a href="#">公告</a></li><li><a href="#">公告</a></li></ul></div><div class="content"><ul><li><a href="#" class="active">新增淘宝网抽检标准</a></li><li><a href="#">新增淘宝网抽检标准</a></li><li><a href="#">新增淘宝网抽检标准</a></li><li><a href="#">新增淘宝网抽检标准</a></li></ul></div></div><div class="module"><ul><li><a href="#"><span class="icon1"></span><p>爱你</p></a></li><li><a href="#"><span class="icon2"></span><p>爱你</p></a></li><li><a href="#"><span class="icon3"></span><p>爱你</p></a></li><li><a href="#"><span class="icon4"></span><p>爱你</p></a></li><li><a href="#"><span class="icon5"></span><p>爱你</p></a></li><li><a href="#"><span class="icon6"></span><p>爱你</p></a></li><li><a href="#"><span class="icon7"></span><p>爱你</p></a></li><li><a href="#"><span class="icon8"></span><p>爱你</p></a></li><li><a href="#"><span class="icon9"></span><p>爱你</p></a></li><li><a href="#"><span class="icon10"></span><p>爱你</p></a></li><li><a href="#"><span class="icon11"></span><p>爱你</p></a></li><li><a href="#"><span class="icon12"></span><p>爱你</p></a></li></ul></div></div></div></div>
</body>
</html>

css代码

* {padding: 0;margin: 0;list-style: none;text-decoration: none;
}html, body {width: 100%;height: 100%;background-color: #f4f4f4;color: #3c3c3c;overflow-x: hidden; /*横向滚动条隐藏*/}.wrapper {width: 100%;height: 100%;
}/*上导航条*/
.wrapper .top-nav-wrap {width: 100%;height: 105px;
}.wrapper .top-nav-wrap .top-nav {width: 1190px;height: 35px;margin: 0 auto;}.wrapper .top-nav-wrap .top-nav .top-nav-l {float: left;
}.wrapper .top-nav-wrap .top-nav .top-nav-r {float: right;
}.wrapper .top-nav-wrap .top-nav ul li {float: left;margin-right: 7px;
}.wrapper .top-nav-wrap .top-nav a {color: #6c6c6c;font-size: 12px;line-height: 35px;padding: 0 6px;
} .wrapper .top-nav-wrap .top-nav a:hover {color: #f40;
}.wrapper .top-nav-wrap .top-nav .china {color: #3c3c3c;line-height: 35px;font-size: 13px;}.wrapper .top-nav-wrap .top-nav .bg-pic {display: inline-block;width: 6px;height: 3px; background-size: 100% 100%;vertical-align: middle;  /*垂直排列中间对齐*/
}.wrapper .top-nav-wrap .top-nav .c-span {padding: 0 6px;
}.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic {background-image: url('./img/xsj.png');
}.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic {background-image: url(./img/gwc.png);width: 12px;height: 12px;
}.wrapper .top-nav-wrap .top-nav .bg-pic.like-pic {background-image: url(./img/star.png);width: 12px;height: 12px;
}.wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic {background-image: url(./img/dh.png);width: 8px;height: 8px;
}.wrapper .top-nav-wrap .top-nav .cut-off span{line-height: 35px;color: #ddd;
}.wrapper .top-nav-wrap .ad-wrap {width: 100%;height: 70px;background-color: #4c174d
}.wrapper .top-nav-wrap .ad-wrap .ad {width: 1190px;margin: 0 auto;
}
.wrapper .top-nav-wrap .ad-wrap img {width: 100%;height: 70px;
}/*搜素区域*/
.wrapper .search-wrap {width: 100%;height: 97px;padding-top: 24px;background-color: #fff;
}.wrapper .search-wrap .search-con {position: relative;width: 1190px;height: 88px;margin: 0 auto;
}.wrapper .search-wrap .search-con .logo-box {position: relative; /*相对定位*/top: -10px; /*基于自身向上移动10px*/display: inline-block; /*基于下基准线对齐*/width: 190px;height: 105px;background-image: url('./img/logo.png');background-size: 100% 100%;}.wrapper .search-wrap .search-con .search-box {display: inline-block; width: 627px;height: 87px;vertical-align: top;margin-left: 50px;
}.wrapper .search-wrap .search-con .search-box .search-t {width: 627px; height: 62px;
}.wrapper .search-wrap .search-con .search-box .search-t .search-tab {height: 22px;margin-left: 17px;
}.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li {float: left;    width: 36px;height: 22px;color: #f40;font-size: 12px;line-height: 22px;text-align: center;margin-right: 4px;border-top-right-radius: 6px; /*圆角*/border-top-left-radius:6px;
}.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li.select {color: #fff;font-weight: 700; /*字体加粗*/background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
}.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li:hover {background-color: #ffeee5;
}.wrapper .search-wrap .search-con .search-box .search-t .search-panel {width: 627px;height: 40px;position: relative;
}.wrapper .search-wrap .search-con .search-box .search-t .search-panel form {}.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn {width: 74px;height: 40px;  position: absolute;top: 0;right: 0;border-top-right-radius: 20px; border-bottom-right-radius: 20px;overflow: hidden;border: none;
}.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn button {width: 100%;height: 100%;background: linear-gradient(to right, #ff9000 0, #ff5000 100%);/*css3线性渐变*/border: none;color: #fff;font-weight: 700;font-size: 18px;cursor: pointer; /*鼠标放上有小手显示*/
}   .wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp-box {width: 551px;height: 36px;border: 2px solid #ff5000;border-top-left-radius: 20px;border-bottom-left-radius: 20px;overflow: hidden;
}.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp {width: 551px;height: 36px;overflow: hidden;
}.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp input {width: 551px;height: 36px;padding: 6px 16px;border: none;outline: 0;text-indent: 10px;
}.wrapper .search-wrap .search-con .search-box .sousuo,
.wrapper .search-wrap .search-con .search-box .camera {display: inline-block;position: absolute;
} .wrapper .search-wrap .search-con .search-box .sousuo {width: 12px;height: 14px;top: 11px;left: 14px; background-image: url('./img/fdj.png');background-size: 100% 100%;
} .wrapper .search-wrap .search-con .search-box .camera {width: 20px;height: 22px;top: 11px;right: 90px;background-image: url('./img/camera.png');background-size: 100% 100%;
}.wrapper .search-wrap .search-con .search-box .search-bl {width: 627px;height: 20px;
}.wrapper .search-wrap .search-con .search-box .search-bl a{font-size: 12px;margin-right:8px;color: #666;
}.wrapper .search-wrap .search-con .search-box .search-bl a.active,
.wrapper .search-wrap .search-con .search-box .search-bl a:hover {color: #ff5000;
}.wrapper .search-wrap .search-con .code-box {display: inline-block;width: 76px; height: 90px;border: 1px solid #eee;vertical-align: top;margin-left: 120px;position: relative;
}.wrapper .search-wrap .search-con .code-box .phone {color: #ff5000;font-size: 14px;line-height: 20px;margin-left: 6px;
}.wrapper .search-wrap .search-con .code-box .code {display: inline-block;width: 62px;height: 62px;background: url('./img/ewm.png') no-repeat;background-size: 100% 100%;margin-left: 6px;
}.wrapper .search-wrap .search-con .code-box .close {width: 16px;height: 16px;text-align: center;line-height: 16px; /*垂直居中*/position: absolute;display: inline-block;top: 0;left: -18px;border: 1px solid #eee;color: : #ddd;font-size: 14px;
}/*搜索下的导航条*/
.wrapper .screen-nav {width: 1190px;height: 30px;background: linear-gradient(to right, #ff9000 0, #ff5000 100%);margin: 0 auto; /*实现左右居中*/
}.wrapper .screen-nav .screen-nav-con {width: 100%;height: 100%;
}.wrapper .screen-nav .screen-nav-con h2 {float: left;color: #fff;font-size: 16px;width: 190px;height: 100%;background-color: #ff5000;text-align: center;line-height: 30px;
}.wrapper .screen-nav .screen-nav-con ul {float: left;
}.wrapper .screen-nav .screen-nav-con ul li {float: left;margin:0 3px;padding: 0 4px;position: relative;
}.wrapper .screen-nav .screen-nav-con ul li a {line-height: 30px;color: #fff;font-weight: 700;
}.wrapper .screen-nav .screen-nav-con ul li:hover::before {content: "";display: block;width: 30px;height: 30px;background: url('./img/up.png') no-repeat;background-size: center;position: absolute;top: -10px;left: 50%;margin-left: -15px;
}/*主要图片展示内容*/.wrapper .screen-box {width: 1190px;height: 632px;margin: 0 auto; /*实现左右居中*/
}.wrapper .screen-box .main {float: left;width: 890px;height: 632px;
}.wrapper .screen-box .main .main-inner {width: 890px;height: 522px;
}.wrapper .screen-box .main .main-inner .inner-left {float: left;width: 190px;height: 522px;border: 1px solid #f40;background-color: #fff;border-top: none;
}.wrapper .screen-box .main .main-inner .inner-left ul li {width: 145px;height: 32px;padding-left: 25px;padding-right: 19px;position: relative;}.wrapper .screen-box .main .main-inner .inner-left ul li a {font-size: 14px;font-weight: 400;color: #666;line-height: 32px;
}.wrapper .screen-box .main .main-inner .inner-left ul li span {display: inline-block;width: 5px;height: 8px;position: absolute;right: 10px;top: 50%;margin-top: -4px;background-image: url('./img/yjt.png');background-size: 100% 100%;
}.wrapper .screen-box .main .main-inner .inner-left ul li:hover {background-color: #ffe4dc;
}.wrapper .screen-box .main .main-inner .inner-left ul li:hover a{color: #ff5000;
}.wrapper .screen-box .main .main-inner .inner-content {float: left;width: 520px;height: 522px;
}.wrapper .screen-box .main .main-inner .inner-content .pic-box {padding: 8px;
}.wrapper .screen-box .main .main-inner .inner-content .inner-mall {width: 520px;height: 230px;padding: 0 8px;
}.wrapper .screen-box .main .main-inner .inner-content .inner-mall .tm {font-size: 12px;color: #666;
}.wrapper .screen-box .main .main-inner .inner-right {float: left;padding: 8px;width: 160px;height: 522px;}.wrapper .screen-box .main .main-inner .inner-right .hot {font-size: 12px;margin-top: 11px;}.wrapper .screen-box .main .main-bottom {width: 890px;height: 100px;
}.wrapper .screen-box .main .main-bottom .content {background-color: #fff;padding: 14px 12px;margin-top: 10px;position: relative;
}.wrapper .screen-box .main .main-bottom .content .logo-box {width: 180px;height: 73px;background-image: url('./img/tbtt.png');background-size: 100% 100%;
}.wrapper .screen-box .main .main-bottom .content a {position: absolute;top: 14px;left: 200px;
}.wrapper .screen-box .main .main-bottom .content a img {float: left;
}.wrapper .screen-box .main .main-bottom .content a h4 {margin-top: 2px;margin-left: 144px;color: #333;line-height: 28px;font-size: 16px;height: 28px;
}.wrapper .screen-box .main .main-bottom .content a h4:hover {color: #ff5000;
}.wrapper .screen-box .main .main-bottom .content a p {margin-left: 144px;color: #999;height: 36px;overflow: hidden;line-height: 14px;margin-top: 3px;
}/*右侧部分*/
.wrapper .screen-box .col-right {float: left;width: 290px;height: 632px;
}.wrapper .screen-box .col-right .member {width: 290px;height: 132px;background-image: url('./img/bg.png');background-size: 100% 100%;margin-top: 10px;
}.wrapper .screen-box .col-right .member .member-head {width: 290px;height: 91px;
}.wrapper .screen-box .col-right .member .member-head .head {width: 290px;height: 56px;text-align: center;}.wrapper .screen-box .col-right .member .member-head .info {display: block;width: 290px;height: 17px;color: #3c3c3c;font-size: 14px;line-height: 17px;text-align: center;
}.wrapper .screen-box .col-right .member .member-head .head a {display: inline-block;width: 50px;height: 50px;border-radius: 50%;background-image: url('./img/tx.jpg');background-size: 100% 100%;
}.wrapper .screen-box .col-right .member .member-head p {width: 290px;height: 17px;text-align: center;line-height: 17px;
}.wrapper .screen-box .col-right .member .member-head p a {display: inline-block;width: 72px;height: 17px;border-radius: 9px;background-color: #ffe4db;font-size: 12px;color: #ff5000;padding: 0 29px;position: relative;
}.wrapper .screen-box .col-right .member .member-head p a span {position: absolute;display: inline-block;width: 16px;height: 16px;top: 0;left: 10px;}.wrapper .screen-box .col-right .member .member-head p a.icon span {background-image: url('./img/pics.png');background-position: 0 -572.5px; /*调整图片位置*/
}.wrapper .screen-box .col-right .member .member-head p a.club span {background-image: url('./img/pics.png');background-position: 0 -528px;
}.wrapper .screen-box .col-right .member .member-foot {width: 290px;height: 40px;text-align: center;;padding-top: 10px;
}.wrapper .screen-box .col-right .member .member-foot a {display: inline-block;height: 25px;width: 75px;background: linear-gradient(to right, #ff5000 0, #ff6f06 100%);border-radius: 4px;text-align: center;line-height: 25px;font-size: 14px;color: #fff;font-weight: 700;
}.wrapper .screen-box .col-right .member .member-foot a.login {width: 92px;
}.wrapper .screen-box .col-right .message {width: 290px;height: 26px;
}.wrapper .screen-box .col-right .message a {display: inline-block;width: 100%;height: 100%;background-color: #ffe4dd;color: #f40;font-size: 12px;text-align: center;line-height: 26px;position: relative;
}.wrapper .screen-box .col-right .message a span {display: inline-block;width: 10px;height: 10px;position: absolute;top: 9px;right: 52px;background-image: url('./img/ysj.png');background-size: 100% 100%;
}.wrapper .screen-box .col-right .notice {height: 98px;width: 100%;padding-top: 10px;
}.wrapper .screen-box .col-right .notice ul li {float: left;
}.wrapper .screen-box .col-right .notice .title {height: 24px;width: 100%;padding: 0 8px;/*box-sizing: border-box;*/ /*css3, 将当前标准模式下盒模型转换成IE模式下的盒模型*/
}.wrapper .screen-box .col-right .notice .title li {width: 32px;height: 20px;margin: 0 11px;text-align: center;
}.wrapper .screen-box .col-right .notice .title li a {color: #3c3c3c;font-size: 13px;line-height: 20px;padding: 0 2px;}.wrapper .screen-box .col-right .notice .title li a.active {font-weight: 700;border-bottom: 2px solid #f40;
}.wrapper .screen-box .col-right .notice .title li a:hover,
.wrapper .screen-box .col-right .notice .content li a.active,
.wrapper .screen-box .col-right .notice .content li a:hover {color: #f40;
}.wrapper .screen-box .col-right .notice .content {width: 100%;height: 50px;padding: 9px;/*box-sizing: border-box;*/ /*css3, 将当前标准模式下盒模型转换成IE模式下的盒模型*/
}.wrapper .screen-box .col-right .notice .content li {width: 130px;height: 25px;line-height: 25px;text-align: center;
}.wrapper .screen-box .col-right .notice .content li a {font-size: 12px;color: #3c3c3c;}.wrapper .screen-box .col-right .module {width: 100%;height: 230px;
}.wrapper .screen-box .col-right .module ul li {float: left;width: 72px;height: 75px;border: 1px solid #eee;box-sizing: border-box; /*css3, 将当前标准模式下盒模型转换成IE模式下的盒模型*/
}.wrapper .screen-box .col-right .module ul li:hover {border: 1px solid #f40;
}.wrapper .screen-box .col-right .module ul li a {display: block;text-align: center;margin-top: 10px;
}.wrapper .screen-box .col-right .module ul li a span {display: inline-block;width: 24px;height: 24px;background: url('./img/pics.png');}.wrapper .screen-box .col-right .module ul li a p {color: #333;font-size: 12px;
}.wrapper .screen-box .col-right .module ul li a span.icon1{background-position: 0 0;
}.wrapper .screen-box .col-right .module ul li a span.icon2{background-position: 0 -88;
}

感谢观看，对我写的文章有兴趣的同学可以微信扫码关注我的微信公众号，本文源代码也可以从里面免费获取

HTML与CSS实现淘宝静态页面（参考版）相关推荐

HTML+CSS实现淘宝静态页面
刚入门HTML+CSS,学习了一段时间后,为了练手,便写了这样一个静态的淘宝页面.就在刚才,终于完工.不得不说,内心有点小激动- 代码有点多,贴出来不太方便.如果大家有需要的话,直接去演示页面查看源代 ...
淘宝静态页面html+css部分
淘宝静态页面html+css部分未来前端程序员为你提供一小点点的帮助,希望能够帮助你. 这是一个简简单单的淘宝静态页面,没有用到JavaScript部分.相信大家都知道,淘宝静态网页也不是特别的简单 ...
超详细实现淘宝静态页面(附全部代码)
文章目录一:基本结构与样式二:头部信息结构 1.淘宝小图标 2.目前效果 3.代码三:头部信息样式与自定义图标 1.设置收藏夹图标注意: 四:头部广告结构与样式 1.h标签的应用五:全部代码 ...
淘宝-静态页面编写(2)--给淘宝写个头吧
标题首先我们看到html页面的头部: 技术点: 我们需要在标题内写入相关文字 <title>淘宝网 - 淘!我喜欢</title> 并且在左侧插入图标 <!--图片楼下 ...
HTML+CSS 仿淘宝静态首页
学完HTML和CSS需要有一个好的练习,仿淘宝等首页都是一个不错的练习方法,目前处于学习原生js阶段,学html+css时没有做一个像样的项目,现在边学js边将前面的基础部分打牢. 里面很多地方可以用 ...
淘宝-静态页面编写（4）--头部搜索/导航栏
头部搜索分块首先我们观察这部分,可清晰的将它分成三个模块,左边的淘宝网,中间的搜索栏以及右边的二维码.这里我们需想一下怎么把中间的搜索栏放入中间位置,我采用的是先将左右两侧靠边放置并设置浮动,那么 ...
html,css 淘宝静态页面
源码素材下载地址点击我下载
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
通过仿淘宝静态网页我的总结
学习了html和css,自己试着动手做了淘宝静态网页,(因为我觉得动手很重要)在动手完成的时候,脑子也同时会在思考. 问1.什么是网页布局? 网页布局是网页制作的基础: div+css布局网页问2. ...
HTML淘宝购物车页面的实现
一.实验目的和要求本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件使用表格标签.div标签.span标签.图像标签等实现效果设计启用浏 ...

HTML与CSS实现淘宝静态页面（参考版）

效果

html代码

css代码

HTML与CSS实现淘宝静态页面（参考版）相关推荐

最新文章

热门文章