<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.middle{
padding-top: 10px;
position: absolute;
}
.middle1{
height: 40px;
position:relative ;
top: 50px;
background-color: lightgrey;
}
.middle2{
width: 80px;
height: 500px;
float: left;
position: relative;
top: 100px;
}
.middle2 img{
width: 80px;
height: 500px;
float: left;
}
.middle2 img:hover {
border-bottom: 2px solid cornflowerblue;
}
.middle3{
height: 40px;
position: relative;
top: 12px;
}
.middle3 a{
color: lightcoral;
position: relative;
top: 2px;
}
.middle3 div{
float: left;
width: 60px;
line-height: 38px;
color: #999999;
text-align: center;
}
.middle3 div:hover{
color: black;
border-bottom: 2px solid cornflowerblue;
}
.middle4{
}
.middle5{
width:600px;
height: 200px;
position: relative;
top: 2px;
float: left;
}
.middle5 a{
font-size: 16px;
text-decoration: underline;
}
.middle5 span{
font-size: 14px;
}
.middle6{
width: 8px;
height: 200px;
position: relative;
top: 2px;
float: left;
}
.middle7{
width: 330px;
position: relative;
top: 2px;
border-left: 1px solid lightgrey;
float: left;
padding-left: 10px;
}
.middle7-1 div span{
color: blue;
text-decoration: underline;
}
.middle7-2 div{
width: 70px;
float: left;
padding-right: 10px;
padding-top: 10px;
text-align: center;
}
.middle7-2 div img{
width: 70px;
height: 70px;
}
.middle7-3 div {
text-align: center;
}
.middle7-3 div a{
width: 70px;
padding-right: 10px;
padding-bottom: 10px;
float: left;
text-decoration: underline;
color: blue;
}
.middle-1{
width: 730px;
}
.left-box {
width: 538px;
height: 34px;
/*background-color: greenyellow;*/
border: 1px solid #3385ff;
}
.container {
width: 720px;
/*background-color: pink;*/
}
.container > div {
float: left;
}
input {
outline: none;
border: 0;
height: 32px;
width: 500px;
margin-left: 5px;
}
.middle-btn {
height: 36px;
width: 100px;
background-color: cornflowerblue;
text-align: center;
line-height: 36px;
color: #fff;
float: left;
}
.right-head{
float: right;
width: 620px;
text-align: right;
}
.right-head a{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="middle">
<div class="middle-1">
<div style="float: left">
<img src="img/timg.jpg" alt="" style="width: 80px">
</div>
<div class="container">
<div class="left-box" >
<input type="text">
<img src="" alt="">
</div>
<div class="middle-btn" >百度一下</div>
</div>
</div>
<div class="right-head">
<a>百度首页</a>  
<a>设置▼</a>  
<a>登录</a>
</div>
</div>
<div class="middle1" >
</div>
<div class="middle2"><img src="" alt=""></div>
<div class="middle3">
<div>网页</div>
<div>资讯</div>
<div>视频</div>
<div>图片</div>
<div>知道</div>
<div>文库</div>
<div>贴吧</div>
<div>采购</div>
<div>地图</div>
<div>更多»</div>
</div>
<div class="middle3"><a>百度为您找到相关结果约4,080,000个</a>
            
            
            
            
            
<a>搜索工具</a>
</div>
<div class="middle4">
<div class="middle5">
<div class="middle5-1">
<br>
<a>h5页面制作_强大的免费H5页面_免费h5设计平台</a><br>
<span>在线编辑,轻松在模板中添加文字,图片,音乐等元素,h5页面制作,就是如此简单,特效引爆微信h5</span><br>
<span>营销,精美动画,炫酷特效,在静态的朋友圈中脱颖而出.</span><br>
</div>
<div class="middle5-1">
<br>
<a>h5制作_用MAKA全新h5设计</a><br>
<span>h5制作,用MAKAh5设计,全程傻瓜式操作,智能生成h5.MAKA在线设计神器,超千万人选择的设计神</span><br>
<span>器,免费快速制作高端h5,赶快来试试.</span><br>
</div>
<div class="middle5-1">
<br>
<a>h5制作_傻瓜式操作_h5在线制作网站</a><br>
<span>h5制作,微信h5在线制作,傻瓜式操作,小白用户轻松上手,众多模板仅需简单修改文字图片,即可生</span><br>
<span>成微信h5页面!</span><br>
</div>
<div class="middle5-1">
<br>
<a>Epub360 - 专业的h5制作</a><br>
<span>不同于模板类工具,Epub360几乎支持完全自由的交互设计,如序列帧,SVG动画,陀螺仪.Epub360功</span><br>
<span>能强大,操作像PPT样简单,是滴滴,招行,实力传播等品牌机构的共同选择!</span><br>
</div>
<div class="middle5-1">
<br>
<a>意派∙Epub360-专业H5页面在线设计制作工具,H5微信邀请函制作软件</a><br>
<span>意派Epub360全面满足您个性化需求.您无需编程即可轻松制作专业微杂志,微信邀请函,H5小游戏</span><br>
<span>等营销互动H5,并可直接微信发布。</span><br>
</div>
</div>
<div class="middle6"></div>
<div class="middle7">
<div class="middle7-1">
<div><a>其他人还搜</a>
            
            
            
       
<span>展开∨</span>
</div>
<div class="middle7-2">
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
</div>
<div class="middle7-3">
<div><a>1</a></div>
<div><a>2</a></div>
<div><a>3</a></div>
<div><a>4</a></div>
</div>
</div>
<div class="middle7-1">
<div><a>其他人还搜</a>
            
            
            
       
<span>展开∨</span>
</div>
<div class="middle7-2">
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
</div>
<div class="middle7-3">
<div><a>5</a></div>
<div><a>6</a></div>
<div><a>7</a></div>
<div><a>8</a></div>
</div>
</div>
<div class="middle7-1">
<div><a>其他人还搜</a>
            
            
            
       
<span>展开∨</span>
</div>
<div class="middle7-2">
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
<div><img src="img/pic01.jpg"></div>
</div>
<div class="middle7-3">
<div><a>9</a></div>
<div><a>10</a></div>
<div><a>11</a></div>
<div><a>12</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
第一周day04
最新推荐文章于 2021-04-14 19:05:32 发布