zoukankan      html  css  js  c++  java
  • webapp设置适应pc和手机的页面宽高以及布局层叠图片文字

    <!DOCTYPE html>
    <html lang="zh-cn">
    	<head>
    		<title>我趣旅行网-美剧迷</title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    		<meta name="format-detection" content="telephone=no">
    		<link rel="stylesheet" type="text/css" href="test.css">
    	</head>
    	<body>
    		<div class="wrapper">
    			<img class="bg" src="img/background.png"/>
    			<img class="logo" src="img/pisode_logo.png">
    			<p class="pisode">Pisode</p>
    		</div>
    	</body>	
    </html>	

    css:

    html,body{
    	height:100%;
    	margin:0;
    	padding:0;
    }
    .wrapper{
    	position:relative;
    	margin: 0 auto;
    	max- 500px;
    	min-height: 100%;
    	text-align: center;
    	 100%;
    }
    .bg{
    	position: absolute;
    	top: 0;
    	left: 0;
    	 100%;
    	z-index: -1;
    	height: 100%;
    }
    .logo{
    	100%;
    }
    .pisode{
    	font-size:14px;
    }

    效果图:



    访问链接:http://2.chuang8.sinaapp.com


  • 相关阅读:
    AOP
    关于zookeeper部署的个数
    Zookeeper 简介
    Java 正则表达式
    面试记录
    面试题
    Spring Framework官方文档翻译(中英文版)
    java知识巩固
    mysql sql记录
    redis入门
  • 原文地址:https://www.cnblogs.com/saysmy/p/5594858.html
Copyright © 2011-2022 走看看