WEB安全 DIV CSS基础

. DIV和CSS样式

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

DIV是html的一个标签 css是一个样式表

2. 样式表类型

2.1. 嵌入样式表

<!DOCTYPE html>

<html>

<head>

<style>

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

</style>

</head>

<body>

demo1

</div>

</body>

</html>

2.2. 外部样式

@import url

@import url("g.css");

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

2.3. 内联样式

3. 注释

/* */ 注释内容

4. 样式选择器

元素选择器 div{属性:值}

ID选择器 #id{属性:值}

class选择器 .类名{属性:值}

子选择器元数空格元素{属性:值}

后代选择器元数 > 元数{属性:值}

属性选择器元素[属性]{}

通配符选择器 *{属性:值}

群组选择器

5. 背景

background-color 规定要使用的背景颜色。

background-position 规定背景图像的位置。

background-size 规定背景图片的尺寸。

background-repeat 规定如何重复背景图像。

background-origin 规定背景图片的定位区域。

background-clip 规定背景的绘制区域。

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image 规定要使用的背景图像。

inherit 规定应该从父元素继承 background 属性的设置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

简写

background: url(images/bg.gif) no-repeat top right

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

6. 边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

上右下左

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

上右下左

简写

border:5px solid red;

7. 文字属性

color:red; 文字颜色 #ffeeees

font-size:12px; 文字大小

font-weight:bolds 文字粗细(bold/normal)

font-family:”宋体”文字字体

font-variant:small-caps小写字母以大写字母显示

8. 文本属性

text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none;

文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线

letter-spacing: 字间距

9. 列表

list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。

list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。

list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。

inherit 规定应该从父元素继承 list-style 属性的值

| upper-alpha | none | inherit

disc: 点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99

lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...

upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...

lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...

lower-latin: 小写拉丁文，例如: a, b, c, ... z

upper-latin: 大写拉丁文，例如: A, B, C, ... Z

armenian: 亚美尼亚数字

georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

lower-alpha: 小写拉丁文，例如: a, b, c, ... z

upper-alpha: 大写拉丁文，例如: A, B, C, ... Z

none: 无(取消所有的list样式)

inherit:继承

list-style-position

inside

列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside

默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

简写

list-style:square inside url('/i/arrow.gif');

10. 超链接

a{text-decoration: none;}

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

11. 盒子模型

盒子模型的组成部分

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性

自身的身高 width height

内边距 padding

盒子边框 border

与其他盒子的距离 margin 外边距

12. Border 边框

常见的写法 border:1px solid #foo;

单独属性:

border-widh:

border-style:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color(颜色)

12.1. margin padding

padding:内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下左右

padding:10px 10px 10px; 上左右下

padding:10px 10px 10px 10px; 上右下左（设置4个点-->顺时针方向）

单独属性

padding-top:

padding-right:

padding-bottom:

padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin

margin:10px 上下左右都会腾出10px出来

margin:0px auto; 居中

13. float 脱离文档流浮动

left 元素向左浮动。

right 元素向右浮动

清除浮动

clear: both;

left

right

14. 块级元素、行内元素

块级元素：

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

行内元素的width、height属性则无效；

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素转换

display:none; 不显示

display:block;变成块级元素

display:inline; 变成行内元素

display:inline-block;以块级元素样式展示，以行级元素样式排列

块级元素(block element）

address 地址

center 举中对齐块

div- 常用块级容易

dl 定义列表

form 交互表单（只能用来容纳其它块元素）

h标签

hr 水平分隔线

ol 无需列表

ul有序列表

p 段落

pre 格式化文本

行内元素：

a - 锚点

b - 粗体(不推荐)

br- 换行

code - 计算机代码(在引用源码的时候需要)

em - 强调

i - 斜体

img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）

当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}

input - 输入框

label - 表格标签

select - 项目选择

strong - 粗体强调

textarea - 多行文本输入框

u - 下划线

var - 定义变量

替换元素有如下：（和img一样的设置方法）

15. 溢出

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

16. 定位

position

static静态定位（不对它的位置进行改变，在哪里就在那里）

默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

fixed固定定位（参照物--浏览器窗口）---做弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

relative（相对定位）（参照物以他本身）

生成相对定位的元素，相对于其正常位置进行定位。

absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

有下拉列表的表单

题目只能有30个字，不能写全，其实今天我们要学习的内容有三个，第一，下拉列表表单，第二，多行文字输入表单，第三，数据集表单。

开始学习吧！

前天和昨天我们在《HTML表单元素初识1——零基础自学网页制作》和《HTML表单元素初识2——零基础自学网页制作》中基本上把<input/>标签的type属性里不同的值进行了讲解与实践，今天我们来学习其他包含在<form></form>之间的元素。

带有下拉列表的表单

我们在一些网站填写注册信息时，经常会遇到选择"生活所在地"的操作，因为中国的地名是固定的，因此页面会为我们提供一个下拉列表选项，我们直接点选即可，就不需要输入文字了，这样操作的好处在于不会出现拼写错误。例如：

写这个功能我们需要介绍一组新标签<select></select>。"select"（选择）。在这个标签中再添加<option></option>。"option"（选项）。这样就可以写出带有下拉列表的表单了，示例代码如下：

<select><option></option></select>

这段代码我们继续在昨天的"表单.html"文件中添加即可，在<input type = "image" src = "img/示例图片/submit.jpg"/><br>这段代码之前即可！与这个图片提交按钮共用一个<form></form>标签！

下面我们为多选表单添加名称，示例代码如下：

请选择省份<select><option></option></select>

下面我们添加不同选项，示例代码如下：

请选择省份
  <select >
  <option >河北</option>
  <option >山东</option>
  <option >河南</option>
  <option >海南</option>
  <option >江苏</option>
  <option >安徽</option>
  </select>
  <br><br>

为了规范起见，我们为表单信息添加name和value属性，示例代码如下：

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表单中，name写在<select>中，value写在<option>中。

页面效果如下：

这里告诉大家一个规律，下拉列表表单默认显示第一个<option></option>中的文字内容。

如果您想改变这个默认显示，请在需要显示的<option>中添加selected属性，并赋值为"selected"。

示例代码如下：

请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option>
 <!--选中这个选项--><option value="Hainan">海南</option><option value="Jiangsu">江苏</option><option value="Anhui">安徽</option></select><br><br>

页面效果如图：

多行文字输入表单

我们在西瓜视频上发布视频时会被要求填写视频描述，页面中的输入框不是像下图这么短的单行输入框。

而是多行输入框，如图：

使用<textarea></textarea>标签即可添加这样的输入框，不过要设置row（列）和cols（行）属性的数值。示例代码如下：

<br>请简要描述您的剧本的情节<br><textarea row="3" cols="20"></textarea><br>

这段代码添加到</select><br><br>之后，与其共同使用一个<form></form>标签。

下面我们为这个多行输入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>标签一样，都是使用placeholder属性。

第二，我们限制一下字数，使用maxlength（最大长度）属性。

第三，在页面加载完成后，直接让光标停留在输入框中，使用autofocus属性。

下面看看如何写吧，示例代码如下：（不要忘记写好name属性！）

<br>
请简要描述您的剧本的情节<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea><br>

页面效果如图：

如果刷新页面不能正确显示，请尝试关闭后重新打开！

数据集表单

数据集表单实际上就是一个将不同选项或信息打包上传的设置。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。（W3school）

这个数据集有三个部分组成，首先是<fliedset></fliedset>,这个标签不会显示，只是告诉浏览器这里的数据要打包。

第二是<legend></legend>,"legend"(说明)，这里添加数据集名称。

第三就是我们之前学到的那些标签了。

示例代码如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我们使用这段代码把form2打包一下吧。示例代码如下：

<form>
  <fieldset><!--开始-->
  <legend>信息打包</legend><br>
  <!--标题-->兴趣爱好：<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>读书
  <input type = "checkbox" name = "hobby" value = "film"/>电影
  <input type = "checkbox" name = "hobby" value = "painting"/>绘画
  <input type = "checkbox" name = "hobby" value = "music"/>音乐
  <br>
  最高学历：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>硕士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  请选择省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山东</option>
  <option value="Henan" selected="selected">河南</option><!--选中这个选项-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江苏</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  请简要描述您的剧本的情节<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多输入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--结尾-->
  <input type = "image" src = "img/示例图片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下：

今天的内容结束了！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

们经常会遇到这样的一个问题。

设计出了很牛逼的设计稿，客户确认了，前端静态制作也出来，还原设计稿95%以上，客户也确认了。

那是个完美啊！！做完程序了，交给客户了。然后客户自己上传了图片了。那个悲催啊！！惨不忍睹啊！！

完全和设计稿两码事？图片不好看，到处都跑位。

客户就骂过来了，你们是否也遇到这样的事情？因为客户的公司没有设计师啊，哈哈，这个问题可能遇到的不少。

其实大家都会说，这归根到底都是客户没有处理图片的问题所造成的。然后大家都推来推去。

那么，前端制作工程师是否有办法解决这样的问题，其实是可以的。如果因图片问题导致布局变了，解决了这个问题就只剩下图片的美观性，那这个就可以跟客户说你要请个设计师帮你处理图片啊。这样不就解决问题了吗？

这种方式和微信朋友圈的九宫格图片展示方式类似，只显示图片中间的内容，其他的将会被隐藏。

举个栗子：

这个列表是不是很整齐，看起来比较舒服，虽然图片有那么点点的变形，但不影响阅读。

如果其中有一张图片的尺寸稍微有一点点不一样，肯定会出现跑位的情况。就像下面这样。这样客户看到不被投诉才怪哦！！

那么就以这个来说说解决方式。

大家都知道图片有一种特性，就是当图片的宽度改变时，高度也会随着等比例在改变。

例如：一张宽高都为100px的图片，如果把宽度调至200px，那么高度是不是也会随之变成200px；没错的，就是利用这个特性来解决布局乱的情况。

这里就拿上一次说到的 “图文列表纯css布局” 那次说的布局来说说，因为都是做好，和上面那个图类似。偷偷懒。如果没看过那篇，搜一下 “图文列表纯css布局”，就可以找到了。（如需下载源码，请关注微信公众号：JS学吧）

效果是这样的：

如何切出占位图呢？如下操作

用PS打开文件，用裁剪工具把图片完整的裁下来，如下图

裁完成，再点击菜单栏目 “图像 > 图像大小” 或按着 Alt键，再点两次 I 键。可以调出 “图像大小” 弹窗。

可以看到 “像素大小” 的宽度和高度都为260px，那么只要调其中一个就可以，就可以达到等比例调整。

我们先调成10px，确定后，再把图层的 “小眼睛” 关掉，另存为一个 png24 的透明图片，记得哦！！一定是要png24的。名字自己定啦！！

然后把 img 中的图片路径改为如下：

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是发现原来的图片不见的，变成空白的，但是原来的布局结构没有改变。其实要的就是这样的效果。

然后我们在 img 的外层再包个div，就拿这个div来放图片。顺便加个背景色看看效果。

</div>

</a>

看，占位图片的效果出来了。外层div的宽度和高度都被img撑开了。是不是达到了想要的效果。

关键的时候来了。就是处理图片。我们要把产品图片做为背景的形式输出即可以。把图片的路径写在div上面的就解决了。再加上css3新属性就可以了。

HTML如下：

</div>

</a>

用背景样式 background-image 定入路径。再添加一个 cover-img 的类名。然后 cover-img 的样式如下：

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事说三遍。重点就在于 css3 的新属性 background-size: cove；

这个属性就是会把背景图片，以等比例的形式保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

是不是不明白，那就对了，挺不好理解。最好还是用实际效果来看看。

最终出来的效果就是和最开始的那张图片一样的，只是看不出来而已。

那么我们就来玩真的。直接上网整一张大图的路径放进去看看就知道了。

上某某网站找特大尺寸的图片来，例如下面这张：尺寸是2533x1583，够大了，也不是正方形哦！！我们一开始说的都是正方形，现在弄个不是正方形的图片来试试效果。

HTML如下：

</div>

</a>

更改url里的路径即可

出来的效果如下：

是不是自动调整了。

我们再换一张高形状的图片。二哈图：尺寸是2448x3264

HTML：如下

</div>

</a>

最终效果：

怎么样，效果还可以吧！！不知道你们看出了什么了没有。

第一张是宽形状的图片，是以高度填满 div 的区域。

第二张是高形状的图片，是以宽度填满 div 的区域。

全都是靠着 background-size: cover; 这个属性解决了。但也是有不好的地方。

例如不支持IE浏览器，图片显示不全，多一个文件服务器要多请求一次.....等等问题！！做图时的内容尽可能在正中间。

然后，不管客户上传什么鬼形状的图片，都不会产生布局变乱的情况。

获取《vue3.0大公司后台管理系统开发正规开发流程项目实践》视频，

请点击下面 “了解更多” 或请关注微信公众号《手把手撸码前端》

在线咨询

上一篇：如何快速给汉语添加拼音？
下一篇：前端教程：JavaScript中如何操作元素内容？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

WEB安全 DIV CSS基础

. DIV和CSS样式

2. 样式表类型

2.1. 嵌入样式表

2.2. 外部样式

2.3. 内联样式

3. 注释

4. 样式选择器

5. 背景

6. 边框

7. 文字属性

8. 文本属性

9. 列表

10. 超链接

11. 盒子模型

12. Border 边框

12.1. margin padding

13. float 脱离文档流浮动

14. 块级元素、行内元素

有下拉列表的表单

HTML完整学习目录

您的项目需求