前端：CSS的知识点拾遗
clearfix:
先看下面这段代码：javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ background-color: red; } .c .item{ float: left; width: 40px; } </style> </head> <body> <div class="c"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示图：css
发现尽管咱们给父级标签设置了背景色，可是没有出现背景色。这是由于咱们将两个子标签float：left以后，父级标签的标准流里面就没有内容了，天然高度变为了零，而后背景色就没办法给提现出来。html
>>>>>>解决办法（1）：java
先说一个low的方法：在子级设置一个div，这个div按理来讲是紧挨着456右边，可是咱们给这个div设置clear：both，这是清除两边的浮动，发现这个div就没有紧挨在456右边了，而是在下一行。浏览器
解决以下：ide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c{ background-color: red; } .c .item{ float: left; width: 40px; } </style> </head> <body> <div class="c"> <div class="item">123</div> <div class="item">456</div> <div style="clear: both"></div> </div> </body> </html>
在之后的工做中会出现不少这种状况，若是在每一个子级写上clear，就费劲了，可是又必须加上clear。这时咱们就能够运用其余的知识点一块儿来简便地解决这个问题。函数
>>>>>>解决办法（2）：布局
高级的解决办法：这里咱们要运用到after:both、display:block（将内联标签变成块级标签）、visibility:hidden。学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "666"; display: block;/*内联变块标签*/ clear: both; visibility: hidden;/*隐藏，且有高度*/ height: 0px; } .c{ background-color: red; } .c .item{ float: left; } </style> </head> <body> <div class="c clearfix"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示图：字体
这样一来咱们就解决了写不少次clear：both的问题。之后须要这样的效果就能够直接在class里面添加上clearfix就能够啦。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "666"; display: block;/*内联变块标签*/ clear: both; visibility: hidden;/*隐藏，且有高度*/ height: 0px; } .c,.d{ background-color: red; } .c .item,.d .item{ float: left; width: 40px; } </style> </head> <body> <div class="c clearfix"> <div class="item">123</div> <div class="item">456</div> </div> <div class="d clearfix"> <div class="item">123</div> <div class="item">456</div> </div> </body> </html>
效果演示图：
hover:
（一）
咱们常常在网页上遇到鼠标移动到图片上就会出现一个边框，鼠标移开以后就没有了，这里咱们就要用到hover，而且设置边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ele{ background-color: darkgray; border: 2px solid transparent; } .ele:hover{ border: 2px solid red; } .ele:hover .ele-item{ color: red; background-color: rebeccapurple; } </style> </head> <body> <div class="ele"> <div>123</div> <div class="ele-item">123</div> </div> </body> </html>
这段代码就实现了上述的效果，而且将里面的一个div也设置了鼠标移动过去后字体和背景颜色的改变。本身动手试试，会更加理解这段代码的效果喔~
（二）
上面第一种只是设置了图片边框，接下来学习一个更有美感的效果。有些网页鼠标移动过去会出现一层阴影，而且还会出现一些文字。看起来文艺感十足。这也是用hover写的。
图片原本的样子：
鼠标移动到图片上的样子：
有没有很高级的感受！！！
下面就来学习一下这种炫酷的效果的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch{ width: 400px; height: 400px; overflow: hidden;/*超出大小范围的图片设置为隐藏*/ position: relative; } .touch .content{ position: absolute;/*找父级，若是父级没有设置relative，就找到body*/ top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6;/*背景色透明度*/ /*background: rgba(0,0,0,.8);!*透明度*!*/ color: white; text-align: center; visibility: hidden;/*隐藏*/ } .touch:hover .content{ visibility: visible;/*显示隐藏的内容*/ } .touch .content .content-01{ font-size: 32px; padding: 80px 0; } </style> </head> <body> <div class="touch"> <div><img src="1.jpg" style="width: 450px;height: 450px"></div> <div class="content"> <div class="content-01">香港</div> <div class="content-02">2015-2-22</div> </div> </div> </body> </html>
这种效果必定要多练练，来小小地提高一下big，哈哈哈~
position：
fixed
是固定在整个屏幕的某个位置，就好比网页的“返回顶部”的设置，实现起来超级简单。
<div style="position: fixed;right: 10px;bottom: 10px;background-color: brown;width: 40px;height: 40px"></div>
right：距离屏幕右边的距离
bottom：距离屏幕下面的距离
relative、absolute
若是absolute的父级没有relative（父级没有relative，那只有以body作为父级），此时的功能和fixed是同样的，但有个缺点就是，在屏幕不固定！
若是要在一个大div里面固定一个小div，就要在大div里面设置relative，在小div里面设置absolute。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } </style> </head> <body> <div style="background-color: plum;height: 1024px;"> <div style="position:relative;margin: 0 auto;background-color: peachpuff;width: 600px;height: 200px"> <div style="position: absolute;left: 0;bottom: 0;width: 30px;height: 30px;background-color: palevioletred"></div> </div> </div> </body> </html>
效果演示图：
能够结合fixed一块儿练习一下，可看出其中的差异。
尖角：
网页中有些图片颇有立体感，这种立体感是能够由画一个小图片来实现。好比：
实现过程：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 60px solid bisque; border-right: 60px solid plum; border-bottom: 60px solid palevioletred; border-left: 60px solid pink; display: inline-block; } </style> </head> <body> <div class="up"></div> </body> </html>
只用边框设置上下左右的属性再将块级标签设置为内联标签（display：inline-block）就能够实现了。
那咱们只想画出一个尖角符号就很容易实现了：
transparent：设置为透明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .up{ border-top: 60px solid pink; border-right: 60px solid transparent; border-left: 60px solid transparent; display: inline-block; } .down{ border-top: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 60px solid plum; border-left: 60px solid transparent; display: inline-block; } </style> </head> <body> <div class="up"></div> <div class="down"></div> </body> </html>
效果演示图：
还能够设置一个向下的尖角当鼠标放上去就变成尖角往上，而且要设置在一样的位置进行变化。这就须要设置一个父级标签了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 30px solid transparent; border-top: 30px solid pink; display: inline-block; margin-top: 40px; } .c1:hover{ border: 30px solid transparent; border-bottom: 30px solid pink; margin-top: 10px; } </style> </head> <body> <div style="height: 100px;background-color: deeppink"> <div class="c1"></div> </div> </body> </html>
效果演示图：
鼠标没有放上去以前：
鼠标放上去以后：
图标：
网页上有不少图标均可以画出来，好比邮箱的图标，可是很费劲很复杂。这里推荐一个插件能够解决这些复杂的图标。
网站：http://fontawesome.io/3.2.1/icons/。
下载以后，在运用的时候将文件放在html一块儿的工程里面，导入以后要使用哪一个图片就在网站里面查找该图标的源码进行使用就能够了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> </head> <body> <span class="icon-anchor"></span> <span class="icon-rocket"></span> </body> </html>
效演示图：
<a>标签包含<img>标签：
平时咱们把<img>放在<a>标签里面，是默认有个蓝色边框，经过IE浏览器就能够明显看到。
直接设置图片的边框为0就能够了：
<style> img{ border: 0; } </style> <body> <a href="http://www.baidu.com"><img src="1.jpg" >123</a> </body>
important：
HTML若是加上CSS的样式，样式的优先级是就近原则，哪一个样式离标签近就用哪一个。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ font-size: 40px; background-color: plum; color: white; } .c2{ color: gold; } </style> </head> <body> <div class="c1 c2">important</div> </body> </html>
此时字体颜色是使用的c2设置的颜色-金色。效果演示图：
若是想使用c1里面的字体颜色-白色。那就要在c1字体颜色后面用上！important。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ font-size: 40px; background-color: plum; color: white !important; } .c2{ color: gold; } </style> </head> <body> <div class="c1 c2">important</div> </body> </html>
效果演示图（字体变为了白色）：
后台管理布局：
下图是固定了最顶部的一栏和左边的列表栏，右边实现了一个滚轮能够翻动右边的内容。发现左边和右边是紧靠页面的，能够设置列表栏离左边页面距离为零，内容栏设置离左边页面距离也能够是相同的距离，这样能够紧贴着，或者想有一点空隙就能够在这基础上多加一点。这时咱们还要用上position：absolute来固定。
实现代码：
overflow: auto（设置滚动条）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow</title> <style> body{ margin: 0; } .top{ height: 48px; background-color: plum; } .pg-body .body-menu{ position: absolute; left: 0; width: 180px; background-color: pink; } .pg-body .body-content{ position: absolute; left: 185px; right: 0; top: 48px; bottom: 0; background-color: palevioletred; overflow: auto;/*设置滚动条*/ } </style> </head> <body> <div class="top"></div> <div class="pg-body"> <div class="body-menu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="body-content"> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1> </div> </div> </body> </html>
边缘提示框：
如图：
这里也要用到relative和absolute
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>第一列</td> <td>第二列</td> <td> <div style="position: relative"> <a>删除</a> <div style="position: absolute;left: 38px;top: -2px;"> <input type="button" value="肯定"> <input type="button" value="删除"> </div> </div> </td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> <tr> <td>第一列</td> <td>第二列</td> </tr> </table> </body> </html>
登陆（<input>标签和图标）：
如图：
咱们能够简单来分析一下，这就是一个input文本框，看起来里面还放了一张小人儿的图片。这里要注意的是当用户输入很长的一串字符的时候，是不会超过图片的位置，如图：
能够看到在小图以前有一段距离。下面代码就能够实现这些功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .user{ position: relative; width: 250px; } .user input{ height: 40px; width: 200px; padding-right: 30px; } .user .people{ position: absolute; top: 30px; left: 210px; } </style> </head> <body> <div class="user"> <p>Name：<input type="text"></p> <span class="people">P</span> </div> </body> </html>
这只是很简单地实现了一下，效果演示图：
模态对话框：
如图：
这张图片看起来应该有三层，咱们先来分析一下。底层很容易实现，直接就是body层；黑色层，直接设置上下左右距离为0和颜色透明度就能够占满整个屏幕了，而且还要设置fixed来固定它！！！而后再在这层基础上来设置一个框就ok了。这里还涉及到z-index指定层级的知识点（在以前的CSS那篇博客中已经有介绍过）。
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .model{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); z-index: 2; } .content{ height: 300px; width: 400px; background-color: pink; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; z-index: 3; } </style> </head> <body> <div style="height: 2000px;background-color: palevioletred"> <h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1> </div> <div class="model">2</div> <div class="content">3</div> </body> </html>
效果演示图：
咱们发现第一层最上面有一点白色空隙，这是由于咱们在第一层的div里面设置的是<h1>标签。若是不想有白色空隙，有两种设置方法：
第一种：
h1{
margin: 0;
}
第二种（这是设置全部的标签）：
*{
margin: 0;
}
加减框：
购物网页中在购买商品是有选择商品数量的选择，好比：
实现代码：
这里补充一个小知识点：
鼠标放在加减位置变成一个小手图案：cursor: pointer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .wrap{ height: 22px; width: 150px; border: 1px solid gray; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer;/*鼠标放到加减号上面变成小手*/ } .wrap input{ border: 0; border-left: 1px solid gray; border-right: 1px solid gray; width: 104px; /*height: 20px;*/ height: 22px; padding: 0; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick="Minus();">-</div> <div class="count left"> <input id="num"type="text" value="1"> </div> <div class="plus left" onclick="Plus();">+</div> </div> </body> </html>
加减框（JavaScript实现加减）：
经过JS能够只用按加减框自动加减，实现代码以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .wrap{ height: 22px; width: 150px; border: 1px solid gray; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer;/*鼠标放到加减号上面变成小手*/ } .wrap input{ border: 0; border-left: 1px solid gray; border-right: 1px solid gray; width: 104px; /*height: 20px;*/ height: 22px; padding: 0; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick="Minus();">-</div> <div class="count left"> <input id="num"type="text" value="1"> </div> <div class="plus left" onclick="Plus();">+</div> </div> <script type="text/javascript"> //定义加减函数 function Minus() { var old_str = document.getElementById("num").value;//获取value值，值是字符串 var old_int = parseInt(old_str);//将字符串转成数字 var new_int = old_int - 1;//进行计算 document.getElementById("num").value = new_int;//计算后从新赋值给value } function Plus() { var old_str = document.getElementById("num").value; var old_int = parseInt(old_str); var new_int = old_int + 1; document.getElementById("num").value = new_int; } </script> </body> </html>
相关文章
- 1. 网络知识点拾遗
- 2. javascript 知识点拾遗
- 3. C＃知识拾遗
- 4. MySQL知识拾遗
- 5. Java线程知识拾遗
- 6. javascript基础知识拾遗
- 7. 基础知识拾遗
- 8. Spark核心知识拾遗
- 9. 入门知识拾遗
- 10. 前端技能拾遗
- 更多相关文章...
- • 与传输层有关的基本知识 - TCP/IP教程
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 网络知识点拾遗
- 2. javascript 知识点拾遗
- 3. C＃知识拾遗
- 4. MySQL知识拾遗
- 5. Java线程知识拾遗
- 6. javascript基础知识拾遗
- 7. 基础知识拾遗
- 8. Spark核心知识拾遗
- 9. 入门知识拾遗
- 10. 前端技能拾遗