学习笔记之CSS样式（选择器背景字体边框绝/相对、固定位置and分层流等）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/**代表选取所有元素*/
#d6{ font-size:14px;
color:#000;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
}
#d div{color:#3F0;}
span,div{ text-decoration:underline}
div.c1{ text-align:center}
#p1{ width:300px;
height:300px;
background-color:#303;
position:fixed;
right:0px;
bottom:0px;
opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);
box-shadow:100 100 100px #000000;}
.l2{ float:right;}
#z1{ width:200px; height:50px;
background-color:#6FC;
text-align:center;
vertical-align:middle;
line-height:60px;}
.z2{ float:left;
width:40px; height:50px;
background-color:#F09;
color:#000;}
</style>
</head>
<body>
<div id="d" style="border:5px solid #F69;">一代二代三代ASDE
<div>后代一</div>
<div>后代二</div>
</div>
<div><marquee direction="left" style="z-index:+10; position:relative;">滚动效果</marquee></div>
<div><marquee direction="right" style="z-index:-5; position:relative;"><img src="1.jpg"></marquee></div>
<hr />
<span>
<mark>苹果</mark><!--关键字效果，特殊处理，默认黄色，后期用样式来改-->公司发布了IPONE7，耳机遭到了吐槽
</span>
<hr />
<div id="d8" style="font-size:20px">准确控制</div>
<div class="c1">第一个</div>
<div class="c1">第二个</div>
<div class="c1">第三个</div>
<div class="c1">第四个</div>
<div class="c1">第五个</div>
<div class="c1">第六个</div>
<span>这是SPAN1</span>
<span>这是SPAN1</span>
<span>这是SPAN1</span>
<span>这是SPAN1</span>
<span>这是SPAN1</span>
<span>这是SPAN1</span>
<div>
样式的格式：
样式名：样式的值
多个样式之间用分号分隔
选择器的优先级：
标签选择器（span div）>*（所有）
clasa选择器>标签选择器
id选择器>class选择器
ID>class>标签>*
</div>
<div id="d5" style="width:300px; height:200px; background-color:#6F9; position:absolute; left:500px; top:80px; z-index:-2;"><b>测试文字</b></div>
<div id="d6" style="text-decoration:none; font-size:36px;">你好
<a style="text-decoration:none" href="1.jpg" >超链接</a>
</div>
<br>
<div id="n1" style="width:600px; height:600px; background-color:#000; border:5px solid #609; color:#FFF; box-shadow:0 0 50px #000000;">手机电脑第胜女的代价四十开导开导
<div style="width:400px; height:400px; background-color:#6F0; margin:100px 100px 100px 100px; border:1px solid #0CF; box-shadow:0 0 50px #33FF00;">
<div style="width:0px; height:0px;
margin:100px 100px 100px 100px;
border-top:100px solid #0CF;
border-bottom:100px solid #6FF;
border-left:100px solid #F30;
border-right:100px solid #0FF;
box-shadow:0 0 50px #FFFF00;">
</div>
</div>
</div>
<ul style="list-style:outside;">
<li>看起来还好哈哈</li>
<li>看起来还好哈哈</li>
<li>看起来还好哈哈</li>
<li>看起来还好哈哈</li>
</ul>
<div id="p1"></div>
<div id="l1">
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
<div class="l2"><img src="yun.jpg" height="200px"; width="200px";></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="z1">
<div class="z2">一</div>
<div class="z2">二</div>
<div class="z2">三</div>
<div class="z2">四</div>
<div class="z2">五</div>
</div>
</body>
</html>
学习笔记之CSS样式（选择器背景字体边框绝/相对、固定位置and分层流等）的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- HTML+CSS学习笔记 (15) - css样式设置小技巧
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- 前端学习：学习笔记（CSS部分）
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- 微信小程序开发：学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
随机推荐
- linq 起源
在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...
- 201521123107 《Java程序设计》第14周学习总结
第14周-数据库 1.本周学习总结 2.书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语 ...
- JAVA基础第二组（5道题）
6.[程序6] 题目:输入两个正整数m和n,求其最大公约数和最小公倍数. 1.程序分析:利用辗除法. package com.niit.homework1; import java.ut ...
- 201521123063 《java程序设计》第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123099 《Java程序设计》第2周学习总结
1. 本周学习总结 1.Java对我来说难度还是很大.需要花更多时间去学习. 2. 书面作业 1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析String使用什么来 ...
- 12个Sublime Text应用技巧和诀窍
本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...
- java: Multiple encodings set for module chunk test "GBK" will be used by compiler
IDEA 进行编译代码的时候,特别是新项目 特别容易出现 编码错误,但是 File-Encoding中设置的又没有问题,而且maven 是能打包的,就是用 idea 自带的 编译的时候 就会出现提示 ...
- 读取properties属性文件
1.通过类加载器加载 InputStream inputStream = this.getClass().getClassLoader().getResourceAsStream("Chap ...
- JDBC操作数据库之批处理
JDBC开发中,操作数据库需要和数据库建立连接,然后将要执行的SQL语句发送到数据库服务器,最后关闭数据库连接,都是按照这样的操做的,如果按照此流程要执行多条SQL语句,那么就要建立多个数据库连接,将 ...
- 我的Spring学习记录（一）
spring是一个框架,一个我理解为对象的大熔炉,它生产着各种bean,还可以对生产的对象进行加工. 这里有些概念需要理解一下,就是IOC和DI以及AOP,接下来,我们进入主题. spring简介 上 ...