homework8 移动端界面

homework8 移动端界面

注: 点击图标放大,点击图片旋转180度
  • ydd.html

<!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>  <!--nav菜单栏-->
			<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">    <!--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>欢迎拨打热线电话:&nbsp;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>
  • ydd.css

@charset "utf-8";
*{
	padding: 0px;
	margin: 0px;
	font-family:"STXihei";
}
.dbody{
	width: 640px;
	height: 3400px;
	margin-left: auto; /*把dbody放到中间*/
	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); /*rgba():背景色的透明程度 三个颜色值 a:透明度 导航半透明,只能针对背景颜色*/
}
.nav img{
	float: left;
	margin-top: 24px;
	margin-left: 40px;
}
.nav ul{
	width: 500px;
	height: 60px;
	float: right;
	list-style: none;    /*去掉ul小圆点*/
}
.nav ul li{
	width: 80px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	float: left;  /*li的浮动 竖的li排成了横的*/
}
.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;  /*字体标签颜色直接color*/
}
.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;
}

移动端界面的链接

运行结果:

在这里插入图片描述
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页