用BOOSTRAP做了个小练习，有三个问题

来源：1-1 课程介绍

慕先生7419658

2018-05-08 00:10:11

做了一个小练习，效果及问题如下图

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VoteBoostrap6</title>
<meta name="viewport" content="width=device-width,
    initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" type="text/css" href="vote1.css" />
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>

<div class="container" >
<div id="header" class="row">
  <div id="log" class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
  
  <div id="profile" class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
   <ul class="nav nav-tabs">
    <li ><a href="" class="item1">pro-a</a></li>
    <li ><a href="" class="item2">pro-b</a></li>
    <li ><a href="" class="item3">pro-c</a></li>
   </ul>

  </div>
  <div id="search" class=" col-xs-2 col-sm-2 col-md-2 col-lg-4 ">
   <input type="text" class="search_item1">

  </div>
  <div id="icon" class="pull-right col-xs-2 col-sm-2 col-md-2 col-lg-2">
   <a href="" class="icon_item1"></a>
   <a href="" class="icon_item2"></a>
   <a href="" class="icon_item3"></a>
  </div>
</div>
</div>
</body>
</html>

CSS 代码如下

a{
text-decoration: none;
color:white;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-tabs {
border-bottom: 0px solid #ddd;
}
#header{
background-color:black ;

}
@media screen and (max-width:768px){

a{
  font-size:0.5px;

}
li{
  width:30px;
}
*{
  border:1px solid green;
}
}
@media screen and (min-width:769px) and (max-width:991px){
*{
  font-size:112px;
  border:1px solid yellow;
}
/*li{
  width:170px;
}*/
}

@media screen and (min-width:992px) and (max-width:1199px){
*{
  font-size:22px;

}
li{
  width:170px;
}
*{
  border:1px solid blue;
}
}
@media screen and (min-width:1200px){
.container{
  width:100%;
  height:75px;
}
#log{
  /*border:1px solid green;*/
  top:2px;
  height:75px;
  background:url("imgs/logo.png") no-repeat center;
  }
#profile{
  top:10px;

}
a{
  font:white;

}
#search{
/*left:596px;
position:absolute;
height:20px;*/
top:25px;
left:100px;

}
#search:after{
  content:"";
  display:inline-block;
  border:0px solid red;
  width:20px;
  height:20px;
  top:30px;
  background:url("imgs/icon-1-sprite_w22.png") no-repeat center;
  background-position:0px 0px;
}
#icon{
  top:30px;
/* position:absolute;
  top:16px;
  height:20px;
  left: 960px;*/
}
.icon_item1:after,.icon_item2:after,.icon_item3:after{
  content:"";
  display:inline-block;

  width:50px;
  height:20px;
  background:url("imgs/icon-1-sprite_w22.png") no-repeat center;

}
.icon_item1:after{
  background-position:0px -24px;
}
.icon_item2:after{
  background-position: 0px -48px;
}
.icon_item3:after{
  background-position: 0px -72px;
}

十分感谢

写回答

1回答