web前端控制

84 阅读 0 评论 56 点赞

我是靠谱客的博主高大摩托，这篇文章主要介绍web前端控制，现在分享给大家，希望可以做个参考。

1. css中float 和 clear 的区别

float:left; 当前元素向左侧浮动.
float:right: 当前元素向右侧浮动.

clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.
clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.
clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

因此：对于多个元素重叠的时候，使用clear 将比较好。

2.控制字符的自动换行

white-space：nomal nowrap

3. div 下的table 没有显示出来

一方面是table根本没有显示，自己调吧

另一方面是table显示了，这是table大小没有控制好，导致被其他元素遮挡了，此时使用width 以及height对table进行控制

4. 对于对象list size大小进行判断时，注意 null 和 size=0 是不同的，因此if语句要注意了

5.padding 四个参数的意思

padding：10px,5px,15px,20px;

分别为：上内右内下内左内

6.将某一个div 固定到某一个位置

7.实现鼠标进入时，滑动出现

8.显示滚动条 overflow属性可以实现

9、按钮

#sure{
   background-color:#CCF;
   border:0px;     //不突出
   border-color:#000;
   width:50px;
   height:50px;
   background-repeat:no-repeat;
   background-image:url(../image/bg.jpg);
   outline-color:#000;
   box-shadow: 2px 2px 2px #888888; //阴影，IE8 不管用

}

10：点击跳转到本页某个地方

其中sss 是某一个位置的id

11.菜单ul li相关设计

list-style:none; 去除前面的点（可以设置其他的形状）

float:left: 横向

li 不相对于ul 缩进：

margin:0;
padding:0;

进入下级菜单后，上级菜单位置不变：{

使用 position:absolute;

当其绝对定位后，它将脱离原来文档流，不再占据空间
}

二级菜单对应一级菜单时，如何对齐：

横向：只要设置 margin:0;
padding:0;

以及 position:absolute;

纵向：如上外，同时需要设置上级菜单位置为：

position:relative;

根据上级菜单的宽度，设置显示的左边距，上边距为0；因此这个二级菜单是根据上级菜单的绝对距离；

li :hover {

指示鼠标进入时的一些操作；

}

使用css 可以控制二级菜单的显示等：

{

使用hover：ul {

display：block;

}

注意：此使用了伪类，IE6 只支持a的伪类

实例：

a{
   color: #000;
   text-decoration:none;
}
a:hover { color: #F00; }
#menu { width:500px; height:28px; margin:0;}
#menu ul{
   list-style:none;
}
#menu ul li{
      float:left;
      margin-left:2px;
      border:1px solid;
      width:87px;
      background:#eee;
      background:url(../image/nav_bg2.gif)
}
#menu ul li a{
   width:87px; height:28px; line-height:28px; text-align:center;
       font-size:14px;
}
#menu ul li:hover{
      background-color:#9C9;
   }
#menu ul li ul li{
   float:none;
   margin:0;
   padding:0;
   width:87px;

}
#menu ul li ul li:hover{
      background-color:#9C9;
   }
#menu ul li ul{
      border:1px solid #ccc;
      display:none;
      position:absolute;
       margin:0;
   padding:0;
}
#menu ul li:hover ul{
   display:block;
}
#menu ul li a#current{
color:#fff;
}

<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>

12：链接管理

text-decoration:none; //下划线

a:link{
   color:#000;
}
a:visited {color:#00FF00;}   /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}

13：定位

父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

14： html中添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

15：

margin:auto; 居中显示

body { margin: 0px; } 消除body的外边距

16：基础知识

（1）一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级元素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的元素也需另起一行进行显示。

（2）浮动元素：

浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。

（3）a添加display:block ，将编程块级元素

（4）使用伪类（:first-letter）进行首字母的特殊显示

（5）对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了；鼠标点击姓名文字时，光标就会定位到后边的文本框上了