登陆页面CSS

来源：互联网发布：sdh网络单元主要有编辑：程序博客网时间：2024/06/05 00:52

<span style="font-size:18px;">登陆页面CSS练习：</span><!--<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>--><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>.c_login{width:450px;height:40px;border:3px solid #6dc186;margin:200px auto;position:relative;}.l_username{width: 363px;height: 38px;padding-left:10px;border: none;outline:none;font-size:14px;font-family:"微软雅黑";background:linear-gradient(#eee,#BBB)}.l_submit{width:80px;height:46px;float:right;border:none;background:#6dc186;color:#FFF;font-size:18px;position:absolute;position: absolute;right: -3px;top: -3px;}.l_submit:hover{background:rgb(35, 77, 18)}</style></head><body><div class="c_login"><form action="login" method="post"><input type="text" name="username" class="l_username" placeholder="请输入用户名"/><input type="submit" value="Login" class="l_submit"/></form></div></body></html>

最终样式：

知识点：

去掉input的文本框边框和默认样式：border: none;outline:none;

渐变色：background:linear-gradient(#eee,#BBB)

input文本框输入提示：<input type="text" placeholder="请输入用户名"/>

0 0