一键难忘520

这个屌丝很懒，什么也没留下！

热门标签

电商网页设计(html+css)_电商网页代码html和css

作者：一键难忘520 | 2024-08-18 07:29:04

踩

电商网页代码html和css

html+css基础阶段

图中图标自行搜索。

代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

@font-face {

font-family: "iconfont"; /* Project id 4430436 */

src: url('iconfont.woff2?t=1708307539808') format('woff2'),

url('iconfont.woff?t=1708307539808') format('woff'),

url('iconfont.ttf?t=1708307539808') format('truetype');

}

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-dianhua:before {

content: "\e602";

}

.icon-lieri:before {

content: "\e600";

}

.icon-fangzi:before {

content: "\e60f";

}

.icon-fangkuai:before {

content: "\e6de";

}

.icon-weibiaoti1:before {

content: "\e60c";

}

.icon-paihang:before {

content: "\e736";

}

.icon-benyuedingdanshuliang:before {

content: "\e631";

}

.icon-chanpinguanli:before {

content: "\e703";

}

.icon-shixinwujiaoxing:before {

content: "\e626";

}

.icon-Leaves:before {

content: "\e6a3";

}

.icon-a-tupianyihuifu-53:before {

content: "\e610";

}

.icon-arrdown1:before {

content: "\e601";

}

margin: 0;

padding: 0;

}

li{

list-style: none;

box-sizing: border-box;

}

.div{

box-sizing: border-box;

}

.a{

width: 1200px;

height: 90px;

margin: 0 auto;

display: flex;

justify-content: space-between;

}

.aleft div:nth-child(1){

font-size: 36px;

font-weight: bold;

}

.aleft div:nth-child(2){

color:gray;

}

.aright{

display: flex;

width: 810px;

justify-content: space-between;

}

.aright>ul{

display: flex;

width: 490px;

justify-content: space-between;

align-items: center;

color:#565656;

font-size: 22px;

}

.a11{

font-size: 34px;

text-align: right;

color:#d5ded5;

}

.a1{

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.a1 div:nth-child(1){

font-size: 18px;

color: red;

}

.a1 div:nth-child(2){

width: 285px;

border:1px none gray;

border-radius: 15px;

font-size: 22px;

color: red;

text-align: center;

}

.b{

width: 100%;

height: 780px;

}

.again{

text-align: center;

}

.again div:nth-child(1){

font-size: 36px;

margin-bottom: 28px;

}

.again div:nth-child(2){

font-size: 18px;

margin-bottom: 48px;

}

.again div:nth-child(3){

width: 74px;

height: 6px;

background-color: red;

margin: 0 auto;

}

.c{

height: 864px;

padding-top: 70px;

background-color: #f7f7f7;

}

.c_t{

font-size: 26px;

text-align: center;

margin-top: 45px;

margin-bottom: 190px;

}

.c>ul{

width: 1045px;

margin: 0 auto;

display: flex;

justify-content: space-between;

}

.c>ul>li{

width: 224px;

display: flex;

flex-direction: column;

align-items: center;

}

.c>ul>li div:nth-child(1){

width: 100px;

height: 100px;

border: 1px solid;

border-radius: 50%;

text-align: center;

line-height: 100px;

margin-bottom: 44px;

}

.c>ul>li div:nth-child(2){

font-size: 20px;

margin-bottom: 32px;

}

.c>ul>li div:nth-child(3){

font-size: 30px;

}

.c>ul>li:hover{

color: red;

}

.c11{

font-size: 40px;

}

.d{

height: 830px;

padding-top: 60px;

}

.d>.again{

margin-bottom: 166px;

}

.d>ul{

width: 983px;

display: flex;

justify-content: space-between;

margin: 0 auto;

}

.d>ul>li{

text-align: center;

}

.d>ul>li div:nth-child(1){

margin-bottom: 38px;

}

.d>ul>li div:nth-child(2){

font-size: 30px;

}

.d11{

font-size: 60px;

}

.d>.d1{

margin-bottom: 100px;

}

.d>ul>li:hover span{

color:red;

}

.e{

height: 818px;

background-color: #f2f6f9;

padding-top: 70px;

}

.e>.again{

margin-bottom: 45px;

}

.e1{

width: 400px;

font-size: 28px;

display: flex;

margin: 0 auto;

margin-bottom: 112px;

}

.e1>div{

width: 200px;

height: 62px;

border: 2px solid red;

text-align: center;

line-height: 62px;

}

.e1 div:nth-child(1){

background-color: red;

color: #fff;

}

.e2{

width: 895px;

display: flex;

justify-content: space-between;

margin: 0 auto;

}

.e2>li{

width: 248px;

display: flex;

flex-direction: column;

text-align: center;

align-items: center;

}

.e2>li div:nth-child(1){

width: 102px;

height: 145px;

margin-bottom: 30px;

}

.e2>li div:nth-child(2){

font-size: 30px;

margin-bottom: 20px;

}

.e2>li div:nth-child(3){

font-size: 20px;

}

.e3{

width: 1100px;

height: 554px;

margin: 0 auto;

}

.f{

background-color: #fff;

height: 1674px;

}

.f>ul{

width: 1147px;

height: 500px;

display: flex;

margin: 0 auto;

flex-wrap: wrap;

justify-content: space-between;

margin-bottom: 166px;

}

.f>ul>li{

width: 208px;

height: 84px;

border: 2px solid #d5ded5;

margin-bottom: 40px;

}

.g{

height: 343px;

background-color: red;

color: #fff;

text-align: center;

padding-top: 116px;

}

.g div:nth-child(1){

font-size: 46px;

margin-bottom: 20px;

}

.g div:nth-child(2){

font-size: 20px;

margin-bottom: 20px;

}

</style>

<body>

<div>一站式电商解决方案</div>

</div>

<ul>

</ul>

<div><span class="iconfont icon-dianhua a11"></span>028-XXXXXXXX</div>

</div>

</div>

<div>我们能为你做什么</div>

</div>

<div class="c_t">6年全渠道电商运营经验,核心服务于食品、药品、保健品、家电、冲调饮料、个护等类目的众多线上线下大牌。</div>

<ul>

<li>

<div>全面的数据分析</div>

</li>

<li>

<div>OPERATION</div>

<div>优秀的运营能力</div>

</li>

<li>

<div>PLATFORM</div>

<div>优质的平台资源</div>

</li>

</ul>

</div>

<div>您还在烦恼这些</div>

<div>DON'T WORRY ABOUT THIS</div>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<div>我们的精英团队</div>

<div>OUR SERVERS</div>

</div>

</div>

<li>

<div>6年电商运营经验专业的团队,积累了丰富的平台运作经验和电商营销策略</div>

</li>

<li>

<div>核心团队均有淘宝、天猫、天猫超市京东、京东自营网店营销培训从业经历</div>

</li>

<li>

<div>我们绝不胡乱推广、开车,浪费客户资金，以核心技术为客户铸造高收益低成本的好店铺</div>

</li>

</ul>

</div>

<div>我们的合作客户</div>

<div>COOPERATION CUSTOMERS</div>

</div>

<ul>

</ul>

<div>我们的合作案例</div>

<div>COOPERATION CASE</div>

</div>

</div>

</div>

<div>一站式电商解决方案</div>

<div>TEL:028-XXXXxxx / XXXXxXXxxxx</div>

</div>

</body>

</html>

压缩包如下：

代码仅供参考。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/996591