第一章 HTML+CSS(中)

4.域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例

表单

请填写信息

好人坏人

地址信息姓名：
密码：

代码

表单

请填写个人信息

请填写信息

好人

坏人

地址信息
姓名：

密码：

5.CSS学习选择器案例

代码

Title

应用了样式表

样式2

样式3

这个样式引用strong派生选择器

这个会被li strong派生选择器选择

这个会引用ID选择器

这个会使用id选择器这个会使用派生选择器

这个会引用类选择器

这个会使用类选择器这个会使用派生选择器

属性选择器引用为指明值的可以随便写

属性选择器引用指明值的如果写的不一样就执行没指明值的选择器

拯救大兵瑞恩
白蛇传独立宣言

拯救大兵白蛇传肚子大了

css代码（tzy.css）

h2,h1{
/选择器分组/
color: blue;
font-family: 楷体;
font-size: 50px;
}
body{
/没有定义样式的就会引用BODY里的样式（可以理解为继承）/
color: aqua;
}
li strong{
/派生选择器/
color: bisque;
}
strong{
/派生选择器/
color: #FF00FF;
}
p span span{
/派生选择器/
font-family:"楷体";
}
#p{
/id选择器用#使用/
color: aquamarine;
}
#ppd a{
/id选择器和派生选择器一起使用/
color: blueviolet;
}
.pclass{
/类选择器用.使用/
color: darkgreen;
}
.pclass a{
/类选择器和派生选择器一起使用/
color: blue;
}

6.CSS背景样式案例

HTML代码

样式

测试能否被继承

啦啦啦啦啦啦啦啦

测试能否被继承

css代码(tzy.css)

body {
background: blue;
/背景颜色,不能被继承/
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/设置图片/
width: 900px;
height: 900px;
background-size: 500px 500px;
/设置图片大小/
background-repeat: no-repeat;
/设置图片不允许重复/
background-attachment: fixed;
/设置滚动页面的时候图片不滚动/

}

p {
width: 150px;
height: 20px;
background: red;
}

h2 {
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/设置图片/

background-repeat: repeat;
/设置图片允许重复(默认)/
background-repeat: repeat-x;
/设置图片X轴可以重复/
background-repeat: repeat-y;
/设置图片y轴可以重复/
background-repeat: no-repeat;
/设置图片不允许重复/
background-position: right center;
/设置图片起始位置可以写入 100px 100px/

}

7. CSS文本及字体及连接及列表(a标签使用及缩进)

HTML代码

文本及字体及连接及列表

hello tzy

静夜思

床前明月光

疑是地上霜

床前明月光

疑是地上霜

this is web page

This is wEb pAge

tHis is wEb page

this is web page

测试测试测试测试测试测试测试测试测试测试测试测试测试测试

this is web pagethis is web pagethis is web pagethis is web pagethis is web pagethis is web page

拉拉

测试a标签百度

看一看效果

苹果

苹果

苹果

苹果

苹果

看一看效果

苹果

苹果

苹果

苹果

苹果

看一看效果

苹果

苹果

苹果

苹果

苹果

css代码(tzy.css)

h1 {
text-indent: -2em;
/首行退进2字符/
padding: 2em;
/首行缩进2字符/
}

p {
padding: 2em;
}

p1 {

text-transform: capitalize;
/首字母大写/
}

p2 {

text-transform: lowercase;
/全部小写/
}

p3 {

text-transform: uppercase;
/全部大写/
}

p4 {

/阴影效果居左居上清晰度小清颜色/
text-shadow: 20px 20px 0px #FF00FF;
}

.p5 {
width: 40px;
text-wrap: normal;
/自动换行不会拆分英文/
}
/@font-face {/
/font-family: myfont;/
/src: url(字体地址);/
/}/
/div{/
/font-family: myfont;/
/引用自己的下载的字体,用户可以直接使用，安全性还需改进/
/}/
a:link{
color: red;
/未被点击/
text-decoration: none;
/取消下划线/
}
a:visited{
color: blue;
/已被点击/
}
a:hover{
color: darkgreen;
/鼠标划过/
}
a:active{
/正在点击/
color: aqua;
font-size:80px;
/* 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。*/

}

ul li{
/list-style-type: georgian;/
///修改li前的标记图片/
list-style-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976310558&di=4a7378a8e142317c61a6e16bb2f02ee7&imgtype=0&src=http%3A%2F%2Fimg.90sjimg.com%2Finspiration%2F03%2F98%2F74%2F62%2F70%2Fs_236_cl3486OMaFk6pRgdPO43.gif");
/设置li图片/
}

.ul1{
list-style-position: inside;
/离屏幕左边远一点/
}
.ul2{
list-style-position: outside;
/离左边屏幕近一些/
}

8. CSS表格及轮廓案例

HTML代码

表格及轮廓

姓名	年龄	性别
小王	15	男
小王	15	男
小王	15	男

姓名	年龄	性别
小王	15	男
小王	15	男
小王	15	男

文字效果实心框

文字效果双虚线框

css代码(tzy.css)

tb, tb1, tr, th, td {

border: 5px solid blue;
/加边框/
padding: 5px;
/内边距/
}

tb1 {

border-collapse: collapse;
/合并边框/
width: 500px;
height: 500px;
text-align: center;
background-color: aqua;
}

9.iframe引用页面按列(针对target打开方式解释)

HTML代码1

FrameA

FrameA
顶级页面打开
 上级页面打开
 本身页面打开
 新开页面打开

HTML代码2

FrameB

FrameB

<iframe src="framea.html" width="400px"height="400px">

HTML代码3

FrameC

FrameC

HTML代码4

内联框架

10. w3sCss盒子模型（阴影）（div的一些使用）

HTML代码

W3sCSS盒子模型

盒子模型图片

<table border="1" cellpadding="100px"cellspacing="10">

0

边框效果

阴影效果

外边距

Hello

css代码(tzy.css)

td1{

padding-bottom: 100px;
}
#td2{
padding-left: 100px;
}
#td3{
padding-right: 100px;
}
#td4{
padding-top: 100px;
}
p{
border-style: double;
border-top-style: solid;
border-bottom-style: hidden;
border-left-style: dotted;
border-right-color: aqua;
border-bottom-width: 10px;
/border-style 定义了10个不同的非继承的样式边框包括none（空）/
/单边加上下左右就可以设置/
/border-width边框宽度/
/单边加上下左右就可以设置/
/border-color边框颜色 /
/单边加上下左右就可以设置/
border-radius:50px;
width: 100px;
height: 50px;
/设置圆角边框四角弧度/
background-color: bisque;
text-align: center;
/border: 2px solid blue;/
/一般设置方法/
}
.tzy{
color: blue;
background-color: aqua;
width: 100px;
height: 100px;
text-align: center;
box-shadow: 10px 10px 15px #FF00FF;
/阴影效果/
}
.ttzy{
background-color: bisque;
width: 100px;
height: 100px;
margin: 100px;
/margin居上和左为100PX margin也有上下左右属性/
}
.container{
/外边框/
margin: 100px;
}
.bd{
/边框/
border-style: double;
}
.pd{
/内边距/
padding: 100px;
}
.content{
background-color: #FF00FF;
}

11. w3cCss盒子模型应用案例（div布局）

HTML代码

Title

css代码(tzy.css)

* {
margin: 0px;
padding: 0px;
}

.top {
width: 100%;
height: 50px;
background-color: antiquewhite;
}

.top_content {
width: 75%;
height: 50px;
margin: 0px auto;
/上下为0，左右自适应/
background-color: aqua;
}

.body {
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: aquamarine;
}

.body_img {
width: 100%;
height: 400px;
background-color: beige;
background-image: url(http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/t_8L7BYYH7PD`6Z@3F4X]2V8H.png);
}

.body_content {
width: 100%;
height: 1100px;
background-color: chartreuse;
}

.body_no {
width: 100%;
height: 50px;
background-color: coral;
}

.footing {
width: 75%;
height: 400px;
background-color: darkblue;
margin: 0px auto;
}
.footing_content{
width: 100%;
height: 350px;
background-color: forestgreen;
}
.footing_subnav{
width: 100%;
height: 50px;
background-color: mediumturquoise;
}

12. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移

HTML代码

CSS定位（静态，相对，固定，绝对布局）小广告案例

css代码(tzy.css)

position1{

width: 100px;
height: 100px;
background-color: mediumturquoise;
position: relative;
/相对布局(无变化)/
left:2px;
/向左偏移/

}
#position2{
width: 100px;
height: 100px;
background-color: mediumturquoise;
position: absolute;
/绝对布局(无变化)/
left:10px;
/向左偏移/
}
#position3{
width: 100px;
height: 100px;
background-color: forestgreen;
position: fixed;
/固定布局(无变化)/
z-index: 2;
/值大的更靠近用户/
}
#position4{
width: 100px;
height: 100px;
background-color: mediumturquoise;
position: static;
/静态布局(无变化)/
right: 100px;
/向右偏移100px/
left:20px;
/向右偏移/
/偏移无用/
}
#position5{
width: 100px;
height: 100px;
background-color: mediumturquoise;
position: relative;
/相对布局(无变化)/
top: 20px;
/向上偏移100px/
left:20px;
/向左偏移/
z-index: 2;
/值大的更靠近用户/
}
#position6{
width: 100px;
height: 100px;
background-color: coral;
position: relative;
/相对布局(无变化)/
left:10px;
/向左偏移/
z-index: 1;
/值大的更靠近用户/
}
/静态无法被控制其他的都可以/

13. css定位浮动及瀑布流案例

HTML代码

浮动
<link rel="stylesheet" href="tzy.css"type="text/css">

hello word
helloword

text

css代码(tzy.css)

fd {

width: 100px;
height: 150px;
background-color: forestgreen;
float: left;
}

sd {

width: 150px;
height: 100px;
background-color: coral;
float: left;
}

td {

width: 100px;
height: 100px;
background-color: chartreuse;
float: left;
}

container {

width: 300px;
height: 500px;
background-color: beige;
}

text {

clear: both;
/去掉浮动/
}

* {
margin: 0px;
padding: 0px;
}

li {
list-style: none;
}

div1 {

width: 100%;
height: auto;
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}

14. cs2D3D展示基础

HTML代码

动画

初始效果div1

展示div2

展示div3

展示div4

展示div5

展示div6

展示div7

展示div8

css代码(tzy.css)

div{
width:100px;
height:100px;
background-color: deepskyblue;
border: double;
margin: 30px;
}
.div2{
/移动/
transform: translate(200px,100px);/现在chrome有效果/
-webkit-transform: translate(200px,100px);/safari chrome/
-ms-transform: translate(200px,100px);/IE/
-o-transform: translate(200px,100px);/opera/
-moz-transform: translate(200px,100px);/Firefox/
}

.div3{
/*旋转 */
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
-ms-transform: rotate(200deg);
-o-transform: rotate(200deg);
transform: rotate(200deg);
}

.div4{
/缩放(宽度，高度)倍数/
-webkit-transform: scale(1,2);
-moz-transform: scale(1,2);
-ms-transform: scale(1,2);
-o-transform: scale(1,2);
transform: scale(1,2);
}
.div5{
/倾斜度数下x,y轴/
-webkit-transform: skew(20deg,50deg);
-moz-transform: skew(20deg,50deg);
-ms-transform: skew(20deg,50deg);
-o-transform: skew(20deg,50deg);
transform: skew(20deg,50deg);
}
.div6{
/矩阵(利用矩阵算出偏移量)http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵//
-webkit-transform: matrix(1, 0, 0, 1, 200, 100);
-moz-transform: matrix(1, 0, 0, 1, 200, 100);
-ms-transform: matrix(1, 0, 0, 1, 200, 100);
-o-transform: matrix(1, 0, 0, 1, 200, 100);
transform: matrix(1, 0, 0, 1, 200, 100);
}
.div7{
/3d转换/
-webkit-transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
-ms-transform: rotateX(120deg);
-o-transform: rotateX(120deg);
transform: rotateX(120deg);
}
.div8{
/3d转换/
-webkit-transform: rotateY(120deg);
-moz-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
-o-transform: rotateY(120deg);
transform: rotateY(120deg);
}

15. cs动画基础（分列效果可用于做瀑布流）

HTML代码

动画、分列、过度

动画效果

分列效果
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？
我是一直小小鸟，飞呀飞呀飞不高，掉下去摔死怎么办？怎么办？

过度效果展示

posted on 2018-08-22 17:55 咘雷扎克阅读(237) 评论(0) 收藏举报

刷新页面返回顶部

第一章 HTML+CSS(中)

4.域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例

5.CSS学习选择器案例

应用了样式表

样式2

样式3

6.CSS背景样式案例

啦啦啦啦啦啦啦啦

7. CSS文本及字体及连接及列表(a标签使用及缩进)

静夜思

p1 {

p2 {

p3 {

p4 {

8. CSS表格及轮廓案例

tb, tb1, tr, th, td {

tb1 {

9.iframe引用页面按列(针对target打开方式解释)

10. w3sCss盒子模型（阴影）（div的一些使用）

td1{

11. w3cCss盒子模型应用案例（div布局）

12. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移

position1{

13. css定位浮动及瀑布流案例

fd {

sd {

td {

container {

text {

div1 {

14. cs2D3D展示基础

15. cs动画基础（分列效果可用于做瀑布流）

导航