2021-10-09HTML表格，表单类的标签，网页综合项目实践

最新推荐文章于 2022-05-05 20:06:48 发布

尾迹双冒号

最新推荐文章于 2022-05-05 20:06:48 发布

阅读量607

点赞数 2

分类专栏： # web前端文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_51188461/article/details/120662627

版权

web前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

文章目录

4.表格
5表单类的标签
6网页综合项目实践(知识点回忆)

4.表格

创建表格的要求如下：

边框为2px；

宽为100%；

cellspacing为0；

cellpadding为6；

标题内容为本周财政计划；

在   <style>  标签里设置文本为居中对齐。

在这里插入图片描述
首先这基本格式先写出来

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
</body>
</html>

其次，写表格body具体实现代码

<style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        
     text-align:center;  

    }
</style>
    <!--设置表格-->
    <table border="2" cellspacing="0" cellpadding="6" width="100%">
        <caption>本周财政计划</caption>
    <tr>
        <td rowspan="2" colspan="2" >项目</td>
        <td colspan="2">本周发生</td>
        <td rowspan="2">备注</td>
        
    </tr>
    <tr>
        <td>收入</td>
        <td>支出</td>
       
    </tr>
    <tr>
        <td rowspan="3"  >收入</td>
        <td>贷款收回</td>
        <td>8700</td>
        <td>0</td>
        <td></td>
        
    </tr>
   
    <tr>
       
        <td>内部转款</td>
        <td>6000</td>
        <td>0</td>
        <td></td>
        
    </tr>
    <tr>
        
        <td>收入合计</td>
        <td>14700</td>
        <td>0</td>
        <td></td>
    </tr>
     <tr>
        <td rowspan="3"  >支出</td>
        <td>采购支出</td>
        <td>0</td>
        <td>5000</td>
       <td></td>
        
    </tr>
   
    <tr>
       
        <td>工资支出</td>
        <td>0</td>
        <td>7000</td>
        <td></td>
        
    </tr>
    <tr>
        
        <td>支出合计</td>
        <td>0</td>
        <td>12000</td>
        <td></td>
    </tr>

</table>

5表单类的标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
    </style>
</head>
<body>

    <form class="container">
    <!-- ********* Begin ********* -->
    <div>
         <span>用户名：</span>
         <input type="text" class="common"/>
    </div>

    <div>
        <span>昵称：</span>
        <input type="text" class="common"/>

    </div>

    <div>
    <span>性别：</span>

    <label for="male" name="sex">
    <input type="radio" id="male" />男</label>
     <label for="female">
    <input type="radio" id="female" name="sex"/>
   女</label>
    <label for="other">
    <input type="radio" id="other" name="sex" disabled="disabled" />
   保密</label>
    </div>

    <div>
       <span>教育程度：</span>
        
        <select class="common"/>
        
            <option class="common" value="">高中</option>
            <option class="common" value="">中专</option>
            <option class="common" value="">大专</option>  
            <option class="common" value="" selected="selected">本科</option>
            <option class="common" value="">硕士</option>
            <option class="common" value="">博士</option>
            <option class="common" value="">其他</option>
        </select>
    </div>
    
    <div>
        <span>婚姻状况：</span>
         <label for="single">
        <input type="radio" id="single" name="state" checked="checked"/>
       未婚</label>
        <label for="married">
        <input type="radio" id="married" name="state"/>
        已婚</label>
        <label for="secret">
        <input type="radio" id="secret" name="state"  />
        保密</label>
    </div>

    <div>
        <span>兴趣爱好：</span>
        <label for="football">
        <input type="checkbox" id="football" name="hobby" />
        踢足球</label>
         <label for="basketball">
        <input type="checkbox" id="basketball" name="hobby"/>
       打篮球</label>
          <label for="film">
        <input type="checkbox" id="film" name="hobby" checked="checked" />
     看电影</label>
    </div>

    <div>  
    <span>描述自己的特点：</span><textarea class="common" maxlength="20"></textarea>
    </div>
    <div>
    <span></span>
    <input type="submit" class="common" value="提交"/>
    </div>

<!-- ********* End ********* -->
</form>
</body>
</html>

6网页综合项目实践(知识点回忆)

1.header头部用float属性实现
2.hover选择器在鼠标滑过该元素时添加的特殊样式
3.swiper轮番图
4.css3移动，放大：transform，transition
5.box-shadow: 10px 10px 10px #000;
6.清除浮动.clearfix{zoom: 1;}

尾迹双冒号

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-10-09HTML表格，表单类的标签，网页综合项目实践

文章目录4.表格5表单类的标签6网页综合项目实践(知识点回忆)4.表格创建表格的要求如下：边框为2px；宽为100%；cellspacing为0；cellpadding为6；标题内容为本周财政计划；在 <style> 标签里设置文本为居中对齐。首先这基本格式先写出来<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><
复制链接

扫一扫