css简单整理
style1.css
/*统一设置h1、h2、a标签的样式*/
h1,h2,a{
color: aqua;
font-size: 50px;
}
/*如果h1、h2没有上面的单独设置样式那么就会继承body所设的样式*/
body{
color: brown;
} /*设置列表标签的strong标签的内容*/
/*派生*/
li strong{
color: blue;
}
/*strong不会夫覆盖li strong的样式*/
strong{
color: blueviolet;
}
/*通过id改属性前面加#*/
#pid{
color: cadetblue;
}
/*派生和id的结合更改a标签的内容*/
#pid a{
font-size: 20px;
color: darkgoldenrod;
}
/*类选择器和派生结合*/
/*类之前加.*/
.dclass p{
color: red;
}
/*属性选择器*/
[title]{
color: chartreuse;
}
[title=b]{
color: darkgreen;
}
input[type="submit"]{
width:120px;
height: 120px;
margin-left:35px;
}
test1.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/style1.css" rel="stylesheet" type="text/css"> </head>
<body> <h1>h1的样式</h1>
<h2>h2的样式</h2>
<a>a的样式</a>
<p><strong>p的样式</strong></p>
<ul>
<li><strong>li的样式</strong></li>
</ul>
<p id="pid">我有id<a href="http://www.baidu.com">百度一下</a></p> <div class="dclass">
<p>div中的p标签样式</p>
</div>
<p title="a">我的title是a</p>
<p title="b">我的title是b</p> <form>
<input type="submit" value="提交">
</form>
</body>
</html>
效果：
style2.css
body{
/*background-color: darkgray;*/
background-image: url("../img/13.jpg");
background-repeat: no-repeat;/*设置图片是否允许重复*/
background-position: center top;/*图片位置、从哪里开始显示*/
background-attachment: scroll;/*随着鼠标滑轮滚动图片也滚动*/
/*background-size: 1920px 1080px;!*设置背景图大小*!*/
/*background-position: 0px 0px;!*左上角从(0,0)开始显示*!*/
}
p{
color: chartreuse;
background-color: blueviolet;
width: 160px;
padding: 10px;/*内边框*/
}
test2.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>测试背景是否可被继承(内边框效果)</p> <p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p>
<p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p>
<p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p><p>测试滚动</p> </body>
</html>
style3.css
p{
text-align: center;/*对齐方式*/
}
h1{
text-indent: 47.5%;/*缩进*/
}
#pid1{/*首字母大写*/
text-transform: capitalize;
}
#pid2{/*全大写*/
text-transform: uppercase;
}
#pid3{/*全变小写*/
text-transform: lowercase;
}
h4{
text-shadow: 100px 1px 1px chartreuse;/*距离实体位置：左、上、大小、颜色*/
}
h3{
width: 300px;
text-wrap: normal;/*自动换行*/
font-size: 30px;/*设置字体大小*/
font-family: "Calibri Light ";/*设置字体样式*/
}
/*@font-face {!*下载字体*!*/
/* font-family: myfont;*/
/* src:url("");*/
/*}*/
test3.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="../css/style3.css" rel="stylesheet">
</head>
<body>
<P>对齐测试</P>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<p id="pid1">Hello1 world</p>
<p id="pid2">Hello2 world</p>
<p id="pid3">Hello3 world</p>
<h4>阴影测试</h4>
<h3>this is my first good this is my first good this is my first good this is my first good this is my first good</h3>
</body>
</html>
结果：
style4.css
a:link{/*未被访问的链接*//*注意清除缓存*/
color: chartreuse;
font-size: 30px;
text-decoration: none;/*去掉超链接文字下方的下划线*/
}
a:visited{/*访问过*/
color: blue;
font-size: 30px;
text-decoration: none;
}
a:hover{/*鼠标位于链接上方*/
color: blueviolet;
font-size: 30px;
text-decoration: none;
}
a:active{/*鼠标点击链接的时候*/
color: red;
font-size: 30px;
text-decoration: none;
}
li{
/*list-style-type: circle;!*空心圆*!*/
/*list-style-type: decimal;!*数字*!*/
list-style-image: url("../img/15.png");
}
ul.ul1{
list-style-position: outside;
}
ul.ul2{
list-style-position: inside;
}
test4.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="../css/style4.css">
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<p>list-style-position: outside</p>
<ul class="ul1"> <li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
<p>list-style-position: inside</p>
<ul class="ul2"> <li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
</body>
</html>
结果：
鼠标放在百度一下：
点击之后是另一种颜色，但是由于会跳转就不截图了
style5.css
#tb,tr,th,td{
border:3px solid blue;
text-align: center;
}
#tb{
width: 400px;
height: 400px;
border-collapse: collapse;/*合并双边框*/
/*background-color: darkgoldenrod;*/
}
#tb tr.tc,th{
padding: 5px;
background-color: aquamarine;
}
p{
outline: blue;
outline-style: dotted;
outline-color: aqua;
outline-width: 5px;
width: 200px;
}
#did{
background-color: blue;
width: 200px;
height: 200px;
/*position: relative;!*相对布局*!*/
position: absolute;/*绝对布局不会覆盖数字*/
/*position: fixed;!*固定布局，不随滑轮滑动而变化*!*/
/*position: static;!*静态布局left和top不起作用*!*/
left: 50px;
top: 90px;
z-index:;
}
#di{
background-color: aqua;
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 280px;
z-index:;/*哪个数值大，哪个覆盖，数值小的被覆盖*/
}
test5.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td>Alice</td>
<td>12</td>
<td>女</td>
</tr>
<tr class="tc">
<td>Bob</td>
<td>15</td>
<td>男</td>
</tr>
<tr >
<td>Alice</td>
<td>12</td>
<td>女</td>
</tr>
<tr class="tc">
<td>sary</td>
<td>12</td>
<td>女</td>
</tr>
</table> <p>轮廓</p> <div id="did"> </div>
<script>
for(var i=0;i<100;i++){
document.write(i+"<br>");
}
</script>
<div id="di"> </div>
</body>
</html>
结果：
style6.css
#d1{
background-color: blue;
width: 100px;
height: 150px;
float: left;
}
#d2{
background-color: red;
width: 150px;
height: 100px;
}
#d3{
background-color: greenyellow;
width: 100px;
height: 100px;
}
#d4{
width: 100px;
height: 50px;
background-color: blueviolet;
/*clear:left;*/
}
#d{
background-color: aquamarine;
width: 250px;
height: 300px;
float: left;
}
test6.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/style6.css" type="text/css">
</head>
<body>
<div id="d"> <div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4">hello world</div>
</div> </body>
</html>
效果：
style7.css
#did{
width: 100px;
height: 100px;
background-color: blueviolet;
}
/*#did{*/
/* !*transform: translate(100px,100px);!*向右方和下方移动位置*!*!*/
/* !*-moz-transform: translate(100px,100px);!*火狐浏览器*!*!*/
/* transform: rotate(200deg);!*旋转200度*!*/
/* -moz-transform: rotate(200deg);!*火狐浏览器*!*/
/* transform: scale(1,2);!*长和宽放大倍数*!*/
/* -moz-transform: scale(1,2);*/
/*transform: skewX(20deg);!*绕x轴旋转20度*!*/
/*transform: skewY(20deg);*/
/*-moz-transform: skewX(20deg);*/
/*-moz-transform: skewY(20deg);*/
/*}*/
#did{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: height 2s,width 2s ,transform 2s;
-moz-transition: width 2s ,height 2s ,-moz-transform 2s;
/*延时执行*/
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari 和 Chrome */
-o-transition-delay: 2s; /* Opera */
}
#did:hover{/*鼠标放在上面之后的操作*/
width: 200px;
height: 200px;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
test7.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link href="../css/style7.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="did"> </div>
</body>
</html>
效果是个鼠标放在div区域的动画
style8.css
.box_img img{
width: 250px;
height: auto;
margin: 2px 0;
}
body{
background-color: aquamarine;
}
/*.box img{*/
/* width: 250px;*/
/* margin: 2px 0;*/
/*}*/
#container{
column-width: 250px;
-moz-column-width: 250px;
-moz-column-gap:2px; /* Firefox */
-webkit-column-gap:2px; /* Safari 和 Chrome */
column-gap:2px;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;/*边框*/
box-shadow: 0 0 5px #cccccc;
border-radius: 5px;
}
*{
margin: 0px;/*外边距*/
padding: 0px; /*内边距 */
}
test8.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pool</title>
<link rel="stylesheet" type="text/css" href="../css/style8.css">
<!-- <script src="js/app.js"></script>-->
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="../img/1.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/1.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="../img/2.jpeg">
</div>
</div>
</div> </body>
</html>
效果：
瀑布流效果
之后的用到在补充吧
css简单整理的更多相关文章
- 哪些CSS是可以被继承的--简单整理
那些CSS是可以被继承的--简单整理1.文本相关属性是继承的:font-size,font-family,line-height,text-index等2.列表相关属性是继承的:list-style- ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 转载：.NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- .NET Web开发技术简单整理 转
.NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...
- css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器
css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论 前端开发最要命的事就是处理浏览器的兼容性问 ...
- css3 calc()：css简单的数学运算-加减乘除
css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- MYBATIS 简单整理与回顾
这两天简单整理了一下MyBatis 相关api和jar包这里提供一个下载地址,免得找了 链接:http://pan.baidu.com/s/1jIl1KaE 密码:d2yl A.简单搭建跑项目 2.进 ...
- CSS精心整理的面试题
CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...
随机推荐
- Java-POJ1002-487-3279(含c++代码)
Java 的读入还不熟练,解决不了空行的问题,还是只能用c++ A掉,唉~ 之后要把这个坑补掉 解决了,开心(*^▽^*)以下是AC的Java代码 以下是C++代码 #include<cstdi ...
- 2019新生赛 %%%xxh
笔记.md ...
- Python 特殊列表操作记录
1.列表中的NaN数据处理 由于在Excel中筛选数据时,会出现NaN这种数据,所以需要将其删除掉,处理函数如下: 由于NaN数据类型与其他数据类型不一样,所以需要需要根据类型将其去除掉. 2列表关于 ...
- GEE引擎假人系统自定义教程
现如今传奇游戏玩家数量日渐减少.为了给服务器增加人气,很多GM在服务端中增加了自动登录和自动打怪的假人系统.由于该系统登录的假人可以自动练功,自动攻城和实现简单的对话.完全可以做到以假乱真的地步!所以 ...
- Docker 上安装、启动 MySQL
在docker仓库中搜索mysql的镜像: docker search mysql ; 下载镜像,这里我们安装 5.7 版本 docker pull mysql:[TAG]; 不写TAG默认拉取最新版 ...
- （原创）SoapUI学习（2）- POST请求
1.新建Project,右键Projects->New REST Project,可以不填直接点击OK,之后通过rename重命名.(如果这里添加URL,则直接达到第三步的图) 2.右键新建的工 ...
- Springmvc-crud-04错误（路径变量）
错误: 原因:接收不到restful风格请求的参数(id值),需要添加路径变量注解 @RequestMapping(value="/book/{id}",method=Reques ...
- Vim常用按键大全
Vim完全可以用键盘进行操作.本文将常用的按键归纳总结. 第一部分:一般模式可用的按钮,如光标移动.复制粘贴.查找替换等 移动光标的方法 h, j, k, l 光标向左,下,上,右移动 Ctrl + ...
- 初识HttpRunner
一.背景 前段时间接触到HttpRunner自动化测试框架,发现对测试人员代码能力要求极低,用户只需准备好用例脚本即可发起测试,非常方便,故记录一下. 二.安装 运行环境 HttpRunner框架基于 ...
- 关于原生，webapp，hybird(混合)
链接:https://www.jianshu.com/p/839748d571b2 链接2:https://www.jianshu.com/p/6d5f32aa5dda