css的部分应用示例
CSS ：层叠样式表,Cascading Style Sheets。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1 vertical-align 在图片与文字对齐时的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
}
img{
width: 80px;
height: 60px;
}; </style>
</head>
<body>
旗木卡卡西<img src="C:\Users\zuo\Desktop\2.jpg">
</body>
显示：
改进后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
}
img{
width: 80px;
height: 60px;
vertical-align: bottom;
}; </style>
</head>
<body>
旗木卡卡西<img src="C:\Users\zuo\Desktop\2.jpg">
</body>
显示：
PS:在这里涉及到一个地址分隔符。以下是从网上查到的资料：
Unix使用斜杆/ 作为路径分隔符，而web应用最新使用在Unix系统上面，所以目前所有的网络地址都采用 斜杆/ 作为分隔符。
Windows由于使用 斜杆/ 作为DOS命令提示符的参数标志了，为了不混淆，所以采用 反斜杠\
作为路径分隔符。所以目前windows系统上的文件浏览器都是用 反斜杠\
作为路径分隔符。随着发展，DOS系统已经被淘汰了，命令提示符也用的很少，斜杆和反斜杠在大多数情况下可以互换，没有影响。
知道这个背景后，可以总结一下结论：
（1）浏览器地址栏网址使用 斜杆/ ;
（2）windows文件浏览器上使用 反斜杠\ ;
（3）出现在html url() 属性中的路径，指定的路径是网络路径，所以必须用 斜杆/ ;
（4）出现在普通字符串中的路径，如果代表的是windows文件路径，则使用 斜杆/ 和 反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用 斜杆/ ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
}
div{
border: 1px solid red;
width: 100%;
height: 300px;
background-image: url("C:/Users/zuo/Desktop/2.jpg"); #所以在这里，地址分隔符必须是 /,用 \会报错。
background-repeat: repeat;
};
</style>
</head>
<body>
<div>dddd</div>
</body>
显示：
2 设置圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
div{
border: 1px solid red;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20%;
}
</style>
</head>
<body>
<div></div>
</body>
显示：
3 利用 ul/ol标签 模拟实现div block element的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.c1{
list-style: none;
padding:0;
}
</style>
</head>
<body>
<ul class='c1'>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
</ul>
</body>
输出：
AAAA
BBBB
CCCC
DDDD
4 display属性，规定元素应该生成的框的类型。用的比较多的有none，block，inline-block（行内块元素），inline（默认）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.c1{
list-style: none;
padding:0; }
.hide{
display: none;
}
</style>
</head>
<body>
<ul class='c1 hide'>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
</ul>
</body>
输出：啥都没有。display设为了none。
5 clear 指定段落的左侧或右侧不允许存在浮动元素。但管不了后面的元素干什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.c1,.c2,.c3{
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
}
.c1{
background-color: yellow;
}
.c2{
background-color: red;
clear: both;
}
.c3{
background-color: grey;
}
</style>
</head>
<body>
<div class='c1'></div>
<div class='c2'></div>
<div class='c3'></div> </body>
输出：
6解决父级塌陷的问题
现象：父级如果不指定高度，其子元素如果是浮动，父级的高度则为零。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.header{
border: 1px solid red;
width: 100%;
}
.header>.c1{
width: 40%;
height: 30px;
float: left;
border: 1px solid grey;
}
.header>.c2{
width: 40%;
height: 30px;
float: right;
border: 1px solid green;
}
.body{
width: 100%;
height: 300px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="header ">
<div class="c1">
</div>
<div class="c2">
</div>
</div>
<div class="body">
</div>
</body>
输出：
可以看出：子元素并没有撑起父元素。后面的 class=body直接越过两个float、
升级版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.header{
border: 1px solid red;
width: 100%;
}
.header>.c1{
width: 40%;
height: 30px;
float: left;
border: 1px solid grey;
}
.header>.c2{
width: 40%;
height: 30px;
float: right;
border: 1px solid green;
}
.body{
width: 100%;
height: 300px;
background-color: lightgrey;
}
.clearfix:after{ #clearfix在后面加一个空的block元素，并且clear属性为both。作为一个中介。
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="header clearfix"> #父元素继承clearfix
<div class="c1">
</div>
<div class="c2">
</div>
</div>
<div class="body">
</div>
</body>
输出：
7 position 规定元素的定位类型。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
relative：空间位置依然存在，并未脱离文档流，参照物是自己之前的位置。
absolute：完全脱离文档流，参照物是已经定位的父元素。
fixed：完全脱离文档流，参照物是可是窗口。
应用：简单的模拟京东主页面的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.ulc{
list-style: none;
padding: 0;
}
.divc{
width: 790px;
height: 340px;
border: 1px solid red;
margin: 100px auto;
position: relative;
}
.ulc li{
position: absolute;
left: 0;
top: 0;
}
.hide{
display: none;
}
</style> </head>
<body>
<div class="divc">
<ul class='ulc'>
<li class="hide"><a href=""></a><img src="https://img10.360buyimg.com/babel/jfs/t11170/7/945475996/99456/797de9e8/59fc2c36N61120663.jpg"></li>
<li class="hide"><a href=""></a><img src="https://img14.360buyimg.com/da/jfs/t11980/135/924837807/134618/9eac7429/59fae7e9Nca8bba9c.jpg"></li>
<li><a href=""></a><img src="https://img14.360buyimg.com/babel/jfs/t10513/238/2452506278/104893/f5eac171/59f73c11Nd8904b62.jpg"></li>
</ul>
</div> </body>
</html>
示例二：fixed的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.return{
width: 80px;
height: 40px;
position: fixed;
right: 30px;
bottom: 30px;
border: 1px solid red;
border-radius: 20%;
color:green;
background-color: grey;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="return">返回</div> </body>
</html>
css的部分应用示例的更多相关文章
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- div+css背景渐变色代码示例
用CSS使DIV背景颜色渐变,适用于IE和Chrome等浏览器. 从黄到红示例:http://keleyi.com/keleyi/phtml/divcss/2.htm 代码: <style ty ...
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- css选择器的组合示例
案例一demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- HTML---引入css,js | 常用标签示例
一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 嗅探js css 文件是否加载成功示例
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- js div及table首行顶部吸附示例
js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- leetcode 105. Construct Binary Tree from Preorder and Inorder Traversal，剑指offer 6 重建二叉树
不用迭代器的代码 class Solution { public: TreeNode* reConstructBinaryTree(vector<int> pre,vector<in ...
- sum特殊用法
在python中,list可以存储False和True a = [False] python的sum除了可以加数字,还可以计算列表中False,True的个数,默认是计算False个数 >> ...
- appium---命令行启动appium
在客户端的appium长时间运行的时候,出产生一些数据.日志有可能会对appium的内存有所增长,严重的会使appium产生崩溃,这个时候就推荐使用通过cmd进行运行appium, 安装前提需要安装N ...
- C语言实现两数相加2018-09-23
/*给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入:(2 ...
- MySQL左右连接查询中的NULL的数据筛选问题
这里使用左连接为例子,对于左连接是将左边表的数据显示,右边表中如果没有对应的数据则使用null填充. game表: game_type表: SELECT g.name,g.type_id,t.type ...
- 【windows】【md5】查看文件的md5值
certutil -hashfile filename MD5 certutil -hashfile filename SHA1 certutil -hashfile filename SHA256 ...
- 【jquery】 选中复选框 和 return false 的影响
$('id').attr('checked',true); return false; 如果后面接上return false 的话,复选框的钩钩不会改变,但是.is(':checked')仍然能检 ...
- Python简单试题3
1,水仙花数 水仙花数是指一个 3 位数,它的每个位上的数字的 3次幂之和等于它本身 (例如:1^3 + 5^3+ 3^3 = 153) 代码如下: 方法一: for i in range(100, ...
- vmware10下载地址
https://download3.vmware.com/software/wkst/file/VMware-Workstation-Full-10.0.1-1379776.x86_64.bundle ...
- day01_08.三大控制结构
编程三要素:变量,运算,控制 控制: 有选择性的控制让你某部分代码执行,某部分不执行,或者来回反复执行某段代码 控制的三种基本机构:顺序,选择,循环 1.顺序 程序从上到下,顺序执行 <?php ...