day3:CSS的引入及盒模型简单入门 20190902
程序员文章站
2022-03-11 14:15:19
...
作业一：实例演示:<iframe>标签的使用
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内链框架</title> </head> <body> <!--内链框架，在当前页面中加载另外一个网页--> <a href="https://www.baidu.com" target="baidu">百度</a> <iframe srcdoc="<h2>网站管理后台</h2>" frameborder="1" width="500" height="500" name="baidu"></iframe> <a href="https://tie.163.com" target="tie">网易跟帖</a> <iframe src="https://www.163.com" frameborder="1" width="500" height="500" name="tie"></iframe> <!--内链框架重要属性name,可以使用A标签的target="name属性值"，在iframe框架中打开网页--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业二：实例演示: css样式设置的优先级
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS的引入及优先级</title><!--css是层叠样式表,用来控制页面布局，以及元素样式和显示！css的优先级谁离元素近，谁优先！-->
<!--css的优先级，内联样式>内部样式>外部样式，内联样式高于内部样式高于外部样式-->
<!--css第一种引入方式，外部样式，将样式声明写在外部的*.css文件内，用link标签进行引入，可以让多个html文件引入-->
<link rel="stylesheet" type="text/css" href="main.css">
<!--css第二种引入方式，内部样式，在html中设置style标签，将样式声明写在style标签内。仅适用于当前html文档中。-->
<style>
p{color:yellow;} /*样式声明*/
</style>
</head>
<body>
<p style="color:red;">这是一个P段落</p> <!--css第三种引入方式，内联样式，样式声明直接写在元素的style属性上，只适用于当前标签。-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业三：实例演示: css的id, class与标签选择器的使用规则
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css基本选择器及优先级</title>
<style>
/*css的基本选择的优先级为，JS>id选择器>类选择器>标签选择器*/
#yellow{
color:yellow; /*id选择器，id=值，同一个页面中，元素的ID属性都是唯一的*/
}
.green{
color:green; /*类选择器，class=值，可以用于设置多个元素的样式*/
}
p{
color:red; /*标签选择器，直接使用html的标签作为css的选择器*/
}
</style>
</head>
<body>
<p class="green" id="yellow">这段话是黄色的</p> <!--选择器优先级，id选择器的优先级最高，这个时候P元素内容的颜色是黄色-->
<p class="green">这段话是绿色的</p><!--选择器优先级，类选择器的优先级其次，这个时候P元素内容的颜色是绿色-->
<p>这段话是红色的</p><!--选择器优先级，标签选择器的优先级最低，这个时候P元素内容是红色-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业四：实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
<!--盒模型是html布局的基础，-->
<style>
.box1{
width:200px;
height:200px;
margin:30px; /*设置外边距30px*/
/*margin:25px 26px;设置上下边距为25px，左右边距为26px*/
/*margin:25px 26px 20px;设置上边距为25px，左右边距为26px，下边距为20px*/
/*padding也可以像margin那样设置简写*/
padding:30px;
background-color:salmon;
/*单独设置边框样式*/
border-top:yellow 3px solid;
border-right:red 3px double;
border-bottom:darkgrey 4px dotted;
border-left:blue 2px dashed;
/*统一设置边框样式*/
/*border:lightseagreen 3px solid;*/
}
.box2{
width:inherit;
height:100px;
background-color: khaki;
border:dimgrey 2px solid;
}
.box3{
width:200px;
height:200px;
margin:10px; /*设置外边距30px*/
/*margin:25px 26px;设置上下边距为25px，左右边距为26px*/
/*margin:25px 26px 20px;设置上边距为25px，左右边距为26px，下边距为20px*/
/*padding也可以像margin那样设置简写*/
padding:20px;
background-color:salmon;
/*单独设置边框样式*/
/*border-top:yellow 3px solid;
border-right:red 3px double;
border-bottom:darkgrey 4px dotted;
border-left:blue 2px dashed;*/
/*统一设置边框样式*/
border:lightseagreen 3px solid;
}
</style>
</head>
<body>
<!--
盒模型有五个样式，宽高背景内外边距和边框
外边距是两个盒子之间的距离，指的是盒子本身到另一个盒子的距离
内边距是盒子内容到边框间的距离
-->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上一篇： 带你玩转PHP命名空间
下一篇： JS对象和简单的事件 20191023