HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集

简介: 这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。

文章目录

  • 1、背景
    • 1.1 代码
    • 1.2 测试结果
  • 2、背景练习
    • 2.1 代码
    • 2.2 测试结果
  • 3、表格
    • 3.1 代码
    • 3.2 测试结果
  • 4、练习
    • 4.1 代码
    • 4.2 测试结果
  • 5、表单
    • 5.1 代码
    • 5.2 测试结果
  • 6、框架集
    • 6.1 代码
    • 6.2 测试结果

1、背景

1.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style type="text/css">
    .box1{
        width: 1200px;
        height: 1200px;
        margin: 20px auto;
        /* 设置背景颜色 */
        background-color: plum;
        /* 将图片作为背景图片 
                        如果图片很大,在页面中只显示左上边一部分
                        如果背景图片和元素一样大,则会将背景图片全部展示出来
                        如果背景图片小于元素,背景图平铺背景元素
                        如果同时设置背景图片和背景色,背景色会作为背景图片的底色
                        语法 :
                             background-image: url("相对路径")

                             相对路径写在哪,就相对于哪边。例如:写在css样式中,然后在页面中引入样式

                              */
        background-image: url("../image/car.jpg");

        /* background-repeat:用来设置背景图片的重复方式
                          可选值:
                               repeat:默认值,背景图片会双方向重复(平铺)
                               no-repeat:背景图片不会平铺,有多大显示多大
                               repeat-x:水平平铺一排
                               repeat-y:垂直平铺一排

                               */

        background-repeat: no-repeat;
    }

    </style>
</head>

<body>
    <div class="box1"></div>

</body>

</html>

1.2 测试结果

在这里插入图片描述

2、背景练习

2.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景练习</title>
    <style type="text/css">

           .box1{
               width: 1000px;
               height: 1000px;
               background-color: #bfa;
               margin: 50PX auto;
               background-image: url("../image/car.jpg");
               background-repeat: no-repeat;

               /* 背景图片默认是贴着元素的左上角显示
                    通过background-position可以设置背景图片在元素中的位置
                                            可选值:top center bottom left right中的两个值来指定背景图片位置
                                            top left 左上
                                            bottom right 右下
                                            center center 居中
                                            只写一个值:默认是center

                        也可以直接指定偏移量:
                                           水平偏移量:正值:图片向右移动指定的像素
                                                      负值:图片向左移动指定像素
                                            垂直偏移量:同上,正值,向下移动
                                                             负值:向上移动
                                            第一个元素表示水平偏移量。第二个元素表示垂直偏移量

                                            */
               background-position: center center;

                /* background-position: -20px -30px; */

                /* 当背景图片的background-attachment设置为fixed的时候,背景图片的定位永远相对于浏览器的窗口 */

                background-attachment: fixed;
           }

    </style>
</head>

<body>
    <div class="box1"></div>

</body>

</html>

2.2 测试结果

在这里插入图片描述

3、表格

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">

    </style>
</head>

<body>
          <!-- 使用table创建一个表格 -->

          <table border="1" width="50%" align="center">
              <!-- 在table标签中使用tr表示表格中的一行,有几行就有几个tr -->
              <tr>
                  <!-- 在tr中需要使用td创建单元格,有几个单元格就有几个td -->
                  <td>A1</td>
                  <td>A2</td>
                  <td>A3</td>
                  <td>A4</td>
              </tr>
            <tr>
                <!-- 纵向合并单元格 -->
                <td rowspan="2">A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>A4</td>
            </tr>
            <tr>
                <td>A2</td>
                <!-- 横向合并两个单元格 -->
                <td colspan="2">A3</td>

            </tr>
          </table>

</body>

</html>

3.2 测试结果

在这里插入图片描述

4、练习

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表格</title>
    <style type="text/css">

    /* 设置表格的宽度 */
        table {
            width: 50%;
            /* 边框 */
            border: 1px solid balck;
            margin: 30px auto;

            /* 
            table可td之间有一个默认距离
            通过border-spacing可以设置这个属性      

            */
            border-spacing:0px;
        }



        td,th{
            border: 1px solid black;
        }


        /* tr{
            background-color: red;
        } */

        tr:nth-child(even){
            background-color: hotpink;
        }
        tr:hover{
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 使用table创建一个表格 -->

    <table>
        <!-- 在table标签中使用tr表示表格中的一行,有几行就有几个tr -->
        <tr>
            <!-- 可以使用th表示标签头中的内容,用法和td一样,不同的地方是会有一些默认的效果 -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>

        </tr>
        <tr>
            <td>A01</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>A02</td>
            <td>李四</td>
            <td>男</td>
        </tr>
            <tr>
                <td>A02</td>
                <td>李四</td>
                <td>男</td>
            </tr>
                <tr>
                    <td>A02</td>
                    <td>李四</td>
                    <td>男</td>
                </tr>
                    <tr>
                        <td>A02</td>
                        <td>李四</td>
                        <td>男</td>
                    </tr>
    </table>

</body>

</html>

4.2 测试结果

在这里插入图片描述

5、表单

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单</title>
    <style type="text/css">

    </style>
</head>

<body>

    <!-- 表单的作用就是将用户信息提交到服务器
               使用form标签创建一个表单,
                       form标签属性中必须指定一个action属性,该属性指向的是一个服务器的地址。
                       当我们提交表单时将会提交到action属性对应的地址 -->

    <form action="target.html">

        <!-- 用input来创建一个文本框,它的type属性是text
                      如果系统表单项中的数据会提交到服务器,需要指定一个name属性
                          name:表示提交内容的名称
                               用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
                                 url?查询字符串
                                 格式:
                                     属性名=属性值&属性名=属性值&属性名=属性值
                    在文本框中,可以指定value的属性值,该值将会作为文本框的默认值显示
              -->

              <!-- label:中的for指定一个元素的id值,通过点击label中的内容,鼠标自动定位到对应元素框 -->
              <label  for="num">用户名</label>
             <input id="num" type="text"  name="username"/>  
                <br><br>

           <!-- 密码框 
                使用input创建一个密码框,它的type属性值是password  输入的密码不显示 -->
        密码:<input type="password" name="password" /> 
            <br><br>


           <!-- 单选按钮:
                     使用input创建一个单选框,它的type属性使用radio
                     通过name属性进行分组,name属性相同是一组按钮
                     像这种需要用户选择但是不需要用户直接填写内容的表单项,
                         还必须指定一个value属性,这样被选中的表单项的value属性值将会提交到服务器

                         单选框或者多选框中:默认选中某些值 checked="checked"
                    -->
        性别:<input type="radio" name="gender" value="male" checked="checked"/>男
              <input type="radio" name="gender" value="female"/>女
              <br><br>

                <!-- 多选框:
                         使用input创建一个单选框,它的type属性使用checkbox
                -->

        兴趣:<input type="checkbox" name="hobby" value="ymq"/>羽毛球
              <input type="checkbox" name="hobby"  value="ppq"/>乒乓球
              <input type="checkbox" name="hobby"  value="zq"/>足球
                 <br><br>
              <!-- 下拉列表:
                          使用select来创建一个下拉列表
                          下拉列表的name属性需要指定给select,而value属性需要指定给option

                          当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表

                           默认选中某些值:selected="selected"
                        -->
        喜欢水果:<select name="fruit">
                     <!-- 在select中可以使用optgroup对选项进行分组, 同一个optgroup中的选项是一组 
                             通过label指定分组名称
                     -->
                     <optgroup label="男明星">
                         <option value="zbs">赵本山</option>
                         <option value="xsy">小沈阳</option>
                     </optgroup>

                    <optgroup label="女明星">
                        <option value="zw">赵薇</option>
                        <option value="ym">杨幂</option>
                    </optgroup>

<!--                     
                      在下拉列表中使用option标签来创建一个一个列表项
                   <option valeu="apple">苹果</option>
                   <option value="bananal">香蕉</option>
                   <option value="peach" selected="selected">水蜜桃</option> -->

                 </select>
                 <br><br>

                 <!-- 使用textarea创建一个文本区域 -->
        自我介绍:<textarea name="info"></textarea>
                  <br><br>

        <!-- 提交按钮可以将表单中的信息提交给服务器,
                   用input创建一个提交按钮,它的type属性值是submit
                          可以通过value属性来指定按钮上的文字 -->
        <input type="submit" value="注册">

        <!-- 可以创建一个重置按钮,点击按钮后,表单中内容将会恢复为默认值 -->
        <input type="reset">

        <!-- 使用button可以创建一个单纯的按钮,这个按钮没有任何功能,只能被点击 -->
        <input type="button" value="普通按钮">

    </form>

</body>

</html>

5.2 测试结果

在这里插入图片描述

6、框架集

6.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>框架集</title>
    <style type="text/css">

    </style>
</head>

<!-- <body> -->

         <!-- 框架集和内联框架的作用类似,都是在一个页面中引入其他的外部页面,
             框架集可以引入多个外部页面,内联框架只能引入一个。

        使用frameset来创建一个框架集,注意frameset不能和body同时出现在一个页面中,
          单独加载的页面,浏览器都需要重新发送依次一次请求,引入几个页面请求几次,用户体验较差

        属性:
            rows: 指定框架集中的所有框架,一行一行的排列
            cols: 指定框架集中的所有框架,一列一列的排列

            frameset中可以继续嵌套frameset
        -->

    <frameset cols="40%,30%,30%">
        <!-- 在frameset中使用frame子标签来指定要引入的页面,引入几个页面就写几个frame -->
          <frame src="dame1.html"></frame>
          <frame src="dame1.html"></frame>

          <!-- 嵌套一个frameset -->
          <frameset rows="50%,50%">
              <frame src="dame1.html"></frame>
              <frame src="dame1.html"></frame>
          </frameset>

    </frameset>

<!-- </body> -->

</html>

6.2 测试结果

在这里插入图片描述

相关文章
|
9天前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
6天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
6天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
10天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
9天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
10天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
11天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
26 1
|
11天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
20 0
|
12天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
WK
|
12天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
29 3