admin管理员组文章数量:1567525
目录
一、成果展示
二、html部分
三、css样式设置
3.1上方导航栏格式设置
3.2小米商城app下拉框制作,这里将小三角与二维码分开制作
3.3文本框中样式设计
一、成果展示
二、html部分
小米首页最上部导航和下面的快速导航栏制作
<div class="nav">
<nav >
<ul class="n1">
<li><a href="#">小米官网</a></li>
<li class="line">|</li>
<li><a href="#">小米商城</a></li>
<li class="line">|</li>
<li><a href="#">MIUI</a></li>
<li class="line">|</li>
<li><a href="#">loT</a></li>
<li class="line">|</li>
<li><a href="#">云服务</a></li>
<li class="line">|</li>
<li><a href="#">天星数科</a></li>
<li class="line">|</li>
<li><a href="#">有品</a></li>
<li class="line">|</li>
<li><a href="#">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="#">企业团购</a></li>
<li class="line">|</li>
<li><a href="#">资质证照</a></li>
<li class="line">|</li>
<li><a href="#">协议规则</a></li>
<li class="line">|</li>
<li class="app"><a href="#">下载app</a>
<div class="app1">
<div class="app2"></div>
<div class="app3"><img src="./img/download.png" alt="二维码图片"><p>小米商城app</p></div>
</div>
</li>
<li class="line">|</li>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="n2">
<li><a href="#">登录</a></li>
<li class="line">|</li>
<li><a href="#">注册</a></li>
<li class="line">|</li>
<li><a href="#">消息通知</a></li>
<li class="cart"><a href="#" class="a1"><i class="fa fa-shopping-cart i1"></i>购物车(0)</a>
<div class="sc">
购物车还没有商品,赶紧选购吧!
</div>
</li>
</ul>
</nav>
</div>
<div class="srr">
<header>
<a href="#"><img src="./img/logo-mi2.png" alt=""></a>
<div class="xiaomi">
<ul>
<li><a href="#">Xiaomi手机</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/手机1.webp" alt=""></div>
<p class="civi">Xiaomi Civi 1S</p>
<p class="pay">2299元起</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">Redmi 红米</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/手机2.webp" alt=""></div>
<p class="civi">Red Note 11T Pro+</p>
<p class="pay">1999元起</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">电视</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/电视.webp" alt=""></div>
<p class="civi">Redmi智能电视X55 2022</p>
<p class="pay">2299元</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">笔记本</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/笔记本.webp" alt=""></div>
<p class="civi">RedmiBook Pro 14 2022 锐龙版</p>
<p class="pay">5299元起</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">平板</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/平板.webp" alt=""></div>
<p class="civi">小米平板5</p>
<p class="pay">1999元起</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">家电</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/家电.webp" alt=""></div>
<p class="civi">米家扫地机器人1T</p>
<p class="pay">1299元</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">路由器</a>
<div class="xiaomi1">
<div class="phone1">
<div class="phone2">
<a href="#">
<div><img src="./img/路由器.webp" alt=""></div>
<p class="civi">Redmi 电竞路由器 AX5400</p>
<p class="pay">549元</p>
</a>
</div>
</div>
</div>
</li>
<li><a href="#">服务中心</a></li>
<li><a href="#">社区</a></li>
</ul>
<div class="text">
<input type="text">
<a href="#"><i class="fa fa-search fa-1x"></i></a>
</div>
</div>
</header>
三、css样式设置
这里将一些关键css样式设置整理一下
3.1上方导航栏格式设置
将整体分为两个部分一个设置左浮动一个设置右浮动即可,这里可以防止页面大小变化,也不会影响整体展示
.nav{
width: 100%;
height: 40px;
background-color: #333;
}
nav{
width: 1226px;
height: 40px;
margin: 0 auto;
}
nav>ul>li{
color: #b0b0b0;
font-size: 12px;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
nav>.n2{
float: right;
}
.line{
font-size: 12px;
color: #424242;
float: left;
margin: 0 8px;
}
3.2小米商城app下拉框制作,这里将小三角与二维码分开制作
.app1{
position: relative;
display: none;
z-index: 4;
}
.app3{
width: 140px;
height: 150px;
box-shadow: 0px 0px 3px #b0b0b0;
position: absolute;
background-color: white;
z-index: 10;
left: -45px;
top: 1px;
}
/* 白色箭头设置 */
.app1>.app2{
width: 0px;
height: 0px;
border-width: 8px;
border-color: transparent transparent white transparent;
border-style: dashed;
position: relative;
bottom: 16px;
left: 15px;
}
.app3>p{
font-size: 16px;
margin: -16px;
color: #333;
}
.app3>img{
width: 90px;
height: 90px;
margin-top: 20px;
}
.app:hover>.app1{
display: block;
}
3.3文本框中样式设计
这里采用的focus中的聚焦方法使得文本框与其后面的a元素能够一起进行样式变化
.text>input:hover,.text>input:hover+a{
border:1px solid gray;
}
.text>input:focus,.text>input:focus+a{
border:1px solid #FF832F;
}
.text>a>i{
margin: 17px 17px;
}
.text>a:hover{
background-color: #FF832F;
}
.text>a:hover>i{
color: white;
}
版权声明:本文标题:用html和css制作静态小米网页(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726414255a1069616.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论