html+css快速入门教程（5）
练习：
1.画盒子1 2.画盒子2 3.京东特色购物 4.京东发现好货 5.京东玩3c
7.3 定位
通过使用 position 属性，我们可以选择 3 种不同类型的定位，这会影响元素框生成的方式。
relative
相对定位的参照物是原来自己的位置，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
<html>
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px
}
h2.pos_right{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
absolute
绝对定位的参照物是有定位属性的上级元素，一层一层往外找定位的参照物，直到body
<html>
<head>
<style type="text/css">
h2.pos_abs{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。
下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
fixed
固定定位的参照物是浏览器可视区域
<html>
<head>
<style type="text/css">
p.one{
position:fixed;
left:5px;
top:5px;
}
p.two{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
练习：
1、京东固定定位 2、网易栏目 3、淘宝轮播图
8 其他选择器
8.1相邻选择器
相邻选择器可以选择紧跟其后的相邻元素,注意：相邻选择器用＋号来连接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1+div{
width:100px;
height:100px;
background:blue;
</style>
</head>
<body>
<h1>css 样式测试</h1>
<div id="div1"></div>
<div id="box"></div>
</body>
</html>
8.2 多元素选择器
当几个元素有共同属性的时候，可以使用多元素选择器，注意：选择多个元素的时侯，用逗号隔开
<style>
h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,
form,input,select,body{margin:0;padding:0}
</style>
8.3 后代选择器
后代选择器作用于父元素下面的所有子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
＃div1 p{
/*
把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p
*/
color:red;
｝
</style>
</head>
<body>
<h1>css 样式测试</h1>
<div id="div1">
<p>一江春水向东流</p>
<p>飞流直下三千尺</p>
<div id="box">
<p>床前明月光</p>
</div>
</div>
</body>
</html>
8.4 子元素选择器
子元素选择器作用于父元素的子元素，子元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，而子元素选择器只能作用于它的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
＃div1>p{
/*把id为div1的子元素p的字体设置为红色
这里只包含子元素，不包含id为box下面的子元素
*/
color:red;
｝
</style>
</head>
<body>
<h1>css 样式测试</h1>
<div id="div1">
<p>一江春水向东流</p>
<p>飞流直下三千尺</p>
<div id="box">
<p>床前明月光</p>
</div>
</div>
</body>
</html>
8.5 属性选择器
E[attr] 匹配所有具有att属性的E元素，不考虑它的值,例如： input[name]，只要有name属性的input元素都会被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
input[name]{
/*把带有name属性的input元素加上红色边框*/
border:red solid 1px;
}
</style>
</head>
<body>
<form>
<input type="text" name="ipt1"/>
<input type="text" name="ipt1"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
E[attr = val] 匹配所有attr属性值等于val的E元素 input[id=ipt2] 属性值一般不加引号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
input[id=ipt2]{
/*把id值为ipt2的input元素的边框设置成蓝色*/
border:blue solid 1px;
}
</style>
</head>
<body>
<form>
<input type="text" name="ipt1" id='ipt1'/>
<input type="text" name="ipt1" id='ipt2'/>
<input type="submit" value="提交" />
</form>
</body>
</html>
E[attr ~= val],"~"包含的意思，只要属性值包含了val的E元素都会被选中
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower]{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="/i/eg_tulip.jpg" title="tulip flower" />
<br />
<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" />
<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，
必须声明 <!DOCTYPE>。</p>
</body>
</html>
E[attr = val],""以某个值开头的意思，只要属性值以val开头的E元素都会被选中
<!DOCTYPE html>
<html>
<head>
<style>
div[class^="test"]{
/*第三个div元素的背景会被设置成红色*/
ckground:red;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
</html>
E[attr = $val],"$"以某个值结尾的意思，只要属性值以val开头的E元素都会被选中
<!DOCTYPE html>
<html>
<head>
<style>
div[class$="test"]{
/*第一个div的背景会被设置成蓝色*/
background:blue;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
</html>
8.6 伪类和伪元素
8.6.1 :after和:before
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:before{
content: "点我";
}
a:after{
content: "!!!";
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<p>百度一下你就知道了！</p>
<a href="http://nativejs.org">原生js社区</a>
</body>
</html>
8.6.2 a标签的4种不同状态
未访问链接(link)、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: yellow;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="http://nativejs.org">原生js</a>
</body>
</html>
上述代码中，对a元素使用:before 和 :after伪选择器，使用这类选择器对时候，通过设置content属性对值可以指定耀插入的内容。这个属性比较特别，只能跟伪选择器一起使用。after表示在a元素内容之前插入，before表示在a元素内容之后插入
螺钉课堂视频课程地址：http://edu.nodeing.com
html+css快速入门教程（5）的更多相关文章
- html+css快速入门教程（4）
练习 1.网易考拉下拉菜单 2.爱奇艺新闻 3.ps滤镜菜单 4.爱奇艺列表 7 布局 7.1 盒子模型 网页设计,首先要做好整体的布局,网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置, ...
- html+css快速入门教程（3）
练习: 1.画盒子 2.相框 5 基础选择器 5.1 id选择器 ID选择器与类选择器的定义与引用方式类似,只是定义的符号不一样.ID通常表示唯一值,因此,ID选择器在CSS 中通常只出现一次.如果出 ...
- html+css快速入门教程（2）
3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...
- html+css快速入门教程（6）
9 综合实例 仿百度云盘下载页面实战 10 表格 10.1 table table 为表格标签 可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td tr表示一行 td表示 ...
- html+css快速入门教程（1）
1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
- 专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
- EntityFramework6 快速入门教程
EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
随机推荐
- Java实现 LeetCode 559 N叉树的最大深度（遍历树，其实和便利二叉树一样，代码简短(●ˇ∀ˇ●)）
559. N叉树的最大深度 给定一个 N 叉树,找到其最大深度. 最大深度是指从根节点到最远叶子节点的最长路径上的节点总数. 例如,给定一个 3叉树 : 我们应返回其最大深度,3. 说明: 树的深度不 ...
- Java实现 LeetCode 526 优美的排列（DFS）
526. 优美的排列 假设有从 1 到 N 的 N 个整数,如果从这 N 个数字中成功构造出一个数组,使得数组的第 i 位 (1 <= i <= N) 满足如下两个条件中的一个,我们就称这 ...
- Java实现 LeetCode 221 最大正方形
221. 最大正方形 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 ...
- Java实现 LeetCode 191 位1的个数
191. 位1的个数 编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例 1: 输入:000000000000000000000000000 ...
- java实现字符串比较
标题:字符串比较 我们需要一个新的字符串比较函数compare(s1, s2). 对这个函数要求是: 1. 它返回一个整数,表示比较的结果. 2. 结果为正值,则前一个串大,为负值,后一个串大,否则, ...
- C++实现网络寻路
标题:网络寻路 X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少 ...
- Java实现Catenyms(并查集+dfs+欧拉回路)
Description A catenym is a pair of words separated by a period such that the last letter of the firs ...
- Java实现 黑洞数
任意一个5位数,比如:34256,把它的各位数字打乱,重新排列,可以得到一个最大的数:65432,一个最小的数23456.求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不足5位,则 ...
- CICD | Jenkins & Gitlab集成:WebHook触发构建
在上一篇博客中,我们学习了Jenkins的搭建和插件+流水线的基本使用方法,Jenkins极大地提升了部署效率. 最近想学习一下如何集成GitLab webhook,实现进一步解放双手,目标: 推送( ...
- JDBC连接泄露问题的排查过程总结
当前使用的Spring JDBC版本是5.0.0.RC1,HikariCP版本是3.1.0. 今天测试同学反馈在前端页面点击次数多了,就报500错误,数据显示不出来.于是我在后台服务日志中观察发现Hi ...