css及表单应用

最新推荐文章于 2024-05-19 22:16:25 发布

兮兮子玉

最新推荐文章于 2024-05-19 22:16:25 发布

阅读量1.3k

点赞数

分类专栏： web前端课程实验文章标签： html css的基本使用方法 a标签、table标签、input标签、textarea标签 form标签使用实例 css外部使用方法

本文链接：https://blog.csdn.net/qq_41330485/article/details/80888103

版权

web前端课程实验专栏收录该内容

6 篇文章 2 订阅

订阅专栏

实验二、css及表单应用

1、实验内容：

应用CSS

要求：创建一个CSS文件，能够对html页面的p、body、table、链接状态等常用标记进行颜色、字体、字体大小等进行精确控制

将该css文件应用到实验1创建的index.html文件。

创建表单

创建名为feedback.html的文件，在里面设置表单。

在表单里面添加合适的控件，能够让浏览者完成留言板前端功能：可以输入用户名，联系电话，联系邮箱，标题，具体留言等内容；

包含提交按钮和重置按钮。

按照上述要求，采用内嵌CSS的方式对feedback.html进行精确控制。

2.实验步骤：

(1)创建indexcss.css文件

(2)根据index.html的基本结构，在indexcss.css文件给各标签设置个各种样式

(1)创建名为feedback.html的文件

(2)在html文件中写出表单的基本结构。

3.实现代码：

特别注意这里css文件和html文件是放在同一个文件夹下的，如果不是放在同一个文件夹下url要改为相对地址。

/*indexcss.css*/
h1{
    text-align: center;
}
body{

    border: 1px solid red;
    width: 500px;
}
td{
    background-color: cyan;
    font-size: 25px;
    font-family: 楷体;
}
.tba{
   background-color: yellow;
}

table{
    margin: 8px auto;
}
a:hover{
    color:red;
    font-size: 50px;
   font-family: 楷体;
}

<!--index1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="兮兮子玉" content="HTML5">
<title>兮兮子玉的首页</title>
    <link  href="indexcss.css" rel="stylesheet" >
</head>
<body>
<div name="1">
<h1>兮兮子玉的首页</h1>
<hr>
<table>
<tr>
    <td>姓名:兮兮子玉</td>
    <tr>
    <td>年级专业班级:15信息与计算科学</td>
    <tr>
    <td>学号:201512010102</td>
    <tr>
    <td class="tba"><a href="index2.html">这是我的个人简介</a></td>
    </tr></table>
</div></body></html>

<!--feedback.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的创建</title>
    <style>
        .form1{
            border: 1px solid;
            text-align: left;
            width: 500px;
            top: 5px;
        }
        textarea{
            width: 20em;
            height: 10em;
            display: block;
            margin: 10px;
        }

    </style>
</head>
<body>
<h1>表单的简单创建</h1>
<hr>
<form action="URL" method="post" name="form1" class="form1">
    <label for="name1">用户名字：</label>
    <input type="text" name="name1" id="name1">
    <br><br>
    <label for="name2">联系电话：</label>
    <input type="text" name="name2" id="name2">
    <br><br>
    <label for="name3">联系邮箱：</label>
    <input type="email" name="name3" id="name3">
    <br>
    <br>
    <label for="name4">留言标题：</label>
    <input type="text" name="name4" id="name4">
    <br>
    <textarea>请在此处编辑您的留言</textarea>
    <input type="reset" value="重置">
    <input type="submit" value="提交">
</form>
</body>
</html>

注意点：无

兮兮子玉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css及表单应用

实验二、css及表单应用1、实验内容：应用CSS要求：创建一个CSS文件，能够对html页面的p、body、table、链接状态等常用标记进行颜色、字体、字体大小等进行精确控制将该css文件应用到实验1创建的index.html文件。创建表单创建名为feedback.html的文件，在里面设置表单。在表单里面添加合适的控件，能够让浏览者完成留言板前端功能：可以输入用户名，联系电话，联系邮箱，标题...
复制链接

扫一扫