本文共 2641 字,大约阅读时间需要 8 分钟。
引用自己创建的css样式表
First we create the HTML elements - input fields for First Name, Last Name, Email and a Text Area for the message.
首先,我们创建HTML元素-名字,姓氏,电子邮件和消息的文本区域的输入字段。
Later we apply CSS styles to make the form visually appealing.
后来,我们应用CSS样式使表格具有视觉吸引力。
The HTML section has a div with class container
with the heading h3
”Contact Form”
HTML部分的div带有类container
,标题为h3
“ Contact Form ”
The form with name contact_form contains input fields for:
名称为contact_form的表单包含以下输入字段:
A div with class center
to align the items center. An input
type submit
to submit the form.The required
attribute in the text fields are checked for value on submission.
具有班次center
的div以使项目中心对齐。 一个input
型submit
提交form.The required
在文本字段属性是为在提交值检查。
Contact Form
/* Importing the Roboto font from Google Fonts. */@import url("https://fonts.googleapis.com/css?family=Roboto:400");/* Set font of all elements to 'Roboto' */* { font-family: 'Roboto', sans-serif; font-weight: 400;}/* Remove outline of all elements on focus */*:focus { outline: 0;}body { background: #263238; /* Set background color to #263238*/}h3 { text-align: center;}/* Add styles to 'container' class */.container { padding: 12px 24px 24px 24px; margin: 48px 12px; background: #E3F2FD; border-radius: 4px;}/* Add styles to 'label' selector */label { font-size: 0.85em; margin-left: 12px;}/* Add styles to 'input' and 'textarea' selectors */input[type=text],input[type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical;}/* Add styles to show 'focus' of selector */input[type=text]:focus,input[type=email]:focus, textarea:focus { border: 1px solid green;}/* Add styles to the submit button */input[type=submit] { background: #64B5F6; margin: 0 auto; outline: 0; color: white; border: 0; padding: 12px 24px; border-radius: 4px; transition: all ease-in-out 0.1s; position: relative; display: inline-block; text-align: center;}/* Add styles for 'focus' property */input[type=submit]:focus { background: #A5D6A7; color: whitesmoke;}/* Style 'hover' property */input[type=submit]:hover { background: #2196F3;}/* Align items to center of the 'div' with the class 'center' */.center { text-align: center;}
Visit the on
访问上
翻译自:
引用自己创建的css样式表
转载地址:http://mlrwd.baihongyu.com/