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 测试结果

HTML+CSS基础知识（6）背景的设置、表格的设计、表单的设计和框架集的更多相关文章

  1. HTML5基础知识汇总_(2)自己定义属性及表单新特性

    自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...

  2. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  3. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  4. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  8. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  9. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  10. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

随机推荐

  1. OSSCore 开源解决方案介绍

    基于.NetCore的积木化服务框架,主要将常规解决方案进行进一步的抽象下沉形成相关基础可选框架单元(在Framework 目录),并在此基础上实现常规系统模块(在Modules 目录),如用户管理, ...

  2. C 语言 时间函数使用技巧（汇总）

    time.h 头文件 是 C 语言中 有关 时间的函数所储存的头文件 #include <time.h> 在介绍时间函数用法之前,我们首先要了解在 time.h 头文件中已经声明了的一个结 ...

  3. 杭州思科对 Apache DolphinScheduler Alert 模块的改造

    杭州思科已经将 Apache DolphinScheduler 引入公司自建的大数据平台.目前,杭州思科大数据工程师 李庆旺 负责 Alert 模块的改造已基本完成,以更完善的 Alert 模块适应实 ...

  4. my2sql工具之快速入门

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. my2sql工具之快速入门 1.什么是my2sql ...

  5. JavaScript 函数对象（Function 对象）

    函数对象 当我们对函数使用 typeof 操作符会返回什么? function f() { console.log('hello') } console.dir(typeof f) // functi ...

  6. 聊天机器人框架Rasa资源整理

      Rasa是一个主流的构建对话机器人的开源框架,它的优点是几乎覆盖了对话系统的所有功能,并且每个模块都有很好的可扩展性.参考文献收集了一些Rasa相关的开源项目和优质文章. 一.Rasa介绍 1.R ...

  7. 3-12 Python函数定义与调用

    Python 函数 函数概念 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.如print() range()函数,但你也可以自己创建函 ...

  8. 理解 KingbaseES 中的递归查询

    关键字:SQL,CTE,递归查询 概述:通常递归查询是一个有难度的话题,尽管如此,它们仍使您能够完成在 SQL 中无法实现的操作.本文通过示例进行了简单介绍,并展示了与 PL/SQL的递归查询实现的差 ...

  9. webpack打包优化点

    目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...

  10. EntityFrameworkCore 模型自动更新（下）

    话题 上一篇我们讨论到获取将要执行的迁移操作,到这一步为止,针对所有数据库都通用,在此之后需要生成SQL脚本对于不同数据库将有不同差异,我们一起来瞅一瞅 SQLite脚本生成差异 在上一篇拿到的迁移操 ...