Maximus2333 2021-03-06 01:49 采纳率: 100%
浏览 170
已采纳

请问有人帮忙做一下自适应吗(html)

需要适应手机,平板和笔记本。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<link rel="stylesheet" href="style.css">

<SCRIPT language=LiveScript>
var computed = false
var destination = "/"
var decimal = 0
function convert (entryform, from, to)
{
 convertfrom = from.selectedIndex
 convertto = to.selectedIndex
 entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value *100)/100
}
function addChar (input, character)
{
 if((character=='.' && decimal=="0") || character!='.')
 {
 (input.value == "" || input.value == "0") ? input.value = character : input.value += character
 convert(input.form,input.form.measure1,input.form.measure2)
 
 computed = true 
 if (character=='.')
 {
 decimal=1
} 
}
}
function openVothcom()
{
 window.open("","Display window","toolbar=no,directories=no,menubar=no");
}
function clear (form)
{
 form.input.value = 0
 form.display.value = 0
 decimal=0
}
function changeBackground(hexNumber)
{
 document.bgColor=hexNumber
}
entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value )
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

</SCRIPT>
</head>
<body>
<select class="dropdown" name="list" onchange="window.location=this.value; ">
    <option value="mass.html">&#x2660 mass &#x2660</option>
    <option value="area.html">&#x2665 area &#x2665</option>
    <option selected value="volume.html">&#x2666 volume &#x2666</option>
    <option value="lenth.html">&#x2663 lenth &#x2663</option>
    </select>
<div class=frame><div class="title">UNIT TRANSFER</div></div>

</div>
<FORM method=post name=calculator>
<TABLE>
<TBODY>
       
<TR class="inputa"> 
	<TH><b></b></TH>
<TD>
<input class="country" type="text" id="select1" value="CHN" readonly="readonly">
<INPUT name=input onchange="convert(this.form,form.measure1, form.measure2)"  placeholder="input" height="48" style="position: relative; left: 0px; font-size: 20px;">
</TD>
<TD> 
<SELECT name=measure1 
 onchange="convert(this.form,this, form.measure2)" style="position: absolute; left: 600px; font-size: 20px; border: 0px; appearance: none;">

 <OPTION selected value=0.001>&#x265a ml &#x265a

    <OPTION value=1>&#x265b l &#x265b
    
    <OPTION hidden value=0.473>&#x265a pint &#x265a
    
    <OPTION  hidden value=3.785>&#x265b gallon &#x265b
    
    <OPTION hidden value=0.0295>&#x265c ounce &#x265c
    
</OPTION>
</SELECT>
</TD>
</TR>




<TR class="inputb"> 
	<TH ><b></b></TH>
<TD> 
<input class="country" type="text" id="select2" value="UK" readonly="readonly">
<INPUT name=display placeholder="output" height="48" style="position: relative; left: 0px; font-size: 20px;" >
</TD>
<TD> 
<SELECT name=measure2 
 onchange="convert(this.form,form.measure1, this)" style="position: absolute; left: 600px; font-size: 20px;  border: 0px; appearance: none;">
 
 <OPTION hidden value=0.001>&#x265a ml &#x265a

    <OPTION hidden value=1>&#x265b l &#x265b
    
    <OPTION selected value=0.473>&#x265a pint &#x265a
    
    <OPTION value=3.785>&#x265b gallon &#x265b
    
    <OPTION value=0.0295>&#x265c ounce &#x265c

</OPTION>    
</SELECT>
</TD>
</TR>
<TR>
    <TD>
    <input type="button" onclick="swap(this.form);" value="&#x2191 &#x2193" class="swapbutton" />
    
    <script type="text/javascript">
    function swap(form) {
            for (var i = 0; i < form.measure1.options.length; i++) {
            var t = form.measure1.options[i].hidden;
            form.measure1.options[i].hidden = form.measure2.options[i].hidden;
            form.measure2.options[i].hidden = t;
        }
        var t = form.measure1.value;
        form.measure1.value = form.measure2.value;
        form.measure2.value = t;
        convert(form,form.measure1, form.measure2)

        var aa=document.getElementById('select1').value
        var bb=document.getElementById('select2').value
        document.getElementById('select1').value=bb
        document.getElementById('select2').value=aa
    }
    </script>
    </TD>
</TR>
</TBODY> 
</TABLE>



<TABLE margin=9 cellPadding=9  cellspacing="9" class="numberpad" >
<TBODY> 
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'7')" type=button value=7 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'8')" type=button value=8 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'9')" type=button value=9 class="abutton">
</TD>
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'4')" type=button value=4 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'5')" type=button value=5 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'6')" type=button value=6 class="abutton">
</TD>
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'1')" type=button value=1 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'2')" type=button value=2 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'3')" type=button value=3 class="abutton">
</TD>
<TR> 
<TD class="button"> 
    <INPUT onclick="addChar(this.form.input,'0')" type=button value=0 class="abutton">
    </TD>
<TD class="button"> 
    <INPUT onclick="addChar(this.form.input,'.')" type=button value=. class="abutton">
    </TD>

<TD class="button"> 
<INPUT type="reset" type=button value=c class="abutton1">
</TD>
</TR>
</TBODY> 
</TABLE>
</FORM>
</body>
</html>

css 如下


    body{
        font-family: cursive;
        font-weight: 300;
    }
    .numberpad{
    text-align: center;
    font-size: 30px;
    background-color:black;
    border: 1px;
    position:absolute;
	top: 60%;
    left: 32%;
    width: 600px; 
    display: inline-flex;  
    
    }
    .inputa{
    position:absolute;
    right: 335px;
    top: 6%;
    font-size: 50px;
    color: white;
    size: 90px;
    border-style:solid;
    border-bottom-width: 0px;
    border-radius: 30px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-color: black;
    padding-left: 93px;
    padding-right: 123px;
    padding-bottom: 200px;
    background-color: white;
    width: 500px;

    }
    .inputb{
    position:absolute;
    right: 335px;
    top: 16%;  
    font-size: 50px;
    color: white;
    size: 50px;
    border-style:solid;
    border-top-width: 0px;
    border-radius: 30px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: black;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 270px;
    background-color: white;
    width: 516px;
    }
    .frame{
    height: 1153px;
    width: 765px;
    border: solid;
    position: absolute;
    left: 25%;
    
    background-color: black;

    
    }
    .button {
    text-align: center;
    padding: 30px 40px;
    text-decoration: none;
    display: inline-flexbox;
    height: 20px;
    width: 20px;
    margin: 20px;
    

    }
    .ukflag{
    height:100px;
    }
    
    .abutton{
    width: 100px; 
    height: 100px;
    display: inline; 
    font-size: 40px;
    border-color: black;
    font-size: 40px;
    color: white;
    background-color: #000000;
    font-family: cursive;
    font-weight: 300;
    }
    .abutton1{
    width: 100px; 
    height: 100px;   
    display: inline; 
    background-color: #000000;
    color: yellow;
    font-size: 40px;
    border-color: black;
    font-weight: 300;

    }
    .abutton2{
    width: 100px; 
    height: 100px;
    display: inline; 
    background-color: #000000;
    color: white;
    font-size: 25px;
    border-color: black;
    font-weight: 200;
    }
    .title{
    color: white;

    position: absolute;
    left: 40%;
    top: 2px;
    font-size: 20px;
    padding: 5px 10px;

    }
    .country{
    color: black;
    font-size: 20px;
    font-weight: bold;
    }
    input{
        border:none;outline:medium;
    }

    .dropdown{
        font-size: 15px;
        border: 0px;
        position: absolute;
        top: 50%;
        left: 60%;
        z-index:999;
        appearance: none;
     
    }
    .swapbutton{
        position: absolute; 
        left: 40%; 
        top: 50%;
        font-size: 15px; 
        width: 70px; 
        color: black; 
        background-color: white;
        font-weight: bold;
    }
    #select1{
        font-weight: 200;
    }
    #select2{
        font-weight: 200;
    }

希望达到的效果

谢谢

  • 写回答

3条回答 默认 最新

  • 天际的海浪 2021-03-06 04:23
    关注
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=gb2312">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">
    
    body {
    	font-family: cursive;
    	font-weight: 300;
    	margin: 0;
    }
    
    .frame {
    	height: 100vh;
    	width: 100vw;
    	border: solid;
    	margin: 0 auto;
    	background-color: black;
    }
    
    .title {
    	color: white;
    	font-size: 20px;
    	padding: 5px 10px;
    	text-align: center;
    }
    
    .inputbox {
    	color: white;
    	border-style:solid;
    	border-radius: 30px;
    	border-color: black;
    	background-color: white;
    	width: 90%;
    	height: 30vh;
    	margin: 0 auto;
    }
    
    .inputtab {
    	width: 90%;
    	margin: 0 auto;
    	height: 20vh;
    }
    
    .inputtab td:nth-of-type(1) {
    	text-align: left;
    }
    .inputtab td:nth-of-type(2) {
    	text-align: center;
    }
    .inputtab td:nth-of-type(3) {
    	text-align: right;
    }
    
    .country {
    	color: black;
    	font-size: 20px;
    	font-weight: bold;
    	width: 100%;
    }
    
    .inputvalue {
    	color: black;
    	font-size: 20px;
    	font-weight: bold;
    	width: 100%;
    	min-width: 50px;
    }
    
    .selectvalue {
    	color: black;
    	font-size: 20px;
    	font-weight: bold;
    	width: 100%;
    	min-width: 130px;
    	border: 0px;
    	appearance: none;
    }
    
    input {
    	border:none;
    	outline:medium;
    }
    
    .inputtab2{
    	width: 90%;
    	height: 10vh;
    	margin: 0px auto;
    }
    
    .inputtab2 td {
    	text-align: center;
    }
    
    .swapbutton {
    	font-size: 15px;
    	width: 70px;
    	color: black;
    	background-color: white;
    	font-weight: bold;
    }
    
    .dropdown {
    	font-size: 15px;
    	border: 0px;
    	appearance: none;
    }
    
    .numberpad {
    	width: 90%;
    	height: 60vh;
    	margin: 0 auto;
    	text-align: center;
    	font-size: 30px;
    	background-color:black;
    	border: 1px;
    }
    
    .button {
    	text-align: center;
    	text-decoration: none;
    }
    .ukflag {
    	height:100px;
    }
    .abutton {
    	width: 100%;
    	height: 100%;
    	font-size: 40px;
    	border-color: black;
    	color: white;
    	background-color: #000000;
    	font-family: cursive;
    	font-weight: 300;
    }
    .abutton1 {
    	width: 100%;
    	height: 100%;
    	background-color: #000000;
    	color: yellow;
    	font-size: 40px;
    	border-color: black;
    	font-weight: 300;
    }
    .abutton2 {
    	width: 100%;
    	height: 100%;
    	background-color: #000000;
    	color: white;
    	font-size: 25px;
    	border-color: black;
    	font-weight: 200;
    }
    
    </style>
    <script type="text/javascript">
    var computed = false
    var destination = "/"
    var decimal = 0
    
    function convert(entryform, from, to) {
    	convertfrom = from.selectedIndex
    	convertto = to.selectedIndex
    	entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value * 100) / 100
    }
    
    function addChar(input, character) {
    	if ((character == '.' && decimal == "0") || character != '.') {
    		(input.value == "" || input.value == "0") ? input.value = character: input.value += character
    		convert(input.form, input.form.measure1, input.form.measure2)
    
    		computed = true
    		if (character == '.') {
    			decimal = 1
    		}
    	}
    }
    
    function openVothcom() {
    	window.open("", "Display window", "toolbar=no,directories=no,menubar=no");
    }
    
    function clear(form) {
    	form.input.value = 0
    	form.display.value = 0
    	decimal = 0
    }
    
    function changeBackground(hexNumber) {
    	document.bgColor = hexNumber
    }
    
    //这行有错误,也没没什么用
    //entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value)
    
    function myFunction() {
    	document.getElementById("myDropdown").classList.toggle("show");
    }
    
    function swap(form) {
    	for (var i = 0; i < form.measure1.options.length; i++) {
    		var t = form.measure1.options[i].hidden;
    		form.measure1.options[i].hidden = form.measure2.options[i].hidden;
    		form.measure2.options[i].hidden = t;
    	}
    	var t = form.measure1.value;
    	form.measure1.value = form.measure2.value;
    	form.measure2.value = t;
    	convert(form, form.measure1, form.measure2)
    
    	var aa = document.getElementById('select1').value
    	var bb = document.getElementById('select2').value
    	document.getElementById('select1').value = bb
    	document.getElementById('select2').value = aa
    }
    
    </script>
    	</head>
    	<body>
    		<div class="frame">
    			<div class="title">UNIT TRANSFER</div>
    			<FORM method=post name=calculator>
    				<div class="inputbox">
    					<table class="inputtab">
    						<tr>
    							<td>
    								<input class="country" type="text" id="select1" value="CHN" readonly="readonly">
    							</td>
    							<td>
    								<INPUT class="inputvalue" name=input onchange="convert(this.form,form.measure1, form.measure2)" placeholder="input">
    							</td>
    							<td>
    								<SELECT class="selectvalue" name=measure1 onchange="convert(this.form,this, form.measure2)">
    									<OPTION selected value=0.001>&#x265a ml &#x265a</OPTION>
    									<OPTION value=1>&#x265b l &#x265b</OPTION>
    									<OPTION hidden value=0.473>&#x265a pint &#x265a</OPTION>
    									<OPTION hidden value=3.785>&#x265b gallon &#x265b</OPTION>
    									<OPTION hidden value=0.0295>&#x265c ounce &#x265c</OPTION>
    								</SELECT>
    							</td>
    						</tr>
    						<tr>
    							<td>
    								<input class="country" type="text" id="select2" value="UK" readonly="readonly">
    							</td>
    							<td>
    								<INPUT class="inputvalue" name=display placeholder="output">
    							</td>
    							<td>
    								<SELECT class="selectvalue" name=measure2 onchange="convert(this.form,form.measure1, this)">
    									<OPTION hidden value=0.001>&#x265a ml &#x265a</OPTION>
    									<OPTION hidden value=1>&#x265b l &#x265b</OPTION>
    									<OPTION selected value=0.473>&#x265a pint &#x265a</OPTION>
    									<OPTION value=3.785>&#x265b gallon &#x265b</OPTION>
    									<OPTION value=0.0295>&#x265c ounce &#x265c</OPTION>
    								</SELECT>
    							</td>
    						</tr>
    					</table>
    					<table class="inputtab2">
    						<tr>
    							<td>
    								<input type="button" onclick="swap(this.form);" value="&#x2191 &#x2193" class="swapbutton" />
    							</td>
    							<td>
    								<select class="dropdown" name="list" onchange="window.location=this.value; ">
    									<option value="mass.html">&#x2660 mass &#x2660</option>
    									<option value="area.html">&#x2665 area &#x2665</option>
    									<option selected value="volume.html">&#x2666 volume &#x2666</option>
    									<option value="lenth.html">&#x2663 lenth &#x2663</option>
    								</select>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<TABLE margin=9 cellPadding=9 cellspacing="9" class="numberpad">
    				<TBODY>
    					<TR>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'7')" type=button value=7 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'8')" type=button value=8 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'9')" type=button value=9 class="abutton">
    						</TD>
    					</TR>
    					<TR>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'4')" type=button value=4 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'5')" type=button value=5 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'6')" type=button value=6 class="abutton">
    						</TD>
    					</TR>
    					<TR>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'1')" type=button value=1 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'2')" type=button value=2 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'3')" type=button value=3 class="abutton">
    						</TD>
    					</TR>
    					<TR>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'0')" type=button value=0 class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT onclick="addChar(this.form.input,'.')" type=button value=. class="abutton">
    						</TD>
    						<TD class="button">
    							<INPUT type="reset" type=button value=c class="abutton1">
    						</TD>
    					</TR>
    				</TBODY>
    				</TABLE>
    			</FORM>
    		</div>
    	</body>
    </html>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出
  • ¥15 vue中我代理了iframe,iframe却走的是路由,没有显示该显示的网站,这个该如何处理
  • ¥15 操作系统相关算法中while();的含义
  • ¥15 CNVcaller安装后无法找到文件
  • ¥15 visual studio2022中文乱码无法解决
  • ¥15 关于华为5g模块mh5000-31接线问题