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 ...
随机推荐
- Chisel3 - util - RRArbiter
https://mp.weixin.qq.com/s/GcNIFkHfa0gW0HKkKvHZEQ 循环优先级(Round Robin)仲裁器. 参考链接: https://github. ...
- 【Linux】文件权限,ssh免密登录
1.文件/文件夹权限 例子: -rw-r--r--. 1 root root 12288 Aug 21 09:50 aliases.db drwxr-xr-x. 2 root root 4096 Au ...
- 【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建
0. 前言 在上一节中,我们创建了一个项目架构,后续的项目都会在那个架构上做补充. 1. Nacos 1.1 简介 Nacos可以用来发现.配置和管理微服务.提供了一组简单易用的特性集,可以快速实现动 ...
- Java实现 LeetCode 539 最小时间差（单位转换）
539. 最小时间差 给定一个 24 小时制(小时:分钟)的时间列表,找出列表中任意两个时间的最小时间差并已分钟数表示. 示例 1: 输入: ["23:59","00:0 ...
- Java实现 蓝桥杯VIP 算法训练 瓷砖铺放
[题目描述]: 有一长度为N(1< =N< =10)的地板,给定两种不同瓷砖:一种长度为1,另一种长度为2,数目不限.要将这个长度为N的地板铺满,一共有多少种不同的铺法? 例如,长度为4的 ...
- java实现平面4点最小距离
已知平面上若干个点的坐标. 需要求出在所有的组合中,4个点间平均距离的最小值(四舍五入,保留2位小数). 比如有4个点:a,b,c,d, 则平均距离是指:ab, ac, ad, bc, bd, cd ...
- PAT 旧键盘打字
旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...
- 密码学DAY1_02
目录 1.1 ASCII编码 1.2 凯撒加密 1.2.1 中国古代加密 1.2.2 外国加密 1.2.3 凯撒位移加密--JAVA代码实现 1.2.4 频度分析法破解恺撒加密 1.3现代常用的加密方 ...
- vs2019离线下载安装包
官方的离线安装说明-->点击打开 1.下载 vs2019引导程序 ,选择你所需的版本下载,我选择了企业版 vs_enterprise__184447765.1558180718.exe 2.设置 ...
- iOS－MapKit的使用笔记
对于地图和定位,苹果公司提供给了两个框架: MapKit:用于地图展示 Core Location :用于地理定位 这次总结MapKit: 同样,在使用MapKit时首先要导入头文件: 与 ...