zoukankan      html  css  js  c++  java
  • input输入框外联式样式控制不了字体

    1、问题背景

         在做项目过程中,发现input输入框利用外联样式,控制不了输入框的样式


    2、问题原因

    (1)HTML代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="../css/common.css" />
    	</head>
    	<body>
    		<input type="text" />
    	</body>
    </html>
    
    (2)CSS代码

    input{
    	font-family: "微软雅黑";
    	font-size: 20px;
    	color: #FF0000;
    	text-align: center;
    	 400px;
    	height: 300px;
    	vertical-align: middle;
    }
    

    3、解决办法

    (1) 利用样式内嵌式,将样式代码写在元素内

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" style="font-family: '微软雅黑';font-size: 20px;color: #FF0000; 400px; height: 300px;text-align: center;vertical-align: middle;" value="100"/>
    	</body>
    </html>
    (2)style标签嵌入式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			input{
    				font-family: "微软雅黑";
    				font-size: 20px;
    				color: #FF0000;
    				 400px;
    				height: 300px;
    				text-align: center;
    				vertical-align: middle;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="text" value="100"/>
    	</body>
    </html>



  • 相关阅读:
    如何安装树莓派虚拟机
    树莓派3用create_ap变身无线AP
    Centos 安装golang beego
    Lua中调用C函数
    C++ 用libcurl库进行http通讯网络编程(转)
    SkipList 跳表
    ntohs, ntohl, htons,htonl的比较和详解【转】
    SQLITE3 使用总结(转)
    mysql基础认识1
    mysql 数据类型
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313841.html
Copyright © 2011-2022 走看看