一个关于表格的简单网页的编写

最新推荐文章于 2023-04-30 17:03:57 发布

weixin_34348111

最新推荐文章于 2023-04-30 17:03:57 发布

阅读量208

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1451475/blog/203888

版权

2019独角兽企业重金招聘Python工程师标准>>>

html部分

<!DOCTYPE html>
<html>
    <head>
        <title>Web Form</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="header"><h1>Contact Us!</h1></div>
        <div id="wrapper">
            <div id="inputs">
                <form name="input" action="#" method="post">
                 First name: <input type="text" name="firstname" value="first name"><br/>
                 Last name: <input type="text" name="lastname" value="last name"><br/>
                 E-mail: <input type="email" name="email" value="e-mail address"><br/><br/>
                </form>
            </div>
            <div>
                <form id="options">
                    Message: <br/><textarea name="msg"></textarea><br/>
                    <p>Sex:</p>
                    <input type="radio" name="sex" value="male">Male
                    <input type="radio" name="sex" value="female">Female<br/><br/>
                    <input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
                    <input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/> 
                    <input type="submit" value="Submit">
                </form>
            </div>
        </div>
    </body>
</html>

css部分

#header {
    position: relative;
    top: -10px;
    background-color: #00A0B0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
height: 40px;
}
 
h1 {
    font-family: Lobster;
    color: #FFFFFF;
    text-align: center;
}
 
form {
    font-family: Verdana, Arial, sans-serif;
}
 
p {
    font-family: Verdana, Arial, sans-serif;
    display: inline-block;
}
 
input {
    font-family: Verdana, Arial, sans-serif;
    color: #777;
}
 
textarea {
vertical-align: top;
width: 400px;
color: #777;
}
 
#wrapper {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    position: relative;
    top: -10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    box-shadow: 3px 3px 3px #444;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.8em;
}
 
#inputs {
width: 200px;
clear: both;
}
 
#inputs input {
width: 100%;
clear: both;
}

转载于:https://my.oschina.net/u/1451475/blog/203888