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 ...
随机推荐
- 安装xlrd包的时候，总是报错：ERROR: Could not install packages due to an EnvironmentError: HTTPConnectionPool (host='127.0.0.1', port=8888):。。。
安装xlrd包的时候,总是报错:ERROR: Could not install packages due to an EnvironmentError: HTTPConnectionPool (ho ...
- HTML静态页面项目：英雄联盟官网网站 的实现
效果: 源码与素材:链接: https://pan.baidu.com/s/1OuJd1lfEV7mrnf0I6FXm4A 提取码: 5c6j 复制这段内容后打开百度网盘手机App,操作更方便哦
- ActiveMQ 笔记（四）Spring\SpringBoot 整合 Activemq
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Spring 整合Activemq 1.所需jar包 <dependencies> &l ...
- (Java实现) 洛谷 P1091合唱队形
题目描述 NN位同学站成一排,音乐老师要请其中的(N−K)位同学出列,使得剩下的KK位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,-,K1,2,-,K,他们的身 ...
- Java实现 LeetCode 738 单调递增的数字（暴力）
738. 单调递增的数字 给定一个非负整数 N,找出小于或等于 N 的最大的整数,同时这个整数需要满足其各个位数上的数字是单调递增. (当且仅当每个相邻位数上的数字 x 和 y 满足 x <= ...
- Java实现 LeetCode 729 我的日程安排表 I（二叉树）
729. 我的日程安排表 I 实现一个 MyCalendar 类来存放你的日程安排.如果要添加的时间内没有其他安排,则可以存储这个新的日程安排. MyCalendar 有一个 book(int sta ...
- Java实现 蓝桥杯VIP 算法训练 装箱问题
题目描述 有一个箱子容量为V(正整数0≤V≤20000),同时有n个物品(0<n≤30,每个物品有一个体积(正整数). 要求nn个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输入输出格 ...
- Java实现 LeetCode 148 排序链表
148. 排序链表 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3-> ...
- 彻底搞懂 etcd 系列文章（二）：etcd 的多种安装姿势
0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...
- curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to storage.googleapis.com:443
安装nvm的时候, ➜ ~ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 错 ...