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

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>

效果图

day8——盒子模型-制作音乐盒相关推荐

HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型第4章 CSS盒子模型_教学设计.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 1 <HTML+CSS+JavaScript网页制作案例教程> 教学设计课程名称: HTML+CSS+JavaSc ...
训练营第四天作业 - 用盒子模型制作卡片
前几天学习了一些HTML标签,并能够熟练的运用,今天又学习了css的浮动和定位,看看今天的作业吧!. 浮动和定位是属于布局的,所以我用浮动把小狗的图片放在了右上角,而那个线则是用盒子模型去掉左右线然后 ...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果一.Bann ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
盒子模型划分网页模块--音乐盒
音乐盒 <div>标签分割为独立的部分实现页面的规划和布局盒子模型有内容,宽高(width height:),内边距(margin),边框(border),外边框(padding ...
【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
文章目录一.Banner 栏测量 1.盒子模型尺寸测量 2.背景测量切图二.Banner 盒子模型代码 1.HTML 标签结构 2.CSS 样式 3.显示效果绘制下图矩形框内容 : 一.Bann ...
【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )
文章目录一.Banner 栏右侧课程盒子测量及样式 1.盒子尺寸测量 2.课程表头部样式 3.列表样式 4.最下方按钮样式二.Banner 版心盒子模型右侧课程栏代码示例 1.HTML 标签结构 ...
【CSS】课程网站网格商品展示模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
文章目录一.网格展示盒子模型测量及样式 1.盒子尺寸测量 2.处理列表间隙导致意外换行问题 3.列表项测量及样式二.网格展示盒子模型代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...

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

1.盒子模型

2.div标记

3.边框属性

4.案例实现音乐盒

day8——盒子模型-制作音乐盒相关推荐

最新文章

热门文章

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

1.盒子模型

2.div标记

3.边框属性

4.案例实现 音乐盒

day8——盒子模型-制作音乐盒相关推荐

最新文章

热门文章

4.案例实现音乐盒