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 658 找到 K 个最接近的元素（暴力）
658. 找到 K 个最接近的元素 给定一个排序好的数组,两个整数 k 和 x,从数组中找到最靠近 x(两数之差最小)的 k 个数.返回的结果必须要是按升序排好的.如果有两个数与 x 的差值一样,优先 ...
- Java实现 LeetCode 543. 二叉树的直径（遍历树）
543. 二叉树的直径 给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过也可能不穿过根结点. 示例 : 给定二叉树 1 / \ 2 3 / ...
- Java实现 蓝桥杯VIP 算法提高 分分钟的碎碎念
算法提高 分分钟的碎碎念 时间限制:1.0s 内存限制:256.0MB 问题描述 以前有个孩子,他分分钟都在碎碎念.不过,他的念头之间是有因果关系的.他会在本子里记录每一个念头,并用箭头画出这个念头的 ...
- java实现第八届蓝桥杯平方十位数
平方十位数 题目描述 由0~9这10个数字不重复.不遗漏,可以组成很多10位数字. 这其中也有很多恰好是平方数(是某个数的平方). 比如:1026753849,就是其中最小的一个平方数. 请你找出其中 ...
- hackrf 输出功率测试
使用PortaPack H1的话筒发射功能测试: 144M :8dbm 430M:6dbm 950M:6dbm 1545.42M:0.5dbm 7.42M:18.5dbm 14.2M:16.3dbm
- 分布式ID总结
分布式ID 生成的ID使用场景 几乎所有的业务系统,都有生成一个记录标识的需求,例如:message_id, order_id.这个记录标识往往就是数据库中的唯一主键,数据库上会建立聚集索引(clus ...
- 倍增法求LCA代码加详细注释
#include <iostream> #include <vector> #include <algorithm> #define MAXN 100 //2^MA ...
- java类的加载顺序和实例化顺序（Demo程序）
一.main函数中实例化对象 父类 package com.learn; public class Father { //静态变量 public static int num_1 = 1; //静态代 ...
- Vue中解决新脚手架3创建项目的移动端双击屏幕放大，双手拉动放大的方法
替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...
- 【javascript的那些事】等待加载完js后执行方法
很多时候,你也许会碰到 使用的情景: js文件b.js还没有从服务器端加载到web端,而吧a.js中已经调用了b.js中的方法 实例: 这里是加载echart的时候碰到的具体实例 引入js " ...