css美化 文件域

45 篇文章 0 订阅
3 篇文章 0 订阅

参考:http://www.jb51.net/web/39559.html

主要代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
  <form action="" method="post" enctype="multipart/form-data">
 <input type='text' name='textfield' id='textfield' class='txt' />  
 <input type='button' class='btn' value='浏览...' />
    <input type="file" name="fileField" class="file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" />
 <input type="submit" name="submit" class="btn" value="上传" />
  </form>
</div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sure! 首先,我们需要创建一个HTML文件来构建登录页面的基本结构,如下所示: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Login</h1> <form action="" method="post"> <label for="username">Username:</label> <input type="text" name="username" id="username"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <input type="submit" value="Login"> <a href="#">Forgot Password</a> </form> </div> </body> </html> ``` 在这里,我们创建了一个包含登录表单的 `<div>` 标签。现在,我们将使用 CSS美化这个表单。我们首先定义全局样式,包括页面背景,字体和一些通用的样式: ``` body { background-color: #f6f6f6; font-family: 'Open Sans', sans-serif; } h1 { text-align: center; color: #444444; } .container { background-color: #ffffff; padding: 20px; margin: auto; width: 400px; border-radius: 5px; box-shadow: 0px 0px 10px 0px #666666; } ``` 这样,我们创建了一个白色背景的容器,并为其添加了一些阴影。接下来,我们为输入和按钮添加样式: ``` form { margin-top: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #cccccc; border-radius: 3px; margin-bottom: 10px; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; cursor: pointer; border-radius: 3px; width: 100%; } input[type="submit"]:hover { background-color: #3e8e41; } ``` 在这里,我们为标签和输入定义了一些通用样式。此外,我们为登录按钮应用了一些特殊样式,如绿色背景和阴影。 最后,我们可能还需要添加一些其他的修饰,比如在忘记密码下添加下划线。这是 CSS 代码的最后一部分: ``` a { color: #666666; text-decoration: none; } a:hover { text-decoration: underline; } ``` 完成了!这就是一个漂亮的登录页面所需要的所有样式。您可以在同一目录下创建名为 style.css文件,并将所有上述 CSS 代码都复制到其中。最终效果看起来就像这样: ![login-page](https://pic3.zhimg.com/v2-3a7e3d3a8f25903e36b14f09822a1f2a_b.jpg)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值