请叫我阿ken
请叫我阿ken

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）

欢迎光临
你好
我是阿ken

文章目录

  • 6.1_元素的浮动
    • 6.1.1_元素的浮动属性 float
    • 6.1.2_清除浮动 clear
  • 6.2_overflow 属性
  • 6.3_元素的定位
    • 6.3.1_元素的定位属性
      • 1. 定位模式
      • 2. 边偏移
    • 6.3.2_静态定位 static
    • 6.3.3_相对定位 relative
    • 6.3.4_绝对定位 absolute
    • 6.3.5_固定定位 fixed
    • 6.3.6_z-index 层叠等级属性
        • ？？？
  • 6.4_元素的类型与转换
    • 6.4.1_元素的类型
      • 1. 块元素
      • 2. 行内元素
    • 6.4.2_< span> 标记
    • 6.4.3_元素的转换 display
  • 6.5_阶段案例——制作网页焦点图
    • 6.5.1_分析效果图

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第1张图片
做事情要讲究条理
要有效率
不要因为懒惰降低做事的速度
而且更要让自己忙碌一点

6.1_元素的浮动

布局看起来呆板、不美观，那么，如何对页面重新排版，这就需要为元素设置浮动。本节将对元素的浮动进行详细讲解。

6.1.1_元素的浮动属性 float

在 CSS 中，通过 float 属性来定义浮动，所谓元素的浮动是指设置了移动属性的元素会脱离标准文档流的控制。移动到其父元素中指定位置的过程。

其基本语法格式为:

选择器 {
     
float: 属性值;
}

float 的常用属性值：

属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)

案例：学习 float 属性的用法，


<html>
<head>
<meta charset="utf-8">
<title>元素的浮动title>
<style type="text/css">

.father {
      
background: #ccc;  /*定义父元素的样式*/
border: 1px dashed #999;

}

.box01, .box02, .box03 {
       /*定义 box01、 box02、 box03 三个盒子的样式*/
height: 50px;
width: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
}



p {
          /*定义段落文本的样式*/
background: #FCF;
border: 1px dashed #F33;
padding: 0px 10px;
}



style>
head>
<body>

<div class="father">
<div class="box01">box01div>
<div class="box02">box02div>
<div class="box03">box03div>
div>

<p>12p>



body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第2张图片

运行后，box01、box02、box03 及段落文本从上到下一一罗列。 可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占据页面整行。

接下来以 box01 为设置对象，对其应用左浮动样式，具体CSS代码如下：

.box01 {
      /*定义box01左浮动*/
float: left;
}

运行后容易看出，设置左浮动的 box01 不再受文档流控制，出现在了一个新的层次上。

在上述案例的基础上，继续为 box02 设置左浮动，具体CSS代码如下。

.box01, .box02 {
       /*定义 box01、box02 左浮动*/
float: left;
}

上述代码运行后，box01、box02、box03 三个盒子整齐地排列在同一行，可见通过应用 " float: left " 样式可以使 box01 和 box02 同时脱离标准文档流的控制向左漂浮。

在上述案例的基础上，继续为box03设置左浮动，具体 CSS 代码如下：

.box01, .box02, .box03 {
          /*定义box01、box02、box03左浮动*/
float: left;
}

上述代码运行后，box01、 box02、 box03 三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。

需要说明的是，float 的另一个属性值 " right " 在网页布局时也会经常用到，它与 " Ieft " 属性值的用法相同但方向相反。应用了 " float: right; " 样式的元素将向右侧浮动，读者要学会举一反三。

  • 注意:
    对元素同时定义 float 和 margin-left 或 margin-right 属性时，在 IE6 浏览器中，出现的左外边距或右外边距将是所设置的 margin-left 或 margin-right 值的两倍，这就是网页中经常出现的 " IE6 双倍边距 " 问题。

6.1.2_清除浮动 clear

在网页中，由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素。

例如上述刚才那个案例中定义完 box03 ，受到其周围元素浮动的影响，产生了位置上的变化。这时如果要避免浮动对其他元素的影响，就需要清除浮动。在 CSS 中，使用 clear 属性清除浮动，其基本语法格式如下。

选择器 {
      
clear: 属性值; 
}

clear 的常用属性值：

属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

案例：< p>标记应用 clear 属性来清除浮动元素对段落文本的影响，


<html>
<head>
<meta charset="utf-8">
<title>清除元素的左浮动title>
<style type="text/css">

.father {
         /*定义父元素的样式*/
background: #ccc;
border: 1px dashed #999;
}

.box01, .box02, .box03 {
       
/*定义box01、box02、box03三个盒子的样式*/
height: 50px;
line-height: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
float: left; /*定义box01、box02、box03 左浮动*/
}

p {
        /*定义段落文本的样式*/
background: #FCF;
border: 1px dashed #F33;
margin: 15px;
padding: 0px 10px;
clear: left;  /*清除左浮动*/
/*上一行代码用于清除段落文本左侧浮动元素的影响*/
}

style>
head>
<body>

<div class="father">
<div class="box01">box01div>
<div class="box02">box02div>
<div class="box03">box03d1v>
<p>111p>
div>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第3张图片

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第4张图片

运行后可以看出，清除段落文本左侧的浮动后，段落文本不再受到浮动元素的影响，而是按照元素自身的默认排列方式，独占一行，排列在浮动元素 box01、 box02、box03的下面。

**需要注意的是， clear 属性只能清除元素左右两侧浮动的影响。**然而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，

案例：演示上述例子，


<html>
<head>
<meta charset="utf-8">
<title>清除浮动title>
<style type="text/css">

.father {
        /*没有给父元素定义高度*/
background: #ccc;
border: 1px dashed #999;
}

.box01, .box02, .box03 {
      
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}

style>
head>
<body>

<div class="father">
<div class="box01">box01div>
<div class="box02">box02div>
<div class="box03">box03div>
div>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第5张图片

上述代码为 box01、box02、box03 三个子盒子定义左浮动，同时，不给其父元素设置高度。

运行后，由于受到子元素浮动的影响，没有设置高度的父元素变成了一条直线，即父元素不能自适应子元素的高度了。

我们知道子元素和父元素为嵌套关系，不存在左右位置，所以使用 clear 属性并不能清除子元素浮动对父元素的影响。对于这种情况该如何清除浮动呢?具体介绍如下。

  • 方法一: 使用空标记清除浮动
    _
    在浮动元素之后添加空标记，并对该标记应用 " clear:both " 样式，可清除元素浮动所产生的影响，这个空标记可以为 < div>、< p>、 < hr /> 等任何标记。
    _
    案例：演示使用空标记清除浮动的方法，

<html>
<head>
<meta charset="utf-8">
<title>空标记清除浮动title>
<style type="text/css">

.father {
        /*没有给父元素定义高度*/
background: #ccc;
border: lpx dashed #999;
}

.box01, .box02, .box03 {
      
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed 999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}

.box04 {
       
clear: both;
}

/*对空标记应用clear:both;*/

style>
head>
<body>

<div class="father">
<div class="box01">box01div>
<div class="box02">box02div>
<div class="box03">box03div>
<div class="box04">div>

div>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第6张图片

在浮动元素 box01、box02、box03 之后添加 class 为 box04 的空 div ，然后对 box04 应用 " clear: both; " 样式。

父元素被其子元素撑开了，即子元素的浮动对父元素的影响已经不存在。

需要注意的是，上述方法虽然可以清除浮动， 但是在无形中增加了毫无意义的结构元素(空标记)，因此在实际工作中不建议使用。

(空标记)因此在实际工作中不建议使用。

  • 方法二:使用 overflow 属性清除浮动
    _
    对元素应用 " overflow: hidden; " 也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。

案例：演示使用 overflow 属性清除浮动的方法，


<html>
<head>
<meta charset="utf-8">
<title>overflow属性清除浮动title>
<style type="text/css">

/*没有给父元素定义高度*/
.father {
      
background: #ccc;
border: 1px dashed #999;
overflow: hidden;   /*对父元素应用overflow:hidden;*/
}

.box01, .box02, .box03 {
      
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left;
/*定义box01、box02、box03三个盒子左浮动*/
}

style>
head>
<body>

<div class="father">
<div class="box01">box01div>
<div class="box02">box02div>
<div class="box03">box03div>
div>

body>
html>

对父元素应用 " overflow: hidden; " 样式来清除子元素浮动对父元素的影响。

父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。

  • 方法三: 使用 after 伪对象清除浮动

使用 after 伪对象也可以清除浮动，但是该方法只适用于 IE8 及以上版本浏览器和其他非 IE 浏览器。

另外，使用 after 伪对象清除浮动时需要注意：

(1) 必须为需要清除浮动的元素伪对象设置 " height: (); " 样式，否则该元素会比其实际高度高出若干像素。

(2) 必须在伪对象中设置 content 属性，属性值可以为空，如 " content：" " ; 。

案例：演示使用 after 伪对象清楚浮动的方法。


<htm1>
<head>
<meta charset="utf-8">
<title>使用after伪对象清除浮动title>
<style type="text/css">

.father {
            /*没有给父元素定义高度*/
background: #ccc;
border: 1px dashed #999;
}

.father:after {
         /*对父元素应用after伪对象样式*/
display: block;
clear: both;
content:"";
visibility: hidden;
height: 0;
}

.box01, .box02, .box03 {
      
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed #999;
margin: 15px;
padding: 0px 10px;
float: left;  /*定义box01、box02、box03三个盒子左浮动*/
}

style>
head>
<body>

<div class="father">
<div class="box01">box01d1v>
<div class="box02">box02d1v>
<div class="box03">box03div>
div>

body>
html>

第 11 ~ 17 行代码用于为父元素应用 after 伪对象样式来清除浮动。

父元素又被其子元素撑开了，即子元素浮动对父元素的影响已经不存在。

6.2_overflow 属性

overflow 属性是 CSS 中的重要属性。当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用 overflow 属性，其基本语法格式如下。

选择器 {
     
overflow: 属性值;
}

overflow 的常用属性值：

属性值 描述
visible 内容不会被修剪，会呈现在元素框之外(默认值)
hidden 溢出内容会被修剪，并且被修剪的内容是不可见的
auto 在需要时产生滚动条，即自适应所要显示的内容
scroll 溢出内容会被修剪，且浏览器会始终显示滚动条

案例：演示 overflow 属性的用法和效果，


<html>
<head>
<meta charset="utf-8">
<title>overflow属性title>
<sty1e type="text/css">

div {
width: 100px;
height: 140px;
background: #F99;
overflow: visible;  /*溢出内容呈现在元素框之外*/
}

style>
head>
<body>

<div>
当盒子内的元素超出盒子自身的大小时， 内容就会滥出，如果想要规范後出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式。
div>

body>
html>

第11行代码通过 " overflow：visible; " 样式，定义溢出的内容不会被修剪，而呈现在元素框之外。一般而言，并没有必要设定 overflow 的属性为 visible , 除非你想覆盖它在其他地方设定的值。

运行后可知，溢出的内容不会被修剪，而呈现在元素框之外。

如果希望溢出的内容被修剪，且不可见，可将 overflow 的属性值定义为 hidden 接下来，将第 11 行代码更改如下即可，

overflow: hidden;/*溢出内容被修剪，且不可见*/

运行后可以看出，使用 " overflow: hidden " 可以将溢出内容修剪，并且被修剪的内容不可见。

另外，如果希望元素框能够多自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条，可以将 overflow 的属性值定义为 auto 。将第 11 行代码更改如下即可，

overflow: auto;/*根据需要产生活动条*/

运行后可发现，元素框的右侧产生了滚动条，拖动滚动条即可查看溢出的内容。当盒子中的内容减少时，滚动条就会消失。
值得一提的是，当定义 overflow 的属性值为 scroll 时，元素框中也会产生滚动条。将第 11 行代码更改如下即可，

overflow: scroll; /*始终显示滚动条*/

运行后可发现，元素框中出现了水平和竖直方向的滚动条。与 " overflow: auto; " 不同，当定义 " overflow: scroll; "时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。

6.3_元素的定位

浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在 CSS 中，通过定位属性可以实现网页中元素的精确定位。下面，我们将对元素的定位属性及常用的几种定位方式进行详细讲解。

6.3.1_元素的定位属性

制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位就是将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。

1. 定位模式

_
在 CSS 中，position 属性用于定义元素的定位模式，其基本语法格式如下。

选择器 {
     
position: 属性值;
}

position 属性的常用值：

值 描述
static 静态定位(默认定位方式)
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位

从上表可以看出，定位的方法有多种，分别为静态定位 (static)、相对定位 (relative)、绝对定位 (absolute) 及固定定位 (fixed)，后面我们将对它们进行详细讲解。

2. 边偏移

_
定位模式 ( position ) 仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在 CSS 中，通过边偏移属性 top、bottom、left 或 right 来精确定义定位元素的位置。

边偏移设置方式：

边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离

从上表可以看出，边偏移可以通过 top、bottom、left、 right 进行设置，其取值为不同单位的数值或百分比，示例如下。

position: relative; /*相对定位*/
left: 50px; /*距左边线50px*/
top: 10px;  /*距顶部边线10px*/

6.3.2_静态定位 static

静态定位是元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。所谓静态位置就是各个元素在 HTML 文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义 position 属性时， 并不说明该元素没有自己的位置， 它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性 ( top、bottom、left 或 right ) 来改变元素的位置。

6.3.3_相对定位 relative

相对定位是将元素相对于它在标准文档流中的位置进行定位，当 position 属性的取值为 relative 时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

案例：演示对元素设置相对定位的方法和效果，


<html>
<head>
<meta charset="utf-8">
<title>元素的定位title>
<style type="text/css">

body {
       
margin: 0px; 
padding: 0px; 
font-size: 18px; 
font-weight: bold; 
}

.father {
      
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid #000;
}

.child01, .child02, .child03 {
      
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid #000;
margin: 10px 0px;
text-align: center;
}

.child02 {
      
position: relative; /*相对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距顶部边线100px*/
}

style>
head>
<body>
<div class="father">
<div class="child01">child-01div>
<div class="child02">child-02div>
<div class="child03">child-03div>
body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第7张图片

上述第 25 ~ 29 代码对 child02 设置相对定位模式，并通过边偏移属性 left 和 top 改变它的位置。

运行后不难看出，对 child02 设置相对定位后，它会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。

6.3.4_绝对定位 absolute

绝对定位是将元素依据最近的已经定位 ( 绝对、固定或相对定位 ) 的父元素进行定位，若所有父元素都没有定位，则依据 body 根元素 ( 浏览器窗口 ) 进行定位。当 position 属性的取值为 absolute 时，可以将元素的定位模式设置为绝对定位。

将 child02 的定位模式设置为绝对定位，即将第 25 ~ 29 行代码更改如下：

.child02 {
     
position: absolute; /*绝对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距项部边线100px*/
}

上述代码中，设置为绝对定位的元素 child02 ，依据浏览器窗口进行定位。并且，这时 child03 占据了 child02 的位置，即 child02 脱离了标准文档流的控制，不再占据标准文档流中的空间。

在上面的案例中，对 child02 设置了绝对定位，当浏览器窗口放大或缩小时，child02 相对于其直接父元素的位置都将发生变化。当缩小浏览器窗口时，很明显 child02 相对于其直接父元素的位置发生了变化。

然而在网页中，一般需要子元素相对于其直接父元素的位置保持不变，即子元素依据其直接父元素绝对定位，如果直接父元素不需要定位，该怎么办呢?

对于上述情况，可将直接父元素设置为相对定位，但不对其设置偏移量，然后再对子元素应用绝对定位，并通过偏移属性对其进行精确定位。这样父元素既不会失去其空间，同时还能保证子元素依据直接父元素准确定位。

案例：演示子元素依据其直接父元素准确定位的方法，


<html>
<head>
<meta charset="utf-8">
<title>子元素相对于直接父元素定位title>
<style type="text/css">

.father {
      
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid #000;
position: relative; 
/*相对定位，但不设置偏移量。*/
}

.child01, .child02, .child03 {
      
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid #000;
margin: 10px 0px;
text-align: center;
}

.child02 {
      
position: absolute; /*绝对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距顶部边线100px*/
}

style>
head>
<body>

<div class="father">
<div class="child01">child-01div>
<div class="child02">child-02div>
<div class="child03">child-03div>
div>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第8张图片

在上述代码中，代码用于对父元素设置相对定位，但不对其设置偏移量。同时，代码用于对子元素 child02 设置绝对定位，并通过偏移属性对其进行精确定位。

运行后，子元素相对于父元素进行偏移。这时，无论如何缩放浏览器的窗口，子元素相对于其直接父元素的位置都将保持不变。

  • 注意:
    _
    (1) 如果仅设置绝对定位，不设置边偏移， 则元素的位置不变， 但其不再占用标准文档中的空间，与上移的后续元素重叠。
    _
    (2) 定义多个边偏移属性时，如果 left 和 right 冲突， 以 left 为准，top 和 bottom 冲突，以 top 为准。

6.3.5_固定定位 fixed

固定定位是绝对定位的一种特殊形式， 它以浏览器窗口作为参照物来定义网页元素。当 position 属性的取值为 fixed 时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。但是，由于 IE6 不支持固定定位，因此，在实际工作中较少使用，我们在这里暂不做详细介绍。

6.3.6_z-index 层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在 CSS 中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用 z-index 层叠等级属性，其取值可为正整数、负整数和0。z-index 的默认属性值是 0 ，取值越大，定位元素在层叠元素中越居上。

  • 注意:
    _
    z-index 属性仅对定位元素生效。

？？？

6.4_元素的类型与转换

接下来，我们将对元素的类型与转换进行详细讲解。

6.4.1_元素的类型

HTML 标记语言提供丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用 CSS 设置样式和布局打下基础，具体如下：

1. 块元素

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
_
常见的块元素有 < h1> ~ < h6>、< p>、 < div>、< ul>、< ol>、< li> 等，其中< div>标记是最典型的块元素。

2. 行内元素

_
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。 一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
_
常见的行内元素有 < strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< a>、 < span> 等，其中 < span> 标记是最典型的行内元素。

案例：进一步认识块元素与行内元素，


<html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素title>
<style type="text/css">

h2 {
        
/*定义h2的背景颜色、宽度、高度、文本水平对齐方式*/
background: #FCC;
width: 350px;
height: 50px;
text-align: center;
}

p {
       
background: #090; 
}  /*定义P的背景颜色*/

strong {
       
/*定义strong的背景颜色、宽度、高度、文本水平对齐方式*/
background: #FCC;
width: 360px;
height: 50px;
text-align: center;
}

em {
       
background: #FFO; 
}  /*定义em的背景颜色*/

del {
      
background: #CCC; 
}  /*定义del的背景颜色*/

style>
head>
<body>

<h2>h2 标记定义的文本。h2>
<p>p 标记定义的文本。 P>
<strong>strong 标记定义的文本。strong>
<em>em 标记定义的文本。 em>
<del>del 标记定义的文本。del>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第9张图片

在上述案例中，首先使用块标记 < h2>、< p> 和行内标记 < strong>、< em>、< del>定义文本，然后对它们应用不同的背景颜色，同时，对 < h2> 和 < strong> 应用相同的宽度、高度和对齐属性。

运行后可以看出，不同类型的元素在页面中所占的区域不同。块元素 < h2> 和 < p> 各自占据一个矩形的区域，虽然 < h2> 和 < p> 相邻，但是它们不会排在同一行中，而是依次竖直排列，其中，设置了宽高和对齐属性的 < h2> 按设置的样式显示，未设置宽高和对齐属性的 < p> 则左右撑满页面。然而行内元素 < strong>、< em> 和 < del> 排列在同一行，遇到边界则自动换行，虽然对 < strong> 设置了和 < h2> 相同的宽高和对齐属性，但是在实际的显示效果中并不会生效。

值得一提的是， 行内元素通常嵌套在块元素中使用， 而块元素却不能嵌套在行内元素中。例如，可以将上述案例中的 < strong>、< em> 和 < del> 嵌套在 < p> 标记中，代码如下。

<p>
<strong>strong 标记定义的文本。strong>
<em>em 标记定义的文本。em>
<del>del 标记定义的文本。del>
p>

运行后可以看出，当行内元素嵌套在块元素中时，就会在块元素上占据一定的范围，成为块元素的一部分。

总结：块元素通常独占一行 ( 逻辑行 )。可以设置宽高和对齐属性，而行内元素通常不独占一行，不可以设置宽高和对齐属性。行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。

  • 注意:
    _
    在行内元素中有几个特殊的标记 ——— < img /> 和 < input />，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

6.4.2_< span> 标记

与 < div> 一样， < span> 也作为容器标记被广泛应用在 HTML 语言中。和< div > 标记不同的是 < span> 是行内元素，< span> 与 < /span>之间只能包含文本和各种行内标记，如加粗标记 < strong>、倾斜标记 < em> 等，< span> 中还可以嵌套多层 < span> 。

< span> 标记常用于定义网页中某些特殊显示的文本，配合 class 属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用 < span> 标记。

案例：演示 < span> 标记的使用，


<html>
<head>
<meta charset="utf-8">
<title>span 标记title>
<style type="text/css">

#header {
        /*设置当前div中文本的通用样式*/
font-family: "黑体";
font-size: 14px;
color: #FFA500;
}

.huanzhi {
       
 /*控制第1个span中的特殊文本*/
color: #515151;
font-size: 20px;
padding-right: 20px;
}

.course {
        /*控制第2个span中的特殊文本*/
font-size: 18px;
color: #87CEEB;
}

style>
head>
<body>

<div id="header">
<span class="huanzhi">阿ken的CSDNspan>
欢迎光临
<span class="course">点击进入span>，欢迎光临!
div>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第10张图片

上述代码中使用 < div> 标记定义一些文本， 并且在 < div> 中嵌套两对 < span>，用于控制某些特殊显示的文本，然后使用 CSS 分别设置它们的样式。

运行后特殊显示的文本都是通过 CSS 控制 < span> 标记设置的。

运行后可以看出，< span> 标记可以嵌套于 < div> 标记中，成为它的子元素，但是反过来则不成立，即 < span> 标记中不能嵌套 < div> 标记。从 < div> 和 < span> 之间的区别和联系，可以更深刻地理解块元素和行内元素。

6.4.3_元素的转换 display

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行排列，可以使用 display 属性对元素的类型进行转换。

display 属性常用的属性值及含义如下：

  • inline: 此元素将显示为行内元素 ( 行内元素默认的 display 属性值 )。

  • block: 此元素将显示为块元素 ( 块元素默认的 display 属性值 )。

  • inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。

  • none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

案例：演示 display 属性的用法和效果，


<html>
<head>
<meta charset="utf-8">
<title>元素的转换title>
<style type="text/css">

div, span {
           /*同时设置div和span的样式*/
width: 200px;   /*宽度*/
height:50px;    /*高度*/
background: #FCC;   /*背景颜色*/
margin: 10px;  /*外边距*/
}

.d_one, .d_two {
       
display: inline; 
} /*将前两个div转换为行内元素*/

.s_one {
       
display: inline-block; 
} /*将第一个span转换为行内块元素*/

.s_three {
       
display: block; 
} /*将第三个span转换为块元素*/

style>
head>
<body>

<div class="d_one">第一个 div 中的文本div>
<div class="d_two">第二个 div 中的文本div>
<div class="d_three">第三个 div 中的文本div>
<span class="s_one">第一个 span 中的文本span>
<span class="s_two">第二个 span 中的文本span>
<span class="s_three">第三个 span 中的文本span>

body>
html>

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第11张图片

上述代码中，定义了三对 < div> 和三对 < span> 标记， 为它们设置相同的宽度、高度、背景颜色和外边距。 同时，对前两个 < div> 应用 " display:inline; " 样式，使它们从块元素转换为行内元素， 对第一个和第三个 < span> 分别应用 " display：inline-block; " 和 " display:inline; " 样式， 使它们分别转换为行内块元素和行内元素。

运行后可以看出，前两个 < div> 排列在了同一行，靠自身的文本内容支撑其宽高，这是因为它们被转换成了行内元素。而第一个和第三个< span> 则按固定的宽高显示，不同的是前者不会独占一行，后者独占一行，这是因为它们分别被转换成了行内块元素和块元素。

在上面的案例中，使用 display 的相关属性值，可以实现块元素、行内元素和行内块元素之间的转换。如果希望某个元素不被显示，还可以使用 " display: none; " 进行控制。例如，希望上面案例中的第三个 < div> 不被显示，可以在 CSS 代码中增加如下样式。

.d_three {
      
display: none; 
} /*隐藏第三个div*/

运行代码后可以看出，当定义元素的 display 属性为 none 时，该元素将从页面消失，不再占用页面空间。

注意:

根据上述案例运行结果可以发现，前两个 < div> 与第三个 < div> 之间的垂直外边距，并不等于前两个 < div> 的 margin-bottom 与第三个 < div> 的 margin-top 之和。这是因为前两个 < div> 被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。

6.5_阶段案例——制作网页焦点图

为了使读者更好地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦点图。

6.5.1_分析效果图

下面这个因为一些原因回头重新整理一下

  1. 结构分析

观察效果图6-26不难看出，焦点图模

块整体上可以分为3部分:焦点图、切换图

际、切换按钮。焦点图可以使用标记:

切换图标由6个小图标组成，可以使用无序

列表

  • 、
  • 搭建结构; 焦点图切换按钮

<由>概套心标记

可以使用两个标记定义。效果图6-26

对应的结构如图6-28所示。

图6-28焦点图页面结构图

2.样式分析

控制效果图6- 26的样式主要分为4个部分，具体如下。

(1)通过

对整个页面进行整体控制，需要设置相对定位方式。

(2)通过标记控制左右两侧的切换按钮样式及其位置，并设置左浮动样式。(3)通过

  • >整体控制切换图标模块，需要设置绝对定位方式。

(4)通过

万字博文整理最全_HTML、CSS_浮动与定位（笔记六）_第12张图片
胜利的天平并不会因此格外向他倾斜，但人心会。
_
再见
我是阿ken

你可能感兴趣的:(HTML+CSS,css,css3,html5,html)

  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 非关系型数据库 天秤-white nosql
    一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 七.正则化 愿风去了
    吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他