目录
demo17-div与span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div与span</title>
</head>
<body>
<!--
块标签: 可以将网页划分为多块, 进行布局
分类:
行级标签: div 特点:div标签独占一行, 如果有多个div标签, 多行显示
行内元素: span 特点:span标签, 多个元素也会在一行展示
使用场景:
div 页面布局
span 页面布局,消息提示框
-->
<div style="background-color: yellow;">这是我的div01</div>
<div style="background-color: greenyellow;">这是我的div02</div>
<span style="background-color: skyblue;">我的span01~~~~~~~~~~~~~~~~~~~~~</span>
<span style="background-color: pink;">我的span02</span>
</body>
</html>
demo18-css入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS入门案例</title>
<style>
/*
修饰h2标签, 设置字体的颜色和大小
*/
h2 {
color : palegreen;
font-size : 20px;
}
</style>
</head>
<body>
<!--
css入门案例
h2标签, 里面添加内容, 使用css修饰h2标签,设置字体颜色及字体大小
思考问题:
1, css写在哪里
写在head标签中, 设置一个style标签,
2,css如何编写
先编写选择器 {属性名1:属性值1; 属性名2:属性值2;}
-->
<h2>我的css入门案例</h2>
</body>
</html>
demo19-引入css的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2, 方式二, 内部式, 200x200, 蓝色 -->
<style>
#d2 {
height: 200px;
width: 200px;
background-color: blue;
}
</style>
<!-- 3, 方式三, 外部式: 200*200, 黄色
link 引入css的标签
rel 关系, stylesheet样式表
type 文件类型文本类型的css文件
href 编写地址, 引入具体的css文件
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
需求
1, 方式一,行内式: 200*200px, 红色
2, 方式二, 内部式, 200x200, 蓝色
3, 方式三, 200*200, 黄色
-->
<!-- 1, 方式一,行内式: 200*200px, 红色 -->
<div style="height: 200px; width: 200px; background-color: red;">我的第1个div</div>
<!-- 2, 方式二, 内部式, 200x200, 蓝色 -->
<div id="d2">我的第2个div</div>
<!-- 3, 方式三, 外部式: 200*200, 黄色 -->
<div id="d3">我的第3个div</div>
</body>
</html>
demo20-css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1,使用标签选择器(元素选择器), 选择所有的div标签, 设置宽度和高度都为100px, 设置背景为黄色 */
div {
width : 100px;
height : 100px;
background-color: yellow;
}
/* 2,使用id选择器, 选择id为div1的元素, 设置宽度高度为200px, 背景色为红色 */
#div1 {
width : 200px;
height : 200px;
background-color: red;
}
/* 3,使用类选择器, 选择所有的class属性为 mystyle的元素, 设置宽度和高度为300px, 背景色为蓝色 */
.mystyle {
width : 300px;
height : 300px;
background-color: blue;
}
/* 4,使用派生选择器, 选择div下的p标签, 设置边框, 粉色背景色 */
div p {
border: 4px black dashed;
background-color: pink;
}
/* 验证id选择器和类选择器的优先级 */
#div3 {
width : 100px;
height : 100px;
background-color: gold;
}
</style>
</head>
<body>
<!--
需求:
1,使用标签选择器(元素选择器), 选择所有的div标签, 设置宽度和高度都为100px, 设置背景为黄色
2,使用id选择器, 选择id为div1的元素, 设置宽度高度为200px, 背景色为红色
3,使用类选择器, 选择所有的class属性为 mystyle的元素, 设置宽度和高度为300px, 背景色为蓝色
4,使用派生选择器, 选择div下的p标签, 设置边框, 粉色背景色
注意事项:
优先级问题
id选择器 > 类选择器 > 元素选择器
-->
<div id="div1">111</div>
<hr/>
<div>222</div>
<hr/>
<div class="mystyle" id="div3">333</div>
<hr/>
<div class="mystyle">444</div>
<hr/>
<div class="mystyle">555</div>
<hr/>
<div>666
<p>div666中p元素</p>
</div>
<p>外面的p元素</p>
</body>
</html>
demo21-css样式-边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1)第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色; */
#p1 {
border-style: dotted;
border-width: 1px;
border-color: red;
}
/* 2)第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色; */
#p2 {
border-style: dashed;
border-width: 2px;
border-color: blue;
}
/* 3)第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色; */
#p3 {
border-style: solid;
border-width: 3px;
border-color: yellow;
}
/* 4)第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色; */
#p4 {
border-style: double;
border-width: 4px;
border-color: pink;
}
/* 5) 采用简化写法设置边框 1px 单实线 金色 */
#p5 {
border: 1px solid gold;
}
</style>
</head>
<body>
<!--
css样式-边框(border)
就是给html选中的元素设置边线
属性:
border-style: 设置线条样式 (dotted点实线, dashed虚线, solid单实线, double双实线)
border-width: 设置线条粗细 (10px, 20px)
border-color: 设置线条颜色
简写:
border: 1px solid red; (推荐)
需求:创建5个p标签.
1)第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色;
2)第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色;
3)第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色;
4)第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色;
5) 采用简化写法设置边框 1px 单实线 金色
-->
<!-- 按住alt键并且多行点击,可以同时多行输入 -->
<p id="p1">这里是p1</p>
<p id="p2">这里是p2</p>
<p id="p3">这里是p3</p>
<p id="p4">这里是p4</p>
<p id="p5">这里是p5</p>
</body>
</html>
demo22-css样式-尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1 {
border: solid 1px black;
width: 30%;
height: 400px; /* 高度设置百分比没用 */
}
</style>
</head>
<body>
<!--
css样式-尺寸
属性
width:宽度 (1: 100px 2: 20%)
height:高度 (100px) -> 这里高度只推荐设置为值, 百分比不合理, 因为浏览器上下可以拖动
需求:
创建一个div, 设置边框为单实线, 线条为1px
设置该div尺寸为 300x400px
-->
<div id="d1">我的div元素</div>
<d2 id="d2" border=>我的div元素</d2>
</body>
</html>
demo23-css样式-display转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
}
span {
border: 1px solid red;
}
</style>
</head>
<body>
<!--
display转换
属性: diplay
取值:
1)inline 行级 → 行内 div → span
2)block 行内 → 行级 span → div
3)none 消除指定元素 (原来的位置也一起消失)
补充:
设置style= "visibility: hidden" 时, 可以隐藏但不取消位置
需求:
1, 第1个div转换成行内
2, 第1个span转成行级
3, 第2个div消失 (原来的位置也一起消失)
4, 第3个div隐藏 (位置不消失)
-->
<div style="display : inline">这是第1个div元素</div>
<span style="display : block">这是span标签</span>
<div style="display : none">这是第2个div元素</div>
<div style="visibility: hidden;">这是第3个div元素</div>
<div>这是第4个div元素</div>
</body>
</html>
demo24-css样式-font
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
color：颜色，字体颜色
font-size:字体的大小,像素px
扩展:了解
font-family:字体,幼圆,宋体,楷体...
text-decoration: none 取消文字上的下划线
-->
<a href="#" style="color: red;"> 我的第一个超链接</a> <br/>
<a href="#" style="font-size: 20px"> 我的第二个超链接</a> <br/>
<a href="#" style="font-family: 楷体;"> 我的第三个超链接</a> <br/>
<a href="#" style="text-decoration: none;"> 我的第四个超链接</a> <br/>
</body>
</html>
demo25-css样式-背景色及背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!--
background-color: 设置背景色
background-image: url(背景图片链接)
-->
<div style="background-color: cadetblue;"> </div>
<hr>
<div style="background-image: url(img/3.jpg);"></div>
</body>
</html>
demo26-css样式-浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one {
border: 1px solid red;
width: 50px;
height: 50px;
float: left;
}
#two {
border: 1px solid blue;
width: 100px;
height: 100px;
float: right ;
}
#three {
border: 1px solid green;
width: 150px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<!--
1.准备工作
div1 设置样式 50 50 red
div2 设置样式 100 100 blue
div3 设置样式 150 150 green
2.设置浮动
1)让div1左浮动
2)让div2和div3也左浮动
3)让div2右浮动 让div1 和div3不浮动
4)让div2右浮动 让div1左浮动 div3也左浮动
-->
<!-- 下面使用 div*3#one.mystyle 的简写方式生成3个有id和class的div -->
<div id="one" class="mystyle"></div>
<div id="two" class="mystyle"></div>
<div id="three" class="mystyle"></div>
</body>
</html>
demo27-css样式-清除浮动影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#one {
border: 1px solid red;
width: 50px;
height: 50px;
float: left;
/* clear: right; */
}
#two {
border: 1px solid blue;
width: 100px;
height: 100px;
float: left ;
clear: left; /* 还可以用both清除全部浮动 */
}
</style>
</head>
<body>
<!--
clear
清除div2的左浮动, 效果为将div2降下
注意: 被影响的元素, 要由元素自己清除影响
-->
<div id="one" class="mystyle"></div>
<div id="two" class="mystyle"></div>
</body>
</html>
demo28-css盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px red solid ;
/*
可以简写为 margin: 数值列表...
4个值: 顺时针 上 / 右 / 下 / 左
3个值: 上 / 中 / 下
2个值: 上下 / 左右
1个值: 四边 */
/* margin-top: 100px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px; */
margin: 200px;
/* border-top: 8px solid blue; */
border: 1px solid blue;
/* padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px; */
padding:20px;
}
</style>
</head>
<body>
<!--
需求:
1, 创建div 使用盒子模型设置外边距, 边框, 内边距
-->
<div>我的元素内容</div>
</body>
</html>
demo29-css案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1, 清除body的margin 默认有8px的边框 */
body {
margin: 0px;
}
/* 2, 设置 head 和 footbar的 div */
.head, .footbar {
width: 1519px;
height: 100px;
background-color: #7ecef3;
}
/* 3, 设置main */
.main {
width: 1519px;
height: 600px;
}
/* 设置leftbar */
.leftbar {
width: 400px;
height: 600px;
background-color: #89c997;
float: left;
}
.content {
width: 719px;
height: 600px;
background-color: #2ba2a8;
float: left;
}
.rightbar {
width: 400px;
height: 600px;
background-color: #89c997;
float: left;
}
.box {
width: 1519px;
height: 800px;
}
/* 设置div的字体 */
div {
color: white;
font-size: 40px;
text-align: center;
font-family: 微软雅黑;
}
</style>
</head>
<body>
<!-- 1,编写第一个div class box -->
<div id="d1" class="box">
<!-- 2,编写第二个div head -->
<div id="d2" class="head">head</div>
<!-- 3,编写第三个div main -->
<div id="d3" class="main">
<!-- 3.1, leftbar -->
<div id="d4" class="leftbar">leftbar</div>
<!-- 3.2, content -->
<div id="d5" class="content">content</div>
<!-- 3.3, rightbar -->
<div id="d6" class="rightbar">rightbar</div>
</div>
<!-- 4, 编写最后一个div -->
<div id="d7" class="footbar">footbar</div>
</div>
</body>
</html>
扫一扫
6586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
