html5+css3初学练手小米商城

最新推荐文章于 2024-09-02 07:00:00 发布

D.ss167

最新推荐文章于 2024-09-02 07:00:00 发布

阅读量380

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_63357370/article/details/126320943

版权

html5源码：

<!DOCTYPE html>

<head>

</head>

<body>

<p>小爱开放平台</p>

<p>下载app</p>

<p>Select Location</p>

</div>

</div>

</div>

</div>

<li class="nav-item">Xiaomi手机</li>

<li class="nav-item">Redmi手机</li>

</ul>

</div>

</div>

<li class="left-item">笔记本平板 <img src="./img/sanjiao.png" alt=""></li>

<li class="left-item">智能路由器 <img src="./img/sanjiao.png" alt=""></li>

</ul>

</div>

</div>

</div>

</ul>

</div>

</div>

</div>

</div>

</div>

<h3>Xiaomi 12S Ultra</h3>

<p class="desc">这真徕卡｜专业徕卡影像</p>

</div>

</li>

</div>

<h3>Xiaomi 12S Pro</h3>

<p class="desc">骁龙8+ 旗舰处理器 | 徕卡影像</p>

</div>

</li>

</div>

<h3>Xiaomi 12S </h3>

<p class="desc">小尺寸性能旗舰 | 徕卡影像</p>

</div>

</li>

</div>

<h3>

Redmi Note 11T Pro+

</h3>

</div>

</li>

</div>

<h3>Xiaomi 12 Pro 天玑版</h3>

<p class="desc">全球首发天玑9000+｜叶脉冷泵散热系统｜2K AMOLED 超视感屏｜5000万疾速影像</p>

</div>

</li>

</div>

<h3>

Redmi Note 11T Pro

</h3>

</div>

</li>

</div>

<h3>

Redmi Note 11SE

</h3>

</div>

</li>

</div>

<h3> Xiaomi Civi 1S </h3>

<p class="desc">原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus</p>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

<h3>Xiaomi Watch S1</h3>

<p class="desc">蓝宝石玻璃镜面 | 不锈钢中框 | 1.43”AMOLED大屏幕</p>

</div>

</li>

</div>

<h3>

Xiaomi真无线降噪耳机3

</h3>

<p class="desc">40dB宽频主动降噪 | HiFi高保真音质 | HRTF专业调音骁龙8+ 旗舰处理器 | 徕卡影像</p>

</div>

</li>

</div>

<h3>

Redmi 手表 2

</h3>

<p class="desc">1.6"AMOLED大屏 | 117种运动模式 | 24小时心率监测</p>

</div>

</li>

</div>

<h3>

小米手环6 NFC版

</h3>

<p class="desc">1.56" 跑道全面彩屏 | 30种运动模式 | 24小时心率监测</p>

</div>

</li>

</div>

<h3>

Xiaomi 真无线降噪耳机 3 Pro

</h3>

<p class="desc">40dB自适应降噪｜空间音频｜ HiFi高保真音质</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3半入耳真无线蓝牙耳机

</h3>

<p class="desc">轻巧半入耳 | 通话降噪 | 20小时长续航</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3 青春版

</h3>

<p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3 青春版

</h3>

<p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

</div>

</li>

</ul>

</div>

</div>

</div>

</div>

<h3>

Redmi Book Pro 15 2022

</h3>

<p class="desc">全新12代英特尔处理器</p>

</div>

</li>

</div>

<h3>

Redmi G 2021 R7/RTX3050Ti/16G/51

</h3>

<p class="desc">有光追，才是高性能游戏本</p>

</div>

</li>

</div>

<h3>

Pro 14 增强版 i5 独显 - Win11

</h3>

<p class="desc">2.5K超视网膜全面屏</p>

</div>

</li>

</div>

<h3>

小米手环6 NFC版

</h3>

<p class="desc">1.56" 跑道全面彩屏 | 30种运动模式 | 24小时心率监测</p>

</div>

</li>

</div>

<h3>

Xiaomi 真无线降噪耳机 3 Pro

</h3>

<p class="desc">40dB自适应降噪｜空间音频｜ HiFi高保真音质</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3半入耳真无线蓝牙耳机

</h3>

<p class="desc">轻巧半入耳 | 通话降噪 | 20小时长续航</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3 青春版

</h3>

<p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

</div>

</li>

</div>

<h3>

Redmi Buds 3 青春版

</h3>

<p class="desc">轻巧真无线 | 猫耳状稳固设计 | 18小时长续航</p>

</div>

</li>

</ul>

</div>

</body>

</html>

css3源码：

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

font-style:normal

}

.shang{

width: 100%;

height: 780px;

background-color: #fff;

}

.daohang{

width: 100%;

height: 40px;

background-color: #333;

}

.container{

width: 1226px;

height: 40px;

line-height: 40px;

margin: auto;

}

.topbar-nav{

float: left;

height: 40px;

line-height: 40px;

font-size: 12px;

}

.topbar-nav p{

color: #b0b0b0;

line-height: 40px;

display: inline-block

}

.topbar-nav span{

margin: 0 0.3em;

color: #424242;

}

.topbar-info{

position: relative;

float: right;

height: 40px;

line-height: 40px;

}

.topbar-info p{

padding: 0 5px;

text-align: center;

font-size: 12px;

color: #b0b0b0;

display: inline-block;

}

.topbar-cart{

position: relative;

float: right;

width: 120px;

height: 40px;

margin-left: 15px;

-webkit-transition: all .2s;

transition: all .2s;

font-size: 12px;

}

.topbar-cart p{

width: 120px;

height: 40px;

font-size: 12px;

color: #b0b0b0;

background-color: #424242;

text-align: center;

}

.site-header {

width: 100%;

height: 100px;

/* border: 1px solid red; */

}

.site-header .container{

width: 1226px;

height: 100px;

margin: 0 auto;

/* border: 1px solid blue; */

}

.header-logo{

float: left;

width: 62px;

margin-top: 22px;

}

.header-logo img{

width: 53px;

height: 53px;

}

.header-nav {

float: left;

width: 850px;

}

.header-nav .nav-list{

height: 100px;

line-height: 100px;

padding-left: 122px;

}

.header-nav .nav-list .nav-item{

display: inline-block;

padding-left: 10px;

color: #333;

font-size: 16px;

}

.header-search {

float: right;

width: 300px;

margin-top: 25px;

border: 1px solid #b0b0b0;

color: #333;

}

.header-search .sousuo{

display: inline-block;

height: 50px;

line-height: 50px;

padding-left: 10px;

}

.header-search .sousuo1{

float: right;

width: 50px;

height: 50px;

/* display: inline-block; */

border-left: 1px solid #b0b0b0;

}

.header-search .sousuo1 img{

width: 50px;

height: 50px;

}

.neirong{

width: 1226px;

height: 460px;

/* border: 1px solid red; */

margin: 0 auto;

position: relative;

}

.neirong .left{

width: 234px;

height: 460px;

/* border: 1px solid red; */

background: rgba(105,101,101,.6);

position: absolute;

left: 0;

top: 0;

}

.neirong img{

width: 1226px;

height: 460px;

}

.left .left-list{

margin-top:20px;

}

.left .left-item{

width: 234px;

height: 40px;

padding-left: 30px;

color: #fff;

font-size: 12px;

line-height: 40px;

}

.left .left-item img{

width: 29px;

height: 29px;

float: right;

padding-top: 5px;

padding-right: 40px;

}

.home-hero-sub{

width: 1226px;

height: 170px;

/* border: 1px solid red; */

margin: 30px auto;

}

.home-hero-sub .left{

width: 234px;

height: 170px;

float: left;

}

.home-hero-sub .left img{

width: 234px;

height: 170px;

}

.home-hero-sub .right {

width: 978px;

height: 170px;

float: right;

}

.home-hero-sub .right .rightul .rightli{

width: 316px;

height: 170px;

float: left;

}

.home-hero-sub .right .rightul .rightli img{

width: 316px;

height: 170px;

}

.banner-boox{

width: 1226px;

height: 120px;

margin: 0 auto;

padding-top: 20px;

}

.banner-boox img{

width: 1226px;

height: 120px;

}

.xia{

width: 100%;

height: 2500px;

background: rgba(0, 0, 0, 0.1) ;

}

.box-hd{

width: 1226px;

height: 58px;

padding-top: 23px;

margin: 0 auto;

/* border: 1px solid red; */

line-height: 58px;

}

.box-hd h2{

font-size: 22px;

font-weight: 200;

line-height: 58px;

color: #333;

float: left;

}

.box-hd .more{

width: 92px;

height: 58px;

/* border: 1px solid red; */

float: right;

}

.box-hd .more .i1{

font-size: 16px;

line-height: 58px;

color: #424242;

}

.box-hd .more .i2 img{

width: 22px;

height: 22px;

float: right;

padding-top: 18px;

}

.row{

width: 1226px;

height: 614px;

margin: 0 auto;

/* border: 1px solid red; */

}

.row .left{

width: 234px;

height: 614px;

float: left;

}

.row .lfet .img{

width: 234px;

height: 614px;

}

.row .right{

width: 990px;

height: 614px;

float: right;

/* border: 1px solid red; */

}

.row .right .xmsjul .xmsjli{

width: 234px;

height: 300px;

background-color: #fff;

/* border: 1px solid red; */

/* display: inline-block; */

/* margin-right: calc(978px / 4 - 238px); */

position: relative;

z-index: 1;

float: left;

margin-left: 13px;

margin-bottom: 12px;

background: #fff;

}

/* .row .right .xmsjul .xmsjli:nth-child(4n){

margin-right: 0;

} */

.row .right .xmsjul .xmsjli .nqqq{

margin-top: 20px;

/* border: 1px solid red; */

}

.row .right .xmsjul .xmsjli .figure{

width: 160px;

height: 160px;

margin: 0 auto 18px;

}

.row .right .xmsjul .xmsjli .figure img{

width: 160px;

height: 160px;

}

.row .right .xmsjul .xmsjli h3{

margin: 0 10px 2px;

text-align: center;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

font-size: 14px;

font-weight: 400;

color: #333;

}

.row .right .xmsjul .xmsjli .desc{

margin: 0 10px 10px;

height: 18px;

font-size: 12px;

color: #b0b0b0;

text-align: center;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

.row .right .xmsjul .xmsjli .price{

margin: 0 10px 14px;

text-align: center;

font-size: 14px;

}

.row .right .xmsjul .xmsjli .price span{

color: #ff6700;

font-size: 14px;

padding-right: 10px;

}

.row .right .xmsjul .xmsjli .price del{

color: #b0b0b0;

font-size: 14px;

}

.box-hd1{

width: 1226px;

height: 58px;

padding-top: 23px;

margin: 0 auto;

/* border: 1px solid red; */

line-height: 58px;

}

.box-hd1 h2{

font-size: 22px;

font-weight: 200;

line-height: 58px;

color: #333;

float: left;

}

.box-hd1 .more1{

width: 90px;

height: 58px;

/* border: 1px solid red; */

float: right;

}

.box-hd1 .more1 .i3{

color: #ff6700;

}

.box-hd1 .more1 .i4{

float: right;

}

D.ss167

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫