<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*外部下载字体*/
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('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;
}
*{
margin:0px;
padding:0px;
}
ul{
list-style-type:none;
}
a{
text-decoration:none;
}
body{
/* background-color:rgba(128, 128, 128, 0.089);
*/
background-color:#fff;
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.fl{
float:left;
}
div.content{
width:1226px;
height:100px;
background-color:#fff;
margin:0 auto;
}
div.content::after{
content:"";
display:block;
clear:both;
}
.content>.logo{
width:62px;
height:55px;
/* background-color:red; */
margin-top:22px;
}
.content>.logo>a{
width:55px;
height:55px;
display:inline-block;
text-indent:55px;
white-space:nowrap;
overflow:hidden;
/*
height:0px;
padding-top:55px;
overflow:hidden;
*/
background-image:url(logo.png);
}
.content>.nav{
width:850px;
height:100px;
/* background-color:blue; */
}
.content>.nav>ul{
margin-left:172px;
height:100px;
line-height:100px;
/* background-color:red; */
}
.content>.nav>ul::after{
content:"";
display:block;
clear:both;
}
.content>.nav>ul>li{
float:left;
font-size:16px;
margin:0 10px;
/* height:100px;
width:150px; */
/* background-color:red; */
height:1px;
}
.content>.nav>ul>li>a{
color:#333;
}
.content>.nav>ul>li>a:hover{
color:#ff6600;
}
.content>.ser{
width:296px;
height:50px;
margin-top:25px;
background-color:lawngreen
}
.content>.ser>form{
position:relative;
width:296px;
height:50px;
}
.content>.ser>form>input[type = "text"]{
width:296px;
height:50px;
color:#757575;
text-indent:1em;
box-sizing:border-box;
border:1px solid #c0c0c0;
}
.content>.ser>form>input[type = "text"]::after{
content:"";
display:block;
clear:both;
}
.content>.ser>form>button{
position:absolute;
right:0px;
width:52px;
height:50px;
box-sizing:border-box;
background-color:#fff;
color:#333333;
font-weight:bold;
/* outline:none; */
/* border:0px; */
border:1px solid #c0c0c0;
}
.content>.ser>form>button:hover{
background-color:#ff6600;
color:#fff;
}
.contentHover{
display:none;
width:1226px;
height:230px;
background-color:#fff;
margin:0 auto;
border-top:1px solid #c0c0c0;
}
.contentHover>ul::after{
content:"";
display:block;
clear:both;
}
.contentHover>ul{
width:1226px;
height:230px;
}
.contentHover>ul>li{
cursor:pointer;
float:left;
width:203.5px;
height:231px;
/* background-color:lightcoral */
text-align:center;
}
.verticalLine{
margin-top:40px!important;
height:100px!important;
width:1px!important;
background-color:#c0c0c0!important;
/* 77*102 */
}
.contentHover>ul>li>.img{
width:161px;
height:111px;
margin:0 auto;
/* background-color:red; */
margin-top:40px;
}
.contentHover>ul>li>.img>img{
width:161px;
height:111px;
}
.contentHover>ul>li>.model{
margin-top:17px;
}
.contentHover>ul>li>.model>a{
color:#333333;
}
.contentHover>ul>li>.price>a{
color:#ff6600;
}
</style>
</head>
<body>
<div class="content">
<div class="logo fl">
<a href="#">小米官网</a>
</div>
<div class="nav fl">
<ul>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">小米手机</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">Redmi 红米</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">电视</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">笔记本</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">家电</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">路由器</a></li>
<li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="ser fl">
<form method = "GET" action="">
<input type="text" value = "小米10S 新品爆料">
<button class = "iconfont"></button>
</form>
</div>
</div>
<div id = "contentHover1" class = "contentHover">
<ul>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米10S</a></div>
<div class="price"><a href="#">3299元起</a></div>
</li>
<li class = "verticalLine"></li>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米11</a></div>
<div class="price"><a href="#">3999元起</a></div>
</li>
<li class = "verticalLine"></li>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米10至尊纪念版</a></div>
<div class="price"><a href="#">5299元起</a></div>
</li>
<li class = "verticalLine"></li>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米10</a></div>
<div class="price"><a href="#">3399元起</a></div>
</li>
<li class = "verticalLine"></li>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米10 青春版 5G</a></div>
<div class="price"><a href="#">2099元起</a></div>
</li>
<li class = "verticalLine"></li>
<li>
<div class = "img">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
</div>
<div class = "model"><a href="#">小米MIX Alpha</a></div>
<div class="price"><a href="#">19999元起</a></div>
</li>
</ul>
</div>
<script type = "text/javascript">
//封装选择ID
// window.οnlοad=function(){
function $(id){
return document.getElementById(id);
}
function $2(class2){
return document.getElementsByClassName(class2)[0];
}
//鼠标进
function onmouseover2(){
// this.style.display="none";
$("contentHover1").style.display="block";
// document.getElementById("contentHover1").style.display = "block";
this.style.boxShadow=" 0 2px 2px gray";
}
//鼠标出
function onmouseout2(){
$("contentHover1").style.display="none";
this.style.boxShadow='none';
}
// }
</script>
</body>
</html>
渡一春季班第四天
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/114657786
今日推荐
周排行