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).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- Java中什么是匿名对象，空参构造方法输出创建了几个匿名对象，属性声明成static
package com.swift; //使用无参构造方法自动生成对象,序号不断自增 public class Person { private static int count; //如果在定义类时 ...
- JavaScript中面向对象的三大特性（一个菜鸟的不正经日常）
经过几天的学习,把jQuery给啃会了,但是运用的还不算特别熟练,总感觉自己在JavaScript方面的基础十分欠缺,所以继续拾起JavaScript,开始更好的编程之旅~ 今天学的是JavaScri ...
- 【转】嵌入式操作系统VxWorks中TFFS文件系统的构建
时间:2005-02-20 来源:21IC中国电子网 作者:771所加固机工程部 蔡本华 高文炜 关键字:VxWorks TFFS 嵌入式操作系统 文件系统 摘要:目前的嵌入式 ...
- STL容器之Array[转]
转自https://blog.csdn.net/sin_geek/article/details/51067874 作者 Sin_Geek 简介 array在头文件<array> 中定义 ...
- python列表之append与extend方法比较
append和extend是列表的两种添加元素方式,但这两种方式却又有些不同之处.那么不同之处在哪里呢,我们通过对二者的定义和实例来看一看. list.append() 1.定义:L.append(o ...
- LNMP的环境搭建
新装的Linux 机器,还没有来得及安装网站环境,这篇文章就是记录一下自己安装LNMP的一般步骤. 之前在Laravel视频中看过这段的讲解,后来也试着安装过,基本的命令不算是熟练掌握,所以还要看看之 ...
- destoon后台权限-不给客户创始人权限并屏蔽部分功能
1.根目录下后台入口文件admin.php $_founder = $CFG['founderid'] == $_userid ? $_userid : 0; // $CFG['founderid ...
- python向上取整 向下取整
向上取整 ceil() 函数返回数字的向上取整整数,就是返回大于等于变量的最近的整数. ceil()是不能直接访问的,需要导入 math 模块. import math math.ceil( x ) ...
- uncaught exception 'NSInternalInconsistencyException, reason:[UITableViewController loadView] loaded the "Controller" nib but didn't get a UITableView
http://blog.csdn.net/ryantang03/article/details/7941058#reply 上面那篇文章是我查找的ios实现下拉刷新功能,在我下载完代码运行的过程中发现 ...
- Splay的用法
splay区间增减查询 #include<cstdio> #include<algorithm> using namespace std; ; const int INF = ...