CSS列表、表格、表单、高级选择器以及框模型

约定不等于承诺〃 2022-06-15 12:14 214阅读 0赞

# 列表 #

--------------------

## 列表样式 ##

--------------------

### 使用场景 ###

横向或者竖向菜单（有序或者无序列表）  
自定义列表（有级别的内容，图文混排的内容）

--------------------

### 列表样式属性 ###

设置不同的列表样式：list-style-type

ul.circle {list-style-type:circle;}	标记是空心圆。
    ul.square {list-style-type:square;}标记是实心方块。

把图像设置为列表中的项目标记：list-style-image

ul
      {
      list-style-image:url("图像路径");
      }

规定列表中列表项目标记的位置：list-style-positon

ul
      {
      list-style-position:inside;
      }

简写属性在一个声明中设置所有的列表属性：list-style

可以按顺序设置如下属性：
    type,position,image
    ul
      {
      list-style:square inside url('图像路径');
      }

# 表格 #

## 应用场景 ##

规律性的数据展示

## 基本结构 ##

table-tr-td

## 表单元素及常用属性 ##

*  标签的 colspan 属性

表格单元横跨两列的表格

*  标签的 rowspan 属性

表格单元横跨两行的表格  
\#表单  
\#\#定义  
HTML 表单用于搜集不同类型的用户输入。  
\#\#结构

<form> 元素定义 HTML 表单：

## 属性 ##

### Action 属性 ###

action 属性定义在提交表单时执行的动作。
    如果省略 action 属性，则 action 会被设置为当前页面。

### Method 属性 ###

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

#### get和post使用区别 ####

何时使用 GET（默认方法）？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
    
    当您使用 GET 时，表单数据在页面地址栏中是可见的，GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。
    
    POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

\#\#应用场景  
收集数据

--------------------

\# CSS高级选择器 \#\# 并集选择器 \#\#\# 定义 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。 \#\#\#\# 例子 \`\`\` h1,\#red,.first,h4,h5,h6 \{ color: green; \} 注意：不同类型的选择器都可以作为并集选择器的一部分，用逗号分隔开。 \`\`\` \#\# 交集选择器 \#\#\# 定义 标签+ID或类 \#\#\# 例子

h1.second{.....}

## 后代选择器 ##

### 定义 ###

后代选择器可以选择作为某元素后代的元素。

### 语法 ###

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符。

### 例子 ###

p a{....}

## 子元素选择器 ##

### 定义 ###

子元素选择器只能选择作为某元素子元素的元素。

### 例子 ###

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

## 属性选择器 ##

### 定义 ###

属性选择器可以根据元素的属性及属性值来选择元素。

### 例子 ###

选择输入框里type="text"的所有元素

input[type="text"]{......}

# CSS框模型 #

## 内边距margin ##

## 外边距padding ##

## 边框border ##

## 盒子尺寸 ##

--------------------

未完待续…

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

一、列表标签列表标签分为三种。 1、无序列表`<ul>`，无序列表中的每一项是`<li>` 英文单词解释如下： ul：unordered list，“无

阳光穿透心脏的1/2处/ 2023年10月09日 11:00/ 0 赞/ 48 阅读

相关【重识 HTML + CSS】列表、表格、表单

HTML 元素列表有序列表 ol、li 无序列表 ul、li 定义列表 dl、dt、dd 列表相关的 CS

冷不防/ 2022年10月16日 07:53/ 0 赞/ 283 阅读

相关 4、表单和高级选择器

表单和高级选择器 1、什么是表单 > 表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁。就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧还不

绝地灬酷狼/ 2022年09月07日 14:33/ 0 赞/ 153 阅读

相关【css】选择器+盒子模型

做牛腩的时候曾接触过css，有一篇博客总结如下：[【牛腩】HTML+CSS基础了解][HTML_CSS] 【如何引入css】曾写了一篇文章：[【JavaScri

超、凢脫俗/ 2022年08月22日 13:27/ 0 赞/ 176 阅读

相关 CSS选择器相关以及CSS选择器的优先级

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？在CSS中，基本选择器诸如 id

偏执的太偏执、/ 2022年08月19日 02:18/ 0 赞/ 253 阅读

相关 html列表、表格、表单、文本框

html+css网站开发兵书——html部分 6.列表 \\ 无序列表 \\ 1. 有序列表 \\ 2. 内容\\

╰+攻爆jí腚メ/ 2022年06月18日 04:24/ 0 赞/ 267 阅读

相关 CSS列表、表格、表单、高级选择器以及框模型

列表 -------------------- 列表样式 -------------------- 使用场景横向或者竖向菜单（有序或者无序列表）自

约定不等于承诺〃/ 2022年06月15日 12:14/ 0 赞/ 215 阅读

相关列表表格及表单美化

列表，表格与表单有序列表 <ol> <li>...</li> <li>...</li> <li>...</li> <li>

￡神魔★判官ぃ/ 2022年04月18日 04:12/ 0 赞/ 243 阅读

相关表单选择器

[http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp][http_www.w3school.com.cn_

矫情吗；*/ 2022年01月15日 22:53/ 0 赞/ 221 阅读

相关 CSS选择器二（高级选择器）

今天来整理一下剩下的四个高级选择器高级选择器后代选择器：用空格隔开伪类选择器父子选择器组合选择器（分组选择器）：用逗号隔开 1后代选择器，规定用

淡淡的烟草味﹌/ 2021年12月08日 20:23/ 0 赞/ 273 阅读