学习笔记之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 ...
随机推荐
- less和scss
一.less基础语法 1.声明变量:@变量名:变量值: 使用变量:@变量名; 2.混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 ...
- 【1414软工助教】团队作业6——展示博客（Alpha版本） 得分榜
题目 团队作业6--展示博客(Alpha版本) 作业提交情况情况 为所欲为 团队没有提交,其余都按时提交. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2: ...
- 201521123108 《Java程序设计》第八周学习总结
1. 本周学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 答:主要是应用到了list中的add和remove等方法,dan'sh但是这道题主要的考察点在于li ...
- 201521123031 《Java程序设计》第4周学习总结
---恢复内容开始--- 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)父类只能有一个,即单继承,子类继承父类的全部成员(属性和方法 ...
- 201521123092《java程序设计》第二周学习总结
1. 本周学习总结 (1)学习了string的类型: (2)学习了java数组的使用: (3)学习了容器的概念: (4)解决一些pta编程时遇到的困难. 2. 书面作业 (1)使用Eclipse关联j ...
- NA笔记
常用配置命令 mstsc 远程桌面控制指令(在运行中输入) cmd 运行 copy running-config start 正在启动文件 copy running-config startup-ci ...
- linux 编辑文件时 E45: 'readonly' option is set (add ! to override) 隐藏属性 chattr lsattr
在改一个系统当中的文件参数时, vim config.php 时,提示 E45: 'readonly' option is set (add ! to override) ,同时不能编辑不能删除不能设 ...
- JSP-页面跳转大全
转自:http://blog.sina.com.cn/s/blog_8c38b8b701013zzz.html (1). forward()方法 使用到javax.servlet.RequestDis ...
- angular-bootstrap ui-date组件问题总结
使用angular框架的时候,之前用的时间控件是引入My97DatePicker组件实现的,但是因为 1.My97DatePicker样式不太好看以及偶尔会出现底部被遮盖的情况.点击不可编辑input ...
- 新书发布《每天5分钟玩转Docker容器技术》
后台不时收到关于纸质版教程书籍的询问,今天终于可以给大家一个交代了. <每天5分钟玩转Docker容器技术>现已在各大书城上架. 比较了一下,目前京东上最实惠:https://item.j ...