day8——盒子模型-制作音乐盒

最新推荐文章于 2023-04-05 22:32:09 发布

蹦居大蹦居

最新推荐文章于 2023-04-05 22:32:09 发布

阅读量2.1k

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/jumao555/article/details/120436716

版权

1.盒子模型

就是把HTML页面中的元素（内容(content)、内边距(padding)、边框(border)和外边距(margin)构成）看作是一个矩形盒子，里面可以盛装内容。

【demo1】盒子模型基本元素&效果图

2.div标记

英文division的缩写，是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div></div>相当于一个容器，可以容纳段落、标题、图像等各种网页元素。<div>标记中还可以嵌套多层<div>。

【demo2】<div>标记的使用&效果图

<!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>div标记</title>
	<style type="text/css">
    	.one{
				width:450px;
				height:30px;
				line-height:30px;
				background:#FCC;
				font-size:18px;
				font-weight:bold;         /*设置字体加粗*/
				text-align:center;
			}
		.two{
				width:450px;
				height:100px;
				background:#0F0;
				font-size:14px;
				text-indent:2em;        /*设置首行文本缩进*/
			}
    </style>
</head>

<body>
	<div class="one">
    	用div标记设置标题文本
    </div>
    <div class="two">
    	<p>div标记中嵌套的p标记中的文本</p>
    </div>
</body>
</html>

3.边框属性

表1 CSS边框属性
设置内容	样式属性	属性值
上边框	border-top-style：样式
	border-top-width：宽度
	border-top-color：颜色
	border-top：样式宽度颜色
下边框	border-bottom-style：样式
	border-bottom-width：宽度
	border-bottom-color：颜色
	border-bottom：样式宽度颜色
左边框	border-left-style：样式
	border-left-width：宽度
	border-left-color：颜色
	border-left：样式宽度颜色
右边框	border-right-style：样式
	border-right-width：宽度
	border-right-color：颜色
	border-right：样式宽度颜色
样式综合设置	border-style：上边[右边下边左边]	none（默认）、solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线）
宽度综合设置	border-width：上边[右边下边左边]	像素值
颜色综合设置	border-color：上边[右边下边左边]	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border：四边宽度四边样式四边颜色

【demo3】边框属性综合设置&效果图

4.案例实现音乐盒

【example】音乐盒

<!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">
		*{padding:0;margin:0;}/*将页面中所有元素的内外边距设置为0*/
		.all{
				width:500px;
				height:450px;
				border:1px solid #E1E1E1;
				margin:50px auto;
				text-align:center;
			}
		.header{
				font-size:18px;
				font-family:"微软雅黑";
				height:40px;
				line-height:40px;
				border-bottom:1px dashed #E1E1E1;
		
			}
		.text p{
				font-size:14px;
				color:#CCC;
				height:24px;
				line-height:24px;
			}
	</style>
</head>

<body>
	<div class="all">
    	<div class="text">
        	<h2 class="header">無與倫比|演唱會live</h2>
            <p>36557人收听</p>
        </div>
        <div class="image">
        	<img src="imgs/jay.jpeg" alt="無與倫比演唱會live" width=500px/>
        </div>
    </div>
</body>
</html>

效果图

蹦居大蹦居

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
day8——盒子模型-制作音乐盒

1.盒子模型就是把HTML页面中的元素（内容(content)、内边距(padding)、边框(border)和外边距(margin)构成）看作是一个矩形盒子，里面可以盛装内容。【demo1】盒子模型基本元素
复制链接

扫一扫