学习笔记之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 ...
随机推荐
- 用webgl打造自己的3D迷宫游戏
用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam 背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路 ...
- HTML canvas绘制椭圆
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Alpha阶段】第四次 Scrum Meeting
每日任务 1.本次会议为第 四次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在禹州楼召开,召开本次会议为20分钟,分析完善接下来的任务: 一.今日站立式会议照片 二.每个人的工 ...
- Swing-JSlider用法-入门
JSlider是Swing中的滑块控件,在交互过程中用户可拖动它来实现数值的调整.它具有3个基本参数,分别为:最小值.最大值和初始值,如果不指定数值,则默认值分别为:0,100,50.滑块的值发生改变 ...
- C++学习笔记——STL（标准模板库）
1.首先.需要学习C++ 模板的概念 2.C++ STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表. ...
- 201521123088《JAVA程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4 ...
- 201521123001《Java程序设计》第2周学习总结
本周学习总结 码云可以很方便地储存我们写好的代码,不用在写代码的时候担心没带U盘 Java中有许多已经写好的具有特定功能的一段独立小程序,不需要每一个函数都自己编写 Java的float型和C语言的不 ...
- 201521123102 《Java程序设计》第2周学习总结
#1. 本周学习总结(1)学习使用码云存储代码(2)掌握了常见数据类型的使用.转换(3)回顾了前面学过的基本语法(4)复习一二三章内容 #2. 书面作业**Q1.使用Eclipse关联jdk源代码,并 ...
- 为bookStore添加权限【动态代理和注解】
前言 目前为止,我们已经学习了动态代理技术和注解技术了.于是我们想要为之前的bookStore项目添加权限控制-.. 只有用户有权限的时候,后台管理才可以进行相对应的操作-.. 实现思路 之前我们做权 ...
- AJAX应用【股票案例】
股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 服务器端分析 首先,从效果图我们可以看见很多股票基本信 ...