background: url("image/meizu.jpg") no-repeat center ;
老师我的图片还是不居中 然后我想加个cover 但是在简写这里就加不进去 在center后边一加cover 图片就不见了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>米课</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="images/favicon.ico"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/iconfont.css"> <style> /* 导航开始 */ .nav { width: 100%; height: 66px; background-color: #88c5e1; border-bottom: 5px solid #54abd4; position: fixed; top: 0; left: 0; z-index: 999; } .wrap { width: 87%; margin: 0 auto; } .login, .search, .nav-bar { height: 66px; float: left; } .text-input { width:100%; height: 40px; border: 1px solid #f5f5f5; box-sizing: border-box; padding-left: 10px; background-color:#f5f5f5; outline :none; /* 点击input时 没有边框 */ border-radius: 2px; margin-top: 13px; transition: all .2s; } .text-input:hover { background-color: #fff; border-color: #54abd4; } .search button { width:40px; height: 34px; background-color:#f5f5f5; color:#54abd4; font-weight: 900; position: absolute; right: 2px; top: 16px; } .nav-bar>ul { float: right; } .nav-bar li { float: left; } .nav_bar a { color: #fff; padding: 10px; display: block; margin-left: 8px; margin-top: 12.5px; } .nav-bar-active { border-bottom: 2px solid #fff; } .nav-bar a:hover { border-bottom: 2px solid #fff; } /* phone start */ @media screen and (max-width: 768px) { .login { width: 16%; background: url("images/Brand-S.png") no-repeat left center; /* 或者只写left */ background-size: 38px; } .search { width: 68%; position: relative; } .nav-bar { display: none; } .btn { float: right; width: 43px; height: 43px; border: 1px solid#fff; color:#fff; line-height: 43px; font-weight: 700; font-size: 20px; margin-top: 10.5px; } } /* phone end */ /* ipad start */ @media screen and (min-width: 768px) and (max-width: 992px) { .login { width: 18%; background: url("images/Brand-M.png") no-repeat left; /* 或者只写left */ background-size: 86px; } .search { width: 42%; position: relative; } .nav-bar { width: 40%; } .btn { display: none; } } /* ipad end */ /* pc start */ @media screen and (min-width: 992px) { .login { width: 25%; background: url("images/Brand.png") no-repeat left center; /* 或者只写left */ background-size: 183px; } .search { width: 40%; position: relative; } .nav-bar { width: 35%; } .btn { display: none; } } /* pc end */ /* 导航结束 */ /* 登录开始 */ .login { width: 100%; height: 460px; background-image: url("images/homeImg.png"); background-repeat: no-repeat; background-size: 100% 100%; margin-top: 71px; padding-top: 75px; box-sizing: border-box; } .login-logo, .form { float: left; } .login-logo { width: 70%; } .form { width: 30%; } /* 登录结束 */ </style> </head> <body> <!-- 导航开始 --> <div class="nav"> <div class="wrap"> <div class="login"></div> <div class="search"> <form action=""> <input class="text-input" type="text" placeholder="查找课程"> <button class="iconfont"></button> </form> </div> <div class="nav-bar"> <ul> <li><a class="nav-bar-active" href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">公告</a></li> <li><a href="#">登录</a></li> </ul> </div> <div class="btn"> <i class="iconfont"></i> </div> </div> </div> <!-- 导航结束 --> <!-- 登录开始 --> <div class="login"> <div class="wrap"> <div class="login-logo"> <img src="images/MiLogo.png" alt=""> <br> <img src="images/miTitle.png" alt=""> </div> <div class="form"></div> </div> </div> <!-- 登录结束 --> </body> </html>
老师 您给我看看 哪错了 怎么结果是这样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title> <link rel="icon" href="https://shop.gionee.com/favicon.ico"> <link rel="stylesheet" href="css/jinli.css"> <style> *{ margin: 0px; padding: 0px; } </style> </head> <body> <div class="nav"> <div class="wrap"> <div class="logo"> <img src="image/logo.png" alt=""> </div> <div class="nav_right"> <div class="enter"> <ul> <li><a href="#">amigo账号登录</a><span>|</span></li> <li><a href="#">原账号登录</a><span>|</span></li> <li><a href="#">注册</a></li> <li><a href="#">购物车(0)</a></li> </ul> </div> <div class="phone"> <ul> <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="#">amigoOS</a></li> <li class="search" > <input type="text" placeholder="请输入搜索内容" autofocus> <button>搜</button> </li> </ul> </div> </div> </div> </div> </body> </html>
.nav{ width: 100%; height: 104px; border-bottom: 1px solid #d5d5d5; position: fixed; left: 0px; top: 0px; /*background-color: #cc0000;*/ } .wrap{ width: 1084px; height: 104px; margin: 0px auto; /*background-color: #42c3ee;*/ } .logo img{ width: 205px; margin-top: 25px; } .logo,.nav_right{ float: left; } .nav_right{ width:879px; height: 104px; } .enter{ width: 100%; height: 30px; line-height: 30px; } .enter ul li a{ text-decoration: none; } .enter ul li a:hover{ color: #ef4222; } .enter ul li{ list-style-type: none; } .nav_right ul{ float: right; } .nav_right ul li{ float: left; } .nav_right ul a{ margin:0px 10px; color: #9f9f9f; } .enter ul li:first-child a{ color:#ef4222 ; } .phone{ width:100%; height: 73px; line-height: 73px; } .phone ul li a{ text-decoration: none; } .phone ul li{ list-style-type: none; } .phone ul li a{ margin-left: 40px; font-size: 16px; color: black; /*font-weight: bolder;*/ } .phone ul li a:hover{ color: #ef4222; } .search{ width: 170px; height: 30px; /*border: 1px solid #fff;*/ box-sizing: border-box; /*padding-left: 5px;*/ margin-top:18.5px; margin-left: 120px; } .search input{ width: 138px; height: 28px; float: left; } .search button{ width: 25px; height: 28px; float: left; background-color: #ffff; border: none; }
老师我的搜索按钮怎么不在这个框里面呀
非常抱歉给您带来不好的体验！为了更深入的了解您的学习情况以及遇到的问题，您可以直接拨打投诉热线：
我们将在第一时间处理好您的问题！
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智（北京）科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护：百战汇智（北京）科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证：京B2-20212637
京公网安备 11011402011233号