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).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- AutoWidthInput
import React from 'react'; import PropTypes from 'prop-types'; class AutoWidthInput extends React.Co ...
- python_89_configparser模块
用于生成和修改常见配置文档,当前模块的名称在 python 3.x 版本中变更为 configparser.在python2.x版本中为ConfigPsresr 来看一个好多软件的常见文档格式如下 [ ...
- 汉明码（Hamming Code）原理及实现
汉明码实现原理 汉明码(Hamming Code)是广泛用于内存和磁盘纠错的编码.汉明码不仅可以用来检测转移数据时发生的错误,还可以用来修正错误.(要注意的是,汉明码只能发现和修正一位错误,对于两位或 ...
- php面试相关
22.描述一下大流量高并发量网站的解决方案 答: 1.确认服务器硬件是否足够支持当前的流量. 2.使用memcache缓存技术,将动态数据缓存到内存中,动态网页直接调用这些文件,而不必在访问数据库. ...
- 【转】Qt Socket简单通信
最近要用到Qt的Socket部分,网上关于这部分的资料都比较复杂,我在这总结一下,把Socket的主要部分提取出来,实现TCP和UDP的简单通信. 1.UDP通信 UDP没有特定的server端和cl ...
- 标准C++（1）
一.引用 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例: int& num; 引用类似于起别名 注 ...
- 实验二 JSP基本动态元素的使用
实验二 JSP基本动态元素的使用 实验性质:验证性 实验学时: 2学时 实验地点: 一 .实验目的与要求 1.掌握JSP中声明变量.定义方法.java程序片及表达式的使 ...
- python 面对对象基础
目录 面向对象基础 面向对象编程(抽象) 类与对象 给对象定制独有的特征 对象的属性查找顺序 类与对象的绑定方法 类与数据类型 对象的高度整合 面向对象基础 面向对象编程(抽象) 回顾一下 面向过程编 ...
- 学习ucosii要用到的几本书
转自:http://bbs.elecfans.com/jishu_551275_1_1.html 1.嵌入式实时操作系统μC/OS-II(第2版) 邵贝贝 等译 北京航空航天大学出版社 ...
- csapp-15213错误修正18-10-28
1.p229 练习题3.15 b.答案错误,应为400419