homework8 移动端界面
注: 点击图标放大,点击图片旋转180度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动端</title>
<link rel="stylesheet" href="css/ydd.css" type="text/css" />
</head>
<body>
<div class="dbody">
<div class="nav">
<img src="img/favicon.ico" />
<ul>
<li><a href="ydd.html">首页</a></li>
<li><a href="#ser">服务</a></li>
<li><a href="#plat">平台</a></li>
<li><a href="#solution">方案</a></li>
<li><a href="#kh">客户</a></li>
<li><a href="#kh">联系</a></li>
</ul>
</div>
<div class="banner">
<img src="img/banner/bananer3.png" />
</div>
<div class="ser" id="ser">
<h1>我们的服务</h1>
<h2></h2>
<h3></h3>
<h4>我们致力于提供的互联网解决方案,奥斯卡绝对福利卡就是的合法时代峰值</h4>
<ul>
<li>
<img src="img/server/01.jpg" />
</li>
<li>
<img src="img/server/02.jpg" />
</li>
<li>
<img src="img/server/03.jpg" />
</li>
<li>
<img src="img/server/04.jpg" />
</li>
<li>
<img src="img/server/05.jpg" />
</li>
<li>
<img src="img/server/06.jpg" />
</li>
</ul>
</div>
<div class="plat" id="plat">
<h1>我们的平台</h1>
<h2></h2>
<img src="img/plat.jpg" />
</div>
<div class="solution" id="solution">
<h1>解决方案</h1>
<h2></h2>
<h3></h3>
<ul>
<li>
<img src="img/11.jpg" />
</li>
<li>
<img src="img/12.jpg" />
</li>
<li>
<img src="img/13.jpg" />
</li>
<li>
<img src="img/14.jpg" />
</li>
<li>
<img src="img/15.jpg" />
</li>
<li>
<img src="img/16.jpg" />
</li>
<li>
<img src="img/17.jpg" />
</li>
<li>
<img src="img/18.jpg" />
</li>
</ul>
</div>
<div class="kh" id="kh">
<h1>我们的客户</h1>
<h2></h2>
<img src="img/bg03.jpg" />
</div>
<div class="contact" id="contact">
<h1>用户价值导向 共赢互联时代</h1>
<h2>欢迎拨打热线电话: 400-000-0000</h2>
<ul>
<li>
<img src="img/qq.png" />
</li>
<li>
<img src="img/sina.png" />
</li>
<li>
<img src="img/tel.png" />
</li>
</ul>
</div>
</div>
</body>
</html>
@charset "utf-8";
*{
padding: 0px;
margin: 0px;
font-family:"STXihei";
}
.dbody{
width: 640px;
height: 3400px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
a{
color: black;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.nav{
width: 640px;
height: 60px;
background-color: #fff;
position: fixed;
background-color: rgba(256,256,256,0.5);
}
.nav img{
float: left;
margin-top: 24px;
margin-left: 40px;
}
.nav ul{
width: 500px;
height: 60px;
float: right;
list-style: none;
}
.nav ul li{
width: 80px;
height: 60px;
line-height: 60px;
text-align: center;
float: left;
}
.banner{
width: 640px;
height: 423px;
}
.ser{
width: 640px;
height: 750px;
background-color: #fff;
padding-top:60px
}
.ser h1{
width: 640px;
height: 60px;
text-align: center;
font-weight: normal;
line-height: 70px;
}
.ser h2{
width: 110px;
height: 3px;
background-color: deepskyblue;
margin-left: auto;
margin-right: auto;
}
.ser h3{
width: 600px;
height: 2px;
background-color: gainsboro;
margin-left: auto;
margin-right: auto;
}
.ser h4{
width: 360px;
height: 70px;
text-align: center;
line-height: 20px;
font-weight: normal;
font-size: 14px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.ser ul{
width: 640px;
height: 564px;
list-style: none;
margin-top: 20px;
transition: transform;
}
.ser ul li{
width: 320px;
height: 188px;
text-align: center;
float: left;
}
.ser ul li:hover{
transform: scale(1.1);
}
.plat{
width: 640px;
height: 480px;
padding-top: 40px;
}
.plat h1{
width: 640px;
height: 60px;
text-align: center;
font-weight: normal;
line-height: 70px;
}
.plat h2{
width: 110px;
height: 3px;
background-color: deepskyblue;
margin-left: auto;
margin-right: auto;
}
.solution{
width: 640px;
height: 757px;
background-image: url(../img/bg2.jpg);
padding-top: 50px;
}
.solution h1{
width: 640px;
height: 60px;
text-align: center;
font-weight: normal;
line-height: 70px;
color: #fff;
}
.solution h2{
width: 110px;
height: 3px;
background-color: deepskyblue;
margin-left: auto;
margin-right: auto;
}
.solution h3{
width: 600px;
height: 2px;
background-color: gainsboro;
margin-left: auto;
margin-right: auto;
}
.solution ul{
width: 640px;
height: 640px;
list-style: none;
margin-top: 10px;
}
.solution ul li{
width: 300px;
height: 150px;
text-align: center;
float: left;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
transition: transform 500ms;
}
.solution ul li:hover{
transform: rotateY(180deg);
}
.kh{
width: 640px;
height: 550px;
background-color: #fff;
padding-top: 40px;
}
.kh h1{
width: 640px;
height: 60px;
text-align: center;
font-weight: normal;
line-height: 70px;
}
.kh h2{
width: 110px;
height: 3px;
background-color: deepskyblue;
margin-left: auto;
margin-right: auto;
}
.contact{
width: 640px;
height: 300px;
}
.contact h1{
width: 640px;
height: 60px;
text-align: center;
line-height: 60px;
}
.contact h2{
width: 640px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 40px;
}
.contact ul{
width: 360px;
height: 300px;
list-style: none;
margin-left: auto;
margin-right: auto;
}
.contact ul li{
width: 100px;
height: 100px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
移动端界面的链接
运行结果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021030616383125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzQ4NDUyMw==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210306163950841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzQ4NDUyMw==,size_16,color_FFFFFF,t_70#pic_center)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)