写一个淘宝网页吧~

作者: 奶不加糖 | 来源:发表于2020-11-19 11:53 被阅读0次

写一个淘宝网页吧~
蜜源~~淘宝省钱的小秘笈
WEB 二
《HTML》
天天特卖工厂店是淘宝官方的吗？天天特卖工厂店的产品质量怎么样？
Android开发学习——Day20（网络编程：HTML&PHP
店铺淘宝VS淘客，实实在在摆在眼前的差距，纯粹的淘客已无力支撑
网页制作淘宝网站
写一个网页进度loading
写吧写吧。。。

目前只写了一部分emmm
index.html

<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

<title>淘宝网 - 淘！我喜欢</title>

<link rel="stylesheet" href="css/index.css">

<link rel="icon" href="favicon.ico">

<base target="_blank">

</head>

<body>

<!--头部信息-->

<div id="headMessage" class="layer clearfix">

<ul class="fl">

<li>

<span>中国大陆</span>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li class="mr7">

<a href="#" class="login mr7">亲，请登录</a>

<a href="#">免费注册</a>

</li>

<li>

<a href="#">手机逛淘宝</a>

</li>

</ul>

<ul class="fr">

<li>

<a href="#">我的淘宝</a>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li>

<span class="iconfont mr5 c4">&#xe63a;</span>

<a href="#">购物车</a>

<strong>0</strong>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li>

<a href="#"><span class="iconfont mr5 stroe">&#x3432;</span>收藏夹</a>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li>

<a href="#">商品分类</a>

</li>

<li class="line">|</li>

<li>

<a href="#">千牛卖家中心</a>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li>

<a href="#">联系客服</a>

<span class="iconfont arrow">&#xe733;</span>

</li>

<li>

<span class="iconfont c4 mr5">&#xe66d;</span>

<a href="#">网站导航</a>

<span class="iconfont arrow">&#xe733;</span>

</li>

</ul>

</div>

<!--头部广告-->

<div id="headAd">

<div class="layer clearfix">

<a href="#"class="fl go"><img src="images/go.png" alt=""></a>

<ul class="fr">

<li class="item1">

<a href="#"class="fr">

<img src="images/adimg_01.jpg" alt="">

</a>

<h3><a href="#">电视会场</a></h3>

<p><a href="#">最高降2000</a></p>

</li>

<li class="item2">

<a href="#"class="fr">

<img src="images/adimg_02.jpg" alt="">

</a>

<h3><a href="#">厨房电器</a></h3>

<p><a href="#">抢大额劵</a></p>

</li>

<li class="item3">

<a href="#"class="fr">

<img src="images/adimg_03.jpg" alt="">

</a>

<h3><a href="#">超值囤货</a></h3>

<p><a href="#">1元抢百元劵</a></p>

</li>

<li class="item4">

<a href="#"class="fr">

<img src="images/adimg_04.jpg" alt="">

</a>

<h3><a href="#">全球冰洗</a></h3>

<p><a href="#">三门冰箱888</a></p>

</li>

<li class="item5">

<a href="#"class="fr">

<img src="images/adimg_05.jpg" alt="">

</a>

<h3><a href="#">潮酷数码</a></h3>

<p><a href="#">大牌爆款直降</a></p>

</li>

</ul>

</div>

</div>

<!--头部搜索-->

<div id="headSearch">

<div class="clearfix layer">

<h1 class="fl"><a href="#">淘宝网</a></h1>

<div class="code fr">

<span class="iconfont close">&#xe614;</span>

<span class="c5">手机淘宝</span>

<img src="images/code.png" alt="">

</div>

<div class="search">

<ul class="searchTab clearfix">

<li class="active">宝贝</li>

<li>天猫</li>

<li>店铺</li>

</ul>

<div class="searchContent clearfix">

<form action="#">

<div class="searchBox fl">

<input type="text">

<div class="placeholder">

<i class="iconfont">&#xe615;</i>

<span>网红裤腰带 洋气 国际范 9.9包邮</span>

</div>

<span class="iconfont imgSearch">&#xe6ba;</span>

</div>

<div class="btn fl">

<button type="submit">搜索</button>

</div>

</form>

</div>

<div class="hotKey">

<a href="#" class="c5">积木</a>

<a href="#">网线</a>

<a href="#" class="c5">爬行垫</a>

<a href="#">时尚连衣裙</a>

<a href="#">男士T恤</a>

<a href="#" class="c5">时尚休闲裤</a>

<a href="#">粽子</a>

<a href="#">沙发</a>

<a href="#">风扇</a>

<a href="#">定制窗帘</a>

<a href="#">男士内裤</a>

<a href="#">凉席三件套</a>

<a href="#">办公桌</a>

</div>

</div>

</div>

</div>

<!--导航-->

<div id="nav" class="layer clearfix">

<h2 class="fl">主题市场</h2>

<ul>

<li class="size"><a href="#">天猫</a></li>

<li class="size"><a href="#">聚划算</a></li>

<li class="size"><a href="#">天猫超市</a></li>

<li class="line">|</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>

<li class="line">|</li>

<li><a href="#">飞猪旅行</a></li>

<li><a href="#">智能生活</a></li>

<li><a href="#">苏宁易购</a></li>

</ul>

</div>

<!--首屏内容-->

<div id="firstScreen" class="layer clearfix">

<!--左边的内容-->

<div class="firstLeft fl">

<!--侧边导航-->

<div class="sideNav fl">

<ul>

<li>

<a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span

class="iconfont fr">&#xe50c;</span>

</li>

<li>

<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span

class="iconfont fr">&#xe50c;</span>

</li>

</ul>

</div>

<!--图片1容器-->

<div class="img1Box fr">

<div class="pic fl">

<div class="img">

<a href="#"><img src="images/pic_01.jpg" alt=""></a>

</div>

<button class="iconfont leftBtn">&#xe50a;</button>

<button class="iconfont rightBtn">&#xe50c;</button>

<div class="circle">

<span class="active"></span><span></span><span></span><span></span><span></span>

</div>

</div>

<div class="ad fr">

<a href="#"><img src="images/ad_02.jpg" alt=""></a>

</div>

</div>

<!--图片2容器-->

<div class="img2Box fr">

<div class="pic fl">

<div class="picTitle">

<div class="text clearfix">

<span class="fl bg">理想生活上天猫</span>

<span class="fr"><i>1</i>/6</span>

</div>

<div class="line">

<span></span>

</div>

</div>

<div class="img">

<a href="#"><img src="images/pic_02.jpg" alt=""></a><a href="#"><img src="images/pic_03.jpg" alt=""></a>

</div>

<button class="iconfont leftBtn">&#xe50a;</button>

<button class="iconfont rightBtn">&#xe50c;</button>

</div>

<div class="ad fr">

<p class="title">今日特卖</p>

<a href="#"><img src="images/ad_03.jpg" alt=""></a>

</div>

</div>

<!--淘宝头条-->

<div class="news fl">

</div>

</div>

<!--右边的内容-->

<div class="firstRight fr">

</div>

</div>

<!--有好货与爱逛街-->

<div id="layer">

</div>

<!--右侧固定定位导航-->

<div id="tool">

</div>

</body>

</html>>

index.css

/*

    @规则

@charset    设置样式表的编码

@import 导入其它样式文件

@meida  媒体查询

@font-face  自定义字体

*/

@import 'reset.css';

@font-face {

    font-family: 'iconfont';

    src: url('../font/iconfont.eot');

    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),

        url('../font/iconfont.woff2') format('woff2'),

        url('../font/iconfont.woff') format('woff'),

        url('../font/iconfont.ttf') format('truetype'),

        url('../font/iconfont.svg#iconfont') format('svg');

}

.iconfont {

    font-family: "iconfont" !important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

/* 头部信息 */

#headMessage li{

    float: left;

    line-height: 35px;

    padding: 0 6px;

    font-size: 0;

}

#headMessage a{

    color: #6c6c6c;

    font-size: 12px;

}

#headMessage a:hover{

    color: #f40;

}

#headMessage a.login{

    color: #f22e00;

}

#headMessage span{

    font-size: 12px;

}

#headMessage span.arrow{

    margin-left: 7px;;

}

#headMessage li strong{

    font-size: 12px;

    color: #f22e00;

}

#headMessage li span.stroe{

    color: #9c9c9c;

}

#headMessage li.line{

    font-size: 12px;

    color: #ddd;

    padding: 0 5px;

}

/* 头部广告 */

#headAd{

    background-color: #f12f04;

}

#headAd .go{

    display: block;

    padding: 10px 10px 10px 15px;

}

#headAd .go img{

    width: 80px;

    height: 80px;

}

#headAd ul{

    padding-top: 13px;

}

#headAd li{

    float: left;

    width: 209px;

    height: 75px;

    margin-right: 10px;

    padding: 12px 15px 0 15px;

    box-sizing: border-box;

    /*

        盒模型

            1、标准盒模型

                总宽度=border(左右)+width+padding(左右)

                总高度=border(上下)+height+padding(上下)

            2、IE盒模型(怪异盒模型)

                总宽度=width;

                总高度=height;

      */

}

#headAd li h3{

    font-size: 20px;

    line-height: 28px;

}

#headAd li p{

    font-size: 14px;

    line-height: 20px;

}

#headAd li a{

    color: #fff;

    display: block;

}

#headAd li a img{

    width: 52px;

    height: 52px;

    border-radius: 5px;

}

#headAd li.item1{

    background: url(../images/adbg_01.png) no-repeat;

}

#headAd li.item2{

    background: url(../images/adbg_02.png) no-repeat;

}

#headAd li.item3{

    background: url(../images/adbg_03.png) no-repeat;

}

#headAd li.item4{

    background: url(../images/adbg_04.png) no-repeat;

}

#headAd li.item5{

    background: url(../images/adbg_05.png) no-repeat;

    margin-right: 0;

}

/* 头部搜索 */

#headSearch{

    background-color: #fff;

    padding: 24px 0 10px 0;

}

#headSearch h1 a{

    display: block;

    width: 190px;

    height: 58px;

    background: url(../images/logo.png) center no-repeat;

    text-indent: -9999px;

    overflow: hidden;

    margin-top: 8px;

}

#headSearch .code{

    width: 72px;

    height: 86px;

    border: 1px solid #eee;

    position: relative;

    margin-right: 110px;

    text-align: center;

}

#headSearch .code img{

    width: 62px;

    height: 62px;

}

#headSearch .close{

    position: absolute;

    left: -16px;

    top: -1px;

    width: 14px;

    height: 14px;

    line-height: 14px;

    font-size: 14px;

    border: 1px solid #eee;

    color: #ddd;

    cursor: pointer;

}

#headSearch .search{

    width: 630px;

    margin: 0 auto;

}

#headSearch .searchTab{

    height: 22px;

    padding-left: 17px;

}

#headSearch .searchTab li{

    float: left;

    width: 36px;

    line-height: 22px;

    margin-right: 4px;

    text-align: center;

    color: #f40;

    cursor: pointer;

}

#headSearch .searchTab li:hover{

    background-color: #ffeee5;

}

#headSearch .searchTab li.active{

    color: #fff;

    font-weight: bold;

    background-image: linear-gradient(to right,#ff9000,#ff5000);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);

    border-radius: 6px 6px 0 0;

}

#headSearch .searchContent{

    height: 40px;

}

#headSearch .searchBox{

    width: 554px;

    height: 40px;

    box-sizing: border-box;

    border: 2px solid #ff5000;

    border-right: none;

    border-radius: 20px 0 0 20px;

    overflow: hidden;

    position: relative;

}

#headSearch .searchBox input{

    width: 490px;

    height: 36px;

    line-height: 36px;

    outline: none;

    border: none;

    text-indent: 10px;

    position: absolute;

    z-index: 2;

    background-color: transparent;  /* 透明，为了能够看到后面的文字 */

}

#headSearch .placeholder{

    position: absolute;

    top: 6px;

    left: 14px;

}

#headSearch .placeholder span{

    color: #9c9c9c;

    vertical-align: 1px;

}

#headSearch .imgSearch{

    font-size: 28px;

    color: #9c9c9c;

    position: absolute;

    right: 20px;

    top: -2px;

    cursor: pointer;

}

#headSearch .searchContent button{

    width: 74px;

    height: 40px;

    text-align: center;

    font-size: 18px;

    line-height: 40px;

    color: #fff;

    border: none;

    background-image: linear-gradient(to right,#ff9000,#ff5000);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);

    border-radius: 0 20px 20px 0;

}

#headSearch .hotKey{

    height: 25px;

    line-height: 25px;

}

#headSearch .hotKey a:hover{

    color: #f50;

}

/* 导航 */

#nav h2{

    width: 190px;

    height: 30px;

    line-height: 30px;

    font-size: 16px;

    color: #fff;

    text-align: center;

    background-color: #f50;

}

#nav ul{

    margin-left: 190px;

    height: 30px;

    /* width: 1000px;

    width: calc(100% - 190px); */   /* 支持情况：IE9+ */

    background-image: linear-gradient(to right,#ff9000,#ff5000);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);

}

#nav ul li{

    float: left;

    line-height: 30px;

    margin: 0 7px;

    font-size: 14px;

    color: #fff;

    padding: 0 5px;

    position: relative;

}

#nav ul li.size{

    font-size: 16px;

}

#nav ul li a{

    color: #fff;

    font-weight: bold;

}

#nav ul li.line{

    margin: 0;

    padding: 0;

}

#nav ul li:hover:before{

    content: '';

    position: absolute;

    width: 23px;

    height: 13px;

    background-image: url(../images/ico_01.gif);

    top: -13px;

    left: 50%;

    margin-left: -12px;

}

/* 首屏内容 */

.firstLeft{

    width: 890px;

}

/* 侧边导航 */

.firstLeft .sideNav{

    width: 190px;

    height: 522px;

    background: #fff;

    border: 1px solid #ff5000;

    box-sizing: border-box;

    border-top: none;

    padding-top: 5px;

}

.firstLeft .sideNav li{

    height: 32px;

    line-height: 32px;

    padding-left: 25px;

    color: #999;

    font-size: 14px;

    transition: background-color 0.3s;

}

.firstLeft .sideNav li a{

    font-size: 14px;

    color: #666;

}

.firstLeft .sideNav li span{

    font-size: 12px;

    margin-right: 5px;

}

.firstLeft .sideNav li:hover{

    background: #ffe4dc;

    color: #f50;

}

.firstLeft .sideNav li:hover a{

    color: #f50;

}

.firstLeft .sideNav a:hover{

    text-decoration: underline;

}

/* 图片1容器 */

.firstLeft .img1Box{

    width: 690px;

    height: 282px;

    margin-top: 10px;

}

.firstLeft .pic{

    width: 520px;

    position: relative;

}

.firstLeft .pic button{

    width: 20px;

    height: 30px;

    line-height: 30px;

    color: #fff;

    cursor: pointer;

    border: none;

    background-color: rgba(0,0,0,0.3);  /* 支持情况：IE9+ */

    /*

    background-color: #000\9;   IE9以下的浏览器认识

    filter: alpha(opacity=30);  透明

    */

    position: absolute;

    top: 50%;

    margin-top: -15px;

    display: none;

}

.firstLeft .pic button.leftBtn{

    left: 0;

    border-radius: 0 15px 15px 0;

}

.firstLeft .pic button.rightBtn{

    right: 0;

    border-radius: 15px 0 0 15px;

}

.firstLeft .pic:hover button{

    display: block;

}

.firstLeft .pic .circle{

    position: absolute;

    bottom: 15px;

    left: 50%;

    margin-left: -35px;

    border-radius: 10px;

    padding: 3px 0;

    font-size: 0;

    background-color: rgba(255,255,255,0.3);

}

.firstLeft .pic .circle span{

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: #fff;

    margin: 0 3px;

    cursor: pointer;

}

.firstLeft .pic .circle span.active{

    background-color: #ff5000;

}

.firstLeft .ad{

    width: 160px;

}

.firstLeft .ad img{

    width: 160px;

}

/* 图片2容器 */

.firstLeft .img2Box{

    width: 690px;

    height: 220px;

    margin-top: 10px;

}

.firstLeft .img2Box .picTitle{

    height: 20px;

}

.firstLeft .img2Box .picTitle .text{

    height: 17px;

    line-height: 17px;

}

.firstLeft .img2Box .picTitle .text .bg{

    background: url(../images/title_bg.png) no-repeat left;

    padding-left: 136px;

    columns: #666;

}

.firstLeft .img2Box .picTitle .text i{

    color: #ff1648;

}

.firstLeft .img2Box .picTitle .line{

    height: 3px;

    background-color: #ff1648;

    position: relative;

}

.firstLeft .img2Box .picTitle .line span{

    width: 87px;

    height: 3px;

    background-color: #000;

    position: absolute;

    left: 0;

}

.firstLeft .img2Box .img{

    width: 520px;

    height: 200px;

    background-color: #fff;

    position: relative;

    display: table-cell;

    vertical-align: middle;

    /* display: flex;

    justify-content: space-around;

    align-items: center; */

}

.firstLeft .img2Box .img img{

    margin: 0 10px;

}

.firstLeft .img2Box .ad .title{

    height: 20px;

    line-height: 20px;

}

reset.css

body,p,h1,h2,h3,h4,ul{

    margin: 0;

}

ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

img{

    border: none;

    vertical-align: middle;

}

a{

    text-decoration: none;

    color: #3c3c3c;

}

i{

    font-style: normal;

}

input,button{

    margin: 0;

    padding: 0;

}

button{

    outline: none;

}

table{

    border-collapse: collapse;  /* 边框模式，合并的模式 */

}

th,td{

    padding: 0;

}

body{

    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

    /* font-family: '宋体';

    font-family: '\5b8b\4f53';

    font-family: SimSun;

    font-family: "微软雅黑";

    font-family: Miscrosoft YaHei; */

    color: #3c3c3c;

    background-color: #f4f4f4;

}

.clearfix:after{

    content: '';

    display: block;

    clear: both;

}

.fl{

    float: left;

}

.fr{

    float: right;

}

.layer{

    width: 1190px;

    margin: 0 auto;

}

.c4{

    color: #f40;

}

.c5{

    color: #f50;

}

.c6{

    color: #8d7afb;

}

.c7{

    color: #a8c001;

}

.mr7{

    margin-right: 7px;

}

.mr5{

    margin-right: 5px;

}

.mt10{

    margin-top: 10px;

}

.mr10{

    margin-right: 10px;

}

写一个淘宝网页吧~
目前只写了一部分emmmindex.html index.css reset.css
蜜源~~淘宝省钱的小秘笈
蜜源是一个App程序，和淘宝合作推广淘宝的产品。淘宝网页上的推广需要大量推广费，在蜜源上推广给客户大量优惠券...
WEB 二
用HTML与CSS来写一个静态的淘宝网页一个网页的构成 HTML文件以开头，以结束。所以开头结尾分别是 head...
《HTML》
经过了20多天的学习，我终于做完了我的网页，在写第一个网页的时候，可能当时只是有点懵懂。感觉一个网页好难好难，但写...
天天特卖工厂店是淘宝官方的吗？天天特卖工厂店的产品质量怎么样？
天天特卖工厂店是淘宝官方的。我们在淘宝购物的时候，不论是在淘宝天猫网页端，还是淘宝天猫APP端，搜索首页都不乏“天...
Android开发学习——Day20（网络编程：HTML&PHP
学习目的 1.使用HTML语言写一个网页 2.使用PHP语言写一个后台文件响应自己写的网页学习过程在电脑上搭建...
店铺淘宝VS淘客，实实在在摆在眼前的差距，纯粹的淘客已无力支撑
想要成为一个淘客很简单，打开百度，搜索淘宝联盟进入淘宝联盟官网，根据网页上的提示注册账号，完善账号信息，简单方式你...
网页制作淘宝网站
写一个网页进度loading
loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 lo...
写吧写吧。。。
刚打开电脑，看看那些写作班基本上标题，21天月入过万。套路什么呢？举例子，截屏给你看。告诉你，这是完全有可能的。告...