目录
建立一个文件夹,在文件夹里,见一个新建文本.txt再把后缀改成demo.html然后,
这是我刚学习前端做的一个小米网页,看似有点相似,但是里面的元素还是有很多不同的地方.
HTML部分
CSS部分
文章目录
静态网页代码
建立一个文件夹,在文件夹里,见一个新建文本.txt再把后缀改成demo.html然后,
在建一个文本再把css代码复制进去后缀名改成1.css
废话不多说上源码
这里我是把CSS放到外部文件，这样代码会更简洁。
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站</title>
<link rel="stylesheet" href="1.css">
<link rel="shortcut icon" href="./1c.ico">
</head>
<body>
<header>
<div class="topbar">
<ul class="left-nav">
<li>
<a href="#">小米商城</a>
</li>
<i>|</i>
<li><a href="#">MIUI</a></li>
<i>|</i>
<li><a href="#">IoT</a></li>
<i>|</i>
<li><a href="#">云服务</a></li>
<i>|</i>
<li><a href="#">金融</a></li>
<i>|</i>
<li><a href="#">有品</a></li>
<i>|</i>
<li><a href="#">小爱开放平台</a></li>
<i>|</i>
<li><a href="#">企业团购</a></li>
<i>|</i>
<li><a href="#">资质证照</a></li>
<i>|</i>
<li><a href="#">协议规则</a></li>
<i>|</i>
<li class="now"><a href="#">下载app</a>
<div class="more"></div>
</li>
<i class="left">|</i>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="right-nav">
<li><a href="#">登录</a></li>
<i>|</i>
<li><a href="#">注册</a></li>
<i>|</i>
<li><a href="#">消息通知</a></li>
<li class="shop-cart"><span class="iconfont">󰅹</span>购物车</li>
</ul>
</div>
</header>
<nav class="container">
<div class="logo-box"></div>
<a href="#"><img src="./小米动态.gif" alt="" width="165" height="55" class="gif"></a>
<ul class="sec-nav">
<li><a href="#">小米手机</a>
<div class="but-buy-now">
<ul>
<li>
<img src="./手机.webp" alt="" width="160" height="110">
<div>小米10至尊纪念版</div>
<p>1999元</p>
</li>
<li>
<img src="./手机.webp" alt="" width="160" height="110">
<div>小米10至尊纪念版</div>
<p>1999元</p>
</li>
<li>
<img src="./手机.webp" alt="" width="160" height="110">
<div>小米10至尊纪念版</div>
<p>1999元</p>
</li>
<li>
<img src="./手机.webp" alt="" width="160" height="110">
<div>小米10至尊纪念版</div>
<p>1999元</p>
</li>
<li>
<img src="./手机.webp" alt="" width="160" height="110">
<div>小米10至尊纪念版</div>
<p>1999元</p>
</li>
</ul>
</div>
</li>
<li><a href="#">Redmi 红米</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>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
<form action="">
<input type="text" placeholder="手机">
<input type="submit" class="iconfont" value="">
</form>
</nav>
<div id="wrap">
<input type="radio" name="switch" checked id="img1">
<input type="radio" name="switch" id="img2">
<input type="radio" name="switch" id="img3">
<input type="radio" name="switch" id="img4">
<input type="radio" name="switch" id="img5">
<div class="banner-img">
<img src="./images/1.jpg" alt="">
<img src="./images/2.webp" alt="">
<img src="./images/3.webp" alt="">
<img src="./images/4.webp" alt="">
<img src="./images/5.webp" alt="">
</div>
<div class="labels">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
<label for="img4"></label>
<label for="img5"></label>
</div>
<ul class="banner-menu">
<li>
<a href="#">手机</a>
<a href="#">电话卡</a>
<span class="iconfont"></span>
<div class="sub-menu sub-menu-4">
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
</div>
</li>
<li>
<a href="#">电视</a>
<a href="#">盒子</a>
<span class="iconfont"></span>
<div class="sub-menu sub-menu-3">
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
</div>
</li>
<li>
<a href="#">笔记本</a>
<a href="#">显示器</a>
<span class="iconfont"></span>
<div class="sub-menu sub-menu-2">
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
<div class="sub-menu-list">
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
<a href="#">
<img src="./images/small.webp" alt="">
<span>手机上门维修</span>
</a>
</div>
</div>
</li>
<li>
<a href="#">家电</a>
<a href="#">插线板</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">出行</a>
<a href="#">穿戴</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">智能</a>
<a href="#">路由器</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">电源</a>
<a href="#">配件</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">健康</a>
<a href="#">儿童</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">耳机</a>
<a href="#">音响</a>
<span class="iconfont"></span>
</li>
<li>
<a href="#">生活</a>
<a href="#">箱包</a>
<span class="iconfont"></span>
</li>
</ul>
<div class="wrap-left iconfont"></div>
<div class="wrap-right iconfont"></div>
</div>
<div class="home-sub-row">
<div class="home-sub1">
<div class="home-sub1-1">
<span class="iconfont"></span>
<span>智能生活</span>
</div>
<div class="home-sub1-2">
<span class="iconfont"></span>
<span>企业团购</span>
</div>
<div class="home-sub1-3">
<span class="iconfont"></span>
<span>F码通道</span>
</div>
<div class="home-sub1-4">
<span class="iconfont"></span>
<span>米粉卡</span>
</div>
<div class="home-sub1-5">
<span class="iconfont"></span>
<span>以旧换新</span>
</div>
<div class="home-sub1-6">
<span class="iconfont"></span>
<span>话费充值</span>
</div>
</div>
<div class="home-sub2"></div>
<div class="home-sub3"></div>
<div class="home-sub4"></div>
</div>
<div class="buy">
<h2>小米闪购
<span class="iconfont"></span>
<span class="iconfont"></span>
</h2>
<ul class="buy-sell">
<li>
<img src="./空调.jpg" alt="" width="160" height="160">
<h3>最生活毛巾·Air（10条装） 白色+素蓝</h3>
<p>给生活一条好毛巾</p>
<span>99元</span>
<del>169元</del>
</li>
<li>
<img src="./空调.jpg" alt="" width="160" height="160">
<h3>最生活毛巾·Air（10条装） 白色+素蓝</h3>
<p>给生活一条好毛巾</p>
<span>99元</span>
<del>169元</del>
</li>
<li>
<img src="./空调.jpg" alt="" width="160" height="160">
<h3>最生活毛巾·Air（10条装） 白色+素蓝</h3>
<p>给生活一条好毛巾</p>
<span>99元</span>
<del>169元</del>
</li>
<li>
<img src="./空调.jpg" alt="" width="160" height="160">
<h3>最生活毛巾·Air（10条装） 白色+素蓝</h3>
<p>给生活一条好毛巾</p>
<span>99元</span>
<del>169元</del>
</li>
<li>
<img src="./空调.jpg" alt="" width="160" height="160">
<h3>最生活毛巾·Air（10条装） 白色+素蓝</h3>
<p>给生活一条好毛巾</p>
<span>99元</span>
<del>169元</del>
</li>
</ul>
</div>
<div class="model-buy">
<img src="./横条栏.jpg" alt="" width="1226" height="120">
</div>
<div class="buy-mi">
<h2>手机
<span class="iconfont" style="font-size: 28px;"></span>
<span>查看全部</span>
</h2>
<div class="big-img"></div>
<ul class="img-buy">
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
<li>
<img src="./1.webp" alt="">
<h3>小米10青春版5g</h3>
<p class="desc">又大又好用</p>
<p class="price">1899元 <del>2099元</del></p>
</li>
</ul>
</div>
<div class="model-pen">
<img src="./横条栏2.jpg" alt="" width="1226" height="120">
</div>
<div class="video">
<div class="video-mi">
<h2>视频
<span class="iconfont" style="font-size: 28px;"></span>
<span>查看全部</span>
</h2>
<ul class="video-play">
<li>
<img src="./播放图.jpg" alt="" width="296" height="180">
<span class="iconfont"></span>
<h3> Redmi 10X系列发布会 </h3>
<p> Redmi 10X系列发布会 </p>
</li>
<li>
<img src="./播放图.jpg" alt="" width="296" height="180">
<span class="iconfont"></span>
<h3> Redmi 10X系列发布会 </h3>
<p> Redmi 10X系列发布会 </p>
</li>
<li>
<img src="./播放图.jpg" alt="" width="296" height="180">
<span class="iconfont"></span>
<h3> Redmi 10X系列发布会 </h3>
<p> Redmi 10X系列发布会 </p>
</li>
<li>
<img src="./播放图.jpg" alt="" width="296" height="180">
<span class="iconfont"></span>
<h3> Redmi 10X系列发布会 </h3>
<p> Redmi 10X系列发布会 </p>
</li>
</ul>
</div>
</div>
<footer>
<ul class="bottom">
<li><span class="iconfont"></span>预约维修服务</li>
<li><span class="iconfont">7天无理由退货</li>
<li><span class="iconfont">15天免费换货</li>
<li><span class="iconfont">满99元包邮</li>
<li><span class="iconfont">520余家售后网点</li>
</ul>
<div class="name-tel">
<dl class="name-tel-1">
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl class="name-tel-2">
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl class="name-tel-3">
<dt> 线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>
<dl class="name-tel-4">
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
<dd>企业社会责任</dd>
<dd>廉洁举报</dd>
</dl>
<dl class="name-tel-5">
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dd>企业社会责任</dd>
<dd>公益基金会</dd>
</dl>
<dl class="name-tel-6">
<dt>特色服务</dt>
<dd>F 码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<div class="weixin">
<span class="iconfont"></span>
<span class="iconfont"></span>
</div>
</div>
</footer>
<div class="ahbc">
<ul class="ahbc-1">
<li><span class="iconfont"></span>
<div class="caizhong">
<img src="./download.png" alt="" width="100" height="100">
<p>扫码领取百元新人礼包</p>
</div></li>
<li><span class="iconfont"></span></li>
<li><span class="iconfont"></span></li>
<li><span class="iconfont"></span></li>
<li><span class="iconfont"></span></li>
</ul>
</div>
</body>
</html>1.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: 'iconfont';
src: url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.eot);
src: url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.eot?#iefix) format('embedded-opentype'),
url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.woff2) format('woff2'),
url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.woff) format('woff'),
url(./阿里图标-小米/font_rqjuf9c8mna/iconfont.ttf) format('truetype'),
url(./阿里图标-小米/font_rqjuf9c8mna/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;
}
header{
position: relative;
width: 100%;
height: 40px;
background: #333;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
i{
font-style: normal;
}
.topbar{
width: 1226px;
height: 100%;
margin: 0 auto;
line-height: 40px;
}
.left-nav{
float: left;
}
.left-nav >li{
float: left;
margin-right: 5px;
}
.left-nav >li > a{
color: #b0b0b0;
font-size: 12px;
}
.left-nav> i{
float: left;
color: #b0b0b0;
margin-right: 5px;
}
.left-nav >li > a:hover{
color: #fff;
}
.right-nav{
float: right;
}
.right-nav > li,i {
float: left;
margin-right: 5px;
margin-right: 5px;
color: #b0b0b0;
}
.right-nav > li > a{
color: #b0b0b0;
font-size: 12px;
}
.right-nav > li > a:hover{
color: #fff;
}
.shop-cart{
background: #424242;
line-height: 40px;
height: 40px;
width: 120px;
text-align: center;
}
.right-nav > li:nth-of-type(4):hover{
color: #ff6700;
background-color: #fff;
cursor: pointer;
}
.more{
display: none;
position: absolute;
z-index: 6;
top: 41px;
left: 43%;
height: 148px;
width: 124px;
box-shadow: 0 0 1px black inset;
background: url(./download.png) no-repeat 14px 11px/cover;
background-size: 80% 70%;
background-color: #fff;
}
.more::before{
content: "";
position: absolute;
top: -37px;
left: 27%;
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom: 17px solid #ffffff;
}
.more::after{
content: "小米商城APP";
position: absolute;
top: 110px;
left: 13%;
color: #000;
}
li.now:hover > .more{
display: block;
cursor: pointer;
}
.container{
position: relative;
width: 1226px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
.container > .logo-box{
position: absolute;
top: 22px;
left: 0;
margin: auto;
width: 55px;
height: 55px;
background: url(./小米官网实战/images/header/mi-logo.png) center;
background-color: #ff6700;
}
.logo-box:hover{
background: url(./小米官网实战/images/header/mi-home.png) center;
background-color: #ff6700;
cursor: pointer;
}
.container > a > .gif{
position: absolute;
top: 22px;
left: 70px;
}
.sec-nav {
position: relative;
top: 22px;
left: 250px;
height: 55px;
width: 650px;
}
.sec-nav > li{
float: left;
line-height: 55px;
margin-right: 20px;
}
.sec-nav > li >a{
color: #000;
font-size: 17px;
}
.sec-nav> li> a:hover{
color: #ff6700;
}
form > input{
float: left;
height: 50px;
}
form > input[type="text"]{
border: 1px solid #e0e0e0;
padding: 10px;
}
form > input[type="submit"]{
border: 1px solid #e0e0e0;
width: 52px;
height: 50px;
font-size: 28px;
}
form{
position: relative;
top: -31px;
float: right;
width: 296px;
height: 55px;
}
form > input:focus{
border:1px solid #ff6700;
outline: none;
}
form > input[type="submit"]:hover{
background-color: #ff6700;
color: #fff;
cursor: pointer;
border: none;
}
.but-buy-now{
display:none;
position: absolute;
z-index: 1;
top: 59px;
left: -250px;
width:1226px;
height:230px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.but-buy-now > ul{
display: flex;
justify-content: space-around;
width: 100%;
height: 100%;
}
.but-buy-now > ul >li{
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 204px;
height: 230px;
cursor: pointer;
}
.but-buy-now > ul >li > img{
transform: translateY(25px);
border-right: 1px solid gray;
}
.but-buy-now > ul >li:nth-child(5) > img{
border-right: none;
}
.but-buy-now > ul >li >div {
transform: translateY(17px);
font-size: 14px;
color: #333;
}
.but-buy-now > ul >li > p {
transform: translateY(-17px);
font-size: 12px;
color: #ff6700;
}
.sec-nav >li:nth-child(1):hover >.but-buy-now{
display: block;
}
#wrap {
position: relative;
width: 1226px;
height: 460px;
/* background-color: pink; */
margin: 10px auto 0;
}
#wrap .banner-img img {
opacity: 0;
position: absolute;
width: 1226px;
height: 460px;
transition: .6s;
}
#wrap input:nth-child(1):checked~.banner-img img:nth-child(1) {
opacity: 1;
}
#wrap input:nth-child(2):checked~.banner-img img:nth-child(2) {
opacity: 1;
}
#wrap input:nth-child(3):checked~.banner-img img:nth-child(3) {
opacity: 1;
}
#wrap input:nth-child(4):checked~.banner-img img:nth-child(4) {
opacity: 1;
}
#wrap input:nth-child(5):checked~.banner-img img:nth-child(5) {
opacity: 1;
}
#wrap .labels {
position: absolute;
right: 20px;
bottom: 10px;
width: 120px;
height: 20px;
}
#wrap .labels label {
float: left;
/* display: block; */
width: 8px;
height: 8px;
background-color: rgba(0, 0, 0, .4);
border: 2px solid #bbb;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#wrap input:nth-child(1):checked~.labels label:nth-child(1) {
background-color: #fff;
}
#wrap input:nth-child(2):checked~.labels label:nth-child(2) {
background-color: #fff;
}
#wrap input:nth-child(3):checked~.labels label:nth-child(3) {
background-color: #fff;
}
#wrap input:nth-child(4):checked~.labels label:nth-child(4) {
background-color: #fff;
}
#wrap input:nth-child(5):checked~.labels label:nth-child(5) {
background-color: #fff;
}
input[type="radio"]{
display: none;
}
#wrap .banner-menu{
position: absolute;
top: 0;
left: 0;
width: 234px;
height: 460px;
padding: 20px 0;
background: rgba(105,101,101,.6);
}
#wrap .banner-menu li{
height: 42px;
padding-left: 30px;
padding-right: 20px;
line-height: 42px;
color: #fff;
cursor: pointer;
font-size: 14px;
}
#wrap .banner-menu li > a{
color: #fff;
}
#wrap .banner-menu li > span{
float: right;
}
#wrap .banner-menu li:hover{
background-color: #ff6700;
}
#wrap .banner-menu .sub-menu{
display: none;
position: absolute;
top: 0;
left: 234px;
height: 460px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
z-index: 2;
}
#wrap .banner-menu .sub-menu .sub-menu-list a{
display: block;
width: 265px;
height: 76px;
padding: 18px 20px;
font-size: 14px;
color: #333;
}
#wrap .banner-menu .sub-menu .sub-menu-list a img{
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 7px;
}
#wrap .banner-menu .sub-menu .sub-menu-list a span{
vertical-align: middle;
}
#wrap .banner-menu .sub-menu .sub-menu-list{
float: left;
}
#wrap .banner-menu li:hover .sub-menu{
display: block;
}
#wrap .banner-menu .sub-menu-4{
width: 1100px;
}
#wrap .banner-menu .sub-menu-3{
width: 800px;
}
#wrap .banner-menu .sub-menu-2{
width: 600px;
}
.wrap-left{
position: relative;
top: 187px;
left: 234px;
width: 45px;
height: 55px;
font-size: 40px;
font-weight: 100;
line-height: 55px;
color: #fff;
border-radius: 0 5px 5px 0;
}
.wrap-left:hover{
background-color: rgba(105,101,101,.6);
cursor: pointer;
}
.wrap-right{
position: relative;
top: 133px;
left: 1181px;
width: 45px;
height: 55px;
font-size: 40px;
font-weight: 100;
line-height: 55px;
color: #fff;
border-radius: 5px 0 0 5px;
}
.wrap-right:hover{
background-color: rgba(105,101,101,.6);
cursor: pointer;
}
div[class="home-sub-row"]{
display: flex;
justify-content: space-between;
width: 1226px;
height: 170px;
/* background-color: aqua; */
margin: 10px auto 0;
}
div[class="home-sub1"]{
display: flex;
flex-wrap: wrap;
width: 234px;
height: 100%;
background: #5f5750;
}
div[class="home-sub1"] > .home-sub1-1,
.home-sub1-2,
.home-sub1-3,
.home-sub1-4,
.home-sub1-5,
.home-sub1-6{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 76px;
height: 85px;
color: #e0e0e0;
transition: .3s;
}
div[class="home-sub1"] > .home-sub1-1:hover{
color: #ff6700;
cursor: pointer;
}
.home-sub1-2:hover{
color: #ff6700;
cursor: pointer;
}
.home-sub1-3:hover{
color: #ff6700;
cursor: pointer;
}
.home-sub1-4:hover{
color: #ff6700;
cursor: pointer;
}
.home-sub1-5:hover{
color: #ff6700;
cursor: pointer;
}
.home-sub1-6:hover{
color: #ff6700;
cursor: pointer;
}
div[class="home-sub-row"] > .home-sub2{
width: 316px;
height: 170px;
background: url(./mi-1.jpg) no-repeat center/cover;
transition: .3s;
}
div[class="home-sub-row"] > .home-sub3{
width: 316px;
height: 170px;
background: url(./mi-2.jpg) no-repeat center/cover;
transition: .3s;
}
div[class="home-sub-row"] > .home-sub4{
width: 316px;
height: 170px;
background: url(./mi-3.jpg) no-repeat center/cover;
transition: .3s;
}
.home-sub2:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
cursor: pointer;
}
.home-sub3:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
cursor: pointer;
}
.home-sub4:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
cursor: pointer;
}
div.buy{
width: 1226px;
height: 397px;
margin: 30px auto;
}
div.buy > h2 {
font-weight: lighter;
height: 58px;
line-height: 58px;
}
div.buy > h2 > span {
float: right;
margin-left: 10px;
cursor: pointer;
}
div.buy > h2 > span:hover{
color: #ff6700;
}
.buy-sell{
display: flex;
justify-content: space-between;
}
.buy-sell > li {
width: 234px;
height: 339px;
padding: 40px 10px;
}
.buy-sell > li:nth-child(1){
text-align: center;
border-top: 1px solid #f00;
background-color: #f1eded;
}
.buy-sell > li:nth-child(1) > h3{
padding-top: 22px ;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(1) > p{
font-size: 14px;
line-height: 14px;
padding-top: 10px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(1) > span{
color: #ff6700;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(1) > del{
color: #b0b0b0;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(2){
text-align: center;
border-top: 1px solid #0f0;
background-color: #f1eded;
}
.buy-sell > li:nth-child(2) > h3{
padding-top: 22px ;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(2) > p{
font-size: 14px;
line-height: 14px;
padding-top: 10px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(2) > span{
color: #ff6700;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(2) > del{
color: #b0b0b0;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(3){
text-align: center;
border-top: 1px solid #00f;
background-color: #f1eded;
}
.buy-sell > li:nth-child(3) > h3{
padding-top: 22px ;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(3) > p{
font-size: 14px;
line-height: 14px;
padding-top: 10px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(3) > span{
color: #ff6700;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(3) > del{
color: #b0b0b0;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(4){
text-align: center;
border-top: 1px solid #f00;
background-color: #f1eded;
}
.buy-sell > li:nth-child(4) > h3{
padding-top: 22px ;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(4) > p{
font-size: 14px;
line-height: 14px;
padding-top: 10px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(4) > span{
color: #ff6700;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(4) > del{
color: #b0b0b0;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(5){
text-align: center;
border-top: 1px solid #0f0;
background-color: #f1eded;
}
.buy-sell > li:nth-child(5) > h3{
padding-top: 22px ;
font-size: 16px;
line-height: 16px;
font-weight: 400;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(5) > p{
font-size: 14px;
line-height: 14px;
padding-top: 10px;
text-overflow: ellipsis;
color: #b0b0b0;
overflow: hidden;
white-space: nowrap;
}
.buy-sell > li:nth-child(5) > span{
color: #ff6700;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:nth-child(5) > del{
color: #b0b0b0;
font-size: 12px;
line-height: 12px;
}
.buy-sell > li:hover{
cursor: pointer;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.model-buy{
width: 1226px;
height: 120px;
cursor: pointer;
margin: 0 auto 20px;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
div.buy-mi{
width: 1226px;
margin: 0px auto;
}
div.buy-mi > h2{
font-weight: lighter;
height: 58px;
line-height: 58px;
}
div.buy-mi > h2 > span {
float: right;
margin-left: 10px;
cursor: pointer;
}
div.buy-mi > h2 > span:hover{
color: #ff6700;
}
.big-img{
float: left;
width: 234px;
height: 614px;
background:url(./2.webp) no-repeat center/cover;
cursor: pointer;
transition: .3s;
}
.img-buy{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-between;
width: 992px;
height: 614px;
}
.img-buy > li {
width: 234px;
height: 300px;
background-color: #f5f5f5;
margin-left: 14px;
text-align: center;
cursor: pointer;
transition: .3s;
}
.img-buy > li > img{
margin-top: 30px;
width: 160px;
height: 160px;
}
.img-buy > li > h3{
font-size: 14px;
font-weight: 400;
color: #333;
}
.img-buy > li > .desc{
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
}
.img-buy > li > .price{
color: #ff6700;
}
.img-buy > li > .price > del{
margin-left: 8px;
color: #b0b0b0;
}
.img-buy > li.top{
margin-bottom: 14px;
}
.img-buy > li:hover{
transform: translateY(-3px);
box-shadow: 0 0 10px #ccc;
}
.big-img:hover{
transform: translateY(-3px);
box-shadow: 0 0 10px #ccc;
}
.model-pen{
width: 1226px;
height: 120px;
cursor: pointer;
margin: 20px auto 20px;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
div.video-mi{
width: 1226px;
margin: 0px auto;
}
div.video-mi > h2{
font-weight: lighter;
height: 58px;
line-height: 58px;
}
div.video-mi > h2 > span {
float: right;
margin-left: 10px;
cursor: pointer;
}
div.video-mi > h2 > span:hover{
color: #ff6700;
}
.video-play{
display: flex;
position: relative;
justify-content: space-between;
width: 1226px;
height: 285px;
}
.video-play > li{
width: 296px;
height: 285px;
background-color: #f5f5f5;
text-align: center;
cursor: pointer;
}
.video-play > li > .iconfont{
position: absolute;
top: 140px;
left: 20px;
color: #fff;
font-weight: bolder;
font-size: 30px;
}
.video-play > li:hover > .iconfont{
color: #ff6700;
}
.video-play > li:hover{
box-shadow: 0 0 10px #ccc;
}
.video-play > li > h3{
margin: 20px 14px 6px;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #333;
}
.video-play > li > p{
height: 18px;
margin: 0 14px;
font-size: 12px;
color: #b0b0b0;
}
.video-play > li:nth-child(2) > .iconfont{
position: absolute;
top: 140px;
left: 329px;
}
.video-play > li:nth-child(3) > .iconfont{
position: absolute;
top: 140px;
left: 636px;
}
.video-play > li:nth-child(4) > .iconfont{
position: absolute;
top: 140px;
left: 950px;
}
footer{
margin: 30px auto 0;
width: 1226px;
/* height: 80px; */
}
.bottom{
display: flex;
width: 1226px;
height: 80px;
background-color: #f1eded;
border-bottom: 1px solid gray;
}
.bottom > li{
margin: auto;
padding-right:50px ;
border-right: 1px solid gray;
cursor: pointer;
}
.bottom > li:nth-child(5){
border-right: none;
}
.bottom > li >span.iconfont{
font-size: 20px;
}
.bottom > li:hover{
color: #ff6700;
}
.name-tel{
display: flex;
padding-top: 40px;
}
.name-tel-1 {
width: 160px;
}
.name-tel-1 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-1 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-1 > dd:hover{
color: #ff6700;
}
.name-tel-2 {
width: 160px;
}
.name-tel-2 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-2 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-2 > dd:hover{
color: #ff6700;
}
.name-tel-3 {
width: 160px;
}
.name-tel-3 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-3 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-3 > dd:hover{
color: #ff6700;
}
.name-tel-4 {
width: 160px;
}
.name-tel-4 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-4 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-4 > dd:hover{
color: #ff6700;
}
.name-tel-5 {
width: 160px;
}
.name-tel-5 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-5 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-5 > dd:hover{
color: #ff6700;
}
.name-tel-6 {
width: 160px;
height: 112px;
border-right: 1px solid #424242;
}
.name-tel-6 > dt{
margin: 0 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.name-tel-6 > dd{
margin-bottom: 20px;
font-size: 12px;
line-height: 1.25;
color: #424242;
cursor: pointer;
}
.name-tel-6 > dd:hover{
color: #ff6700;
}
.name-tel> .weixin{
display: flex;
}
.name-tel> .weixin > span{
font-size: 3em;
color: #ff6700;
margin-top: 31px;
margin-left: 57px;
cursor: pointer;
}
.ahbc{
position: fixed;
width: 84px;
height: 561px;
/* background-color: pink; */
right: 0;
bottom: 20px;
box-shadow: 0 0 1px black;
}
.ahbc-1{
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: flex-start;
background-color: #fff;
}
.ahbc-1 > li{
display: flex;
width: 100%;
height: 92px;
flex: 1;
cursor: pointer;
}
.ahbc-1 > li > span {
margin: auto;
font-size: 2em;
}
.ahbc-1 > li > span.iconfont:hover{
color: #ff6700;
}
@media all and (max-width: 1400px){
.ahbc{
width: 27px;
height: 210px;
}
.ahbc-1 > li > span {
margin: auto;
font-size: 20px;
}
}
.ahbc-1 > li:nth-child(1) > .caizhong{
display: none;
position: absolute;
left: -140px;
width: 130px;
height: 192px;
padding: 14px;
background-color: #f1eded;
box-shadow: 0 0 1px black;
}
.ahbc-1 > li:nth-child(1) > .caizhong::after{
content: "";
position: absolute;
left: 125px;
top: 10px;
border: 15px solid transparent;
border-left-color: #f1eded;
}
.ahbc-1 > li:nth-child(1) > .caizhong >p{
color: #757575;
font-size: 1.15em;
margin-top: 10px;
}
.ahbc-1 > li:nth-child(1):hover > .caizhong{
display: block;
}
body{
cursor:url("./1.png"),pointer;
}
这是我刚学习前端做的一个小米网页,看似有点相似,但是里面的元素还是有很多不同的地方.
祝愿学弟学妹早日实现自己的梦想。
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
