cakephp与表单css_Css_Forms_Cakephp

cakephp与表单css

css forms cakephp

cakephp与表单css,css,forms,cakephp,Css,Forms,Cakephp,大家好，我正在尝试为一个我已经创建并正在使用css文件的网站创建一个移动站点我试图使输入框的屏幕高度的10%。我该怎么做如何使登录按钮更高下面是视图文件中的代码 <?php echo $this->Html->docType('xhtml-trans'); ?> <html> <head> <style> body { background-color:#ADD8E6; height: 960px; width: 640px

大家好，我正在尝试为一个我已经创建并正在使用css文件的网站创建一个移动站点

我试图使输入框的屏幕高度的10%。我该怎么做

如何使登录按钮更高

下面是视图文件中的代码

<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>


<head>
<style>
body {
background-color:#ADD8E6;
height: 960px;
width:  640px;
}

table, td, th
{   
    background-color: #ADD8E6;
}
input
{
    height:233%;
    width:70%;  
}
</style>
    <title> <?php echo $title_for_layout; ?></title>
    <?php echo $this->Html->css($stylesheet_used); ?>
</head>
<body>
<div id = "headertwo" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<center>    
<?php echo $this->Html->image($image_used, array(
    "alt" => "eBox",
    'url' => array('controller' => 'Users', 'action' => 'login'))) ?>
</center>
    </div>  
 <?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>
<table border=0 style="width:640px;">
    <tr>
    <td >Username:
    <?php echo $this->Form->input('username',array('label'=>false,));?></td>
    </tr>       
    <tr>    
        <td>Password: <?php echo $this->Form->input('password',array('label'=>false,));?></td>
    </tr>

    </table>
<?php echo $this->Form->end('Login', array('width'=>100));?>
    </div>
    </body>
    </html>


身体{
背景色：#添加8e6；
高度：960像素；
宽度：640px；
}
表，td，th
{   
背景色：#添加8e6；
}
输入
{
身高：233%；
宽度：70%；
}
一,
没有考虑在输入中包含字体大小，因为我不认为它是文本，duhhh
1
没有考虑在输入中包含字体大小，因为我不认为它是文本，duhhh
user1393064
您现在使用的是XHTML Doctype，这对于在目标移动设备上实现良好的效果来说是不好的做法
相反，我建议您尝试HTML5 Doctype，如下所示

此外，对于移动支持，您需要添加视口元

然后为输入定义CSS
输入{/*将代码放在这里*/}
输入#提交{/*将你的风格放在这里*/}
我还建议您对目标移动设备和屏幕使用CSS媒体查询
@媒体屏幕和屏幕（最大宽度：640像素）{
正文{/*将您的风格放在这里*/}
表格{/*将您的风格放在这里*/}
输入{/*将您的样式放在这里*/}
输入#提交{/*将你的风格放在这里*/}
}
如需进一步帮助，请参阅本文
user1393064
您现在使用的是XHTML Doctype，这对于在目标移动设备上实现良好的效果来说是不好的做法
相反，我建议您尝试HTML5 Doctype，如下所示

此外，对于移动支持，您需要添加视口元

然后为输入定义CSS
输入{/*将代码放在这里*/}
输入#提交{/*将你的风格放在这里*/}
我还建议您对目标移动设备和屏幕使用CSS媒体查询
@媒体屏幕和屏幕（最大宽度：640像素）{
正文{/*将您的风格放在这里*/}
表格{/*将您的风格放在这里*/}
输入{/*将您的样式放在这里*/}
输入#提交{/*将你的风格放在这里*/}
}
如需进一步帮助，请参阅本文@user1393064，能否具体说明您的目标设备和屏幕？您也没有提到为什么视口实现会影响您的UI。必须在实现Viewport后进行一些CSS调整。别忘了特定的媒体查询仅适用于特定的设备，所以您必须分别为通用屏幕和所有可能的目标屏幕添加媒体查询。@user1393064，您可以指定要针对的设备和屏幕吗？您也没有提到为什么视口实现会影响您的UI。必须在实现Viewport后进行一些CSS调整。别忘了特定的媒体查询只适用于特定的设备，所以您必须分别为通用屏幕和所有可能的目标屏幕添加媒体查询。
input
{
    font-size:200%;
    width:70%;  
}