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 ...
随机推荐
- Rocket - diplomacy - TransferSizes
https://mp.weixin.qq.com/s/Sf0owQxWzxacVvykJZ5oTQ 介绍TransferSizes的实现. 1. 基本定义 从min到max的闭合 ...
- LeetCode 73，为什么第一反应想到的解法很有可能是个坑？
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode第42篇文章,我们来看看LeetCode第73题矩阵置零,set matrix zeroes. 这题的难度是Mediu ...
- Ondemand和Interactive gonernor工作逻辑简述
ondemand 简述: 1.采样时间:sampling_rate,单位us 2.cpu usage是仅统计最新1us的一个smaple周期,以%体现cpu busy程度. 3.一般情况下,next频 ...
- Java实现 LeetCode 827 最大人工岛（DFS+暴力模拟）
827. 最大人工岛 在二维地图上, 0代表海洋, 1代表陆地,我们最多只能将一格 0 海洋变成 1变成陆地. 进行填海之后,地图上最大的岛屿面积是多少?(上.下.左.右四个方向相连的 1 可形成岛屿 ...
- Java实现 LeetCode 720 词典中最长的单词（字典树）
720. 词典中最长的单词 给出一个字符串数组words组成的一本英语词典.从中找出最长的一个单词,该单词是由words词典中其他单词逐步添加一个字母组成.若其中有多个可行的答案,则返回答案中字典序最 ...
- Java实现 LeetCode 432 全 O(1) 的数据结构
432. 全 O(1) 的数据结构 实现一个数据结构支持以下操作: Inc(key) - 插入一个新的值为 1 的 key.或者使一个存在的 key 增加一,保证 key 不为空字符串. Dec(ke ...
- Java实现 LeetCode 151 翻转字符串里的单词
151. 翻转字符串里的单词 给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: "the sky is blue" 输出: "blue is sky th ...
- Java实现中值问题
中值问题是求一个n个数列表中某一数组下标k,它要求该下标元素比列表中的一半元素大,又比另一半元素小,这个中间的值被称为中值. 使用Lomuto划分算法思想,此处引用<算法设计与分析基础>第 ...
- Linux权限管理命令chown、chgrp、umask详解
命令chown详解 命令chown,所在路径为: 可以看到,这个命令的路径为:/usr/bin/chown ,所以它的执行权限是所有用户 命令的基本功能是改变文件或目录的所有者(只有root可以进行, ...
- surface go重新做系统
此教程适用于使用U盘恢复介质来恢复Surface Go二合一设备系统SurfaceGo_BMR_45_64_1.011.2.zip 大致两个步骤 一.制作U盘恢复介质 下载适用于自己平板的恢复镜像文件 ...