今天学了几个简单的代码:
input text 输入框
display:none;隐藏模块
display: inline-block; 保留上下外边距/内边距的行内模块
outline:none;去掉选中输入框时的轮廓
今天还学习了相对定位和绝对定位的相互关系，要想找到绝对定位，需要先找到相对定位，也是一种父与子的关系
——————————————————————————————————
下面就是我还原的腾讯首页的导航部分了：
<!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>qq.com</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="nav">
<div class="nav-left">
<img src="https://inews.gtimg.com/newsapp_bt/0/12171811596_909/0" alt=""width 40px></div>
<div class="nav-mine">
<div class="nav-mine-left">
<div class="nav-mine-left-ipt">
<span>网页</span>
<input type="text" name="" id="">
</div>
</div>
<div class="sougo">
<span>
搜狗搜索
</span>
</div>
</div>
<div class="nav-right">
<span>无障碍浏览</span>
<span>qq空间</span>
<span>qq邮箱</span>
<span>登录</span>
</div>
<div id="app">
<div class="header">
<a href="http://">新闻</a>
<a href="http://">视频</a>
<a href="http://">公益</a>
<a href="http://">军事</a>
<a href="http://">体育</a>
<a href="http://">NBA</a>
<a href="http://">娱乐</a>
<a href="http://">财经</a>
<a href="http://">科技</a>
<a href="http://">时尚</a>
<a href="http://">汽车</a>
<a href="http://">房产</a>
<a href="http://">教育</a>
<a href="http://">文化</a>
<a href="http://">星座</a>
<a href="http://">游戏</a>
<a href="http://">更多</a>
</div>
</div>
</body>
</html>
————————————————————————————————————
因为我用的是外联样式，所以有一个index外联文件，内容如下:
*{
margin: 0 auto;
padding: 0 auto;}
.nav{
width: 1440px;
height: 90px;
}
.nav-left{
float: left;
width: 20%;
height: 90px;
}
.nav-left>img{
width: 280px;
height: 80px;
}
.nav-mine{
position: relative;
float: left;
width: 742px;
height: 60px;
margin-top: 30px;
}
.nav-mine-left{
float: left;
margin-left: 235px;
}
.nav-mine-left-ipt{
width: 400px;
font-size: 20px;
color: black;
border: 2px solid #d7d7d7;
border-radius: 25px;
padding-left: 15px;
padding-top: 6px;
/* margin-top: 10px; */
/* padding-bottom: 10px; */
margin-bottom: 6px;
/* background-color:rgb(59, 59, 59);
background-color:#d7d7d7; */
}
.nav-mine-left>div>input{
border: 0;
height: 35px;
width: 350px;
outline: none;
/* display: none; */
/* background-color:#d7d7d7; */
}
.sougo{
position: absolute;
width: 125px;
height: 43px;
text-align: center;
background-color: #1479d6;
left: 620px;
border-radius: 25px;
line-height: 43px;
font-size: 18px;
color: white;
}
.nav-right{
float: left;
width: 400px;
height: 90px;
font-size: 20px;
text-align: right;
line-height: 90px;
padding-right: 10px;
}
#app{
width: 1400px;
height: auto;
text-align: center;
}
.header{
display: inline-block;
width: 100%;
height: 50px;
background-color: #1479d7;
font-size: 20px;
line-height: 50px;
border-radius: 5px;
}
.header a{
color: #fff;
padding: 4px ;
margin: 13px;
text-decoration:none;
}
.header a:hover{
background-color: #fff;
color: #1479d7;
}
____________________________________________________________________________虽然还有不足，但是会慢慢改进
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
