通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/

一、结构分析

由图我们可以看到音乐盒的效果右外边框盒子组成，盒子内部又分为两个部分，其中上面部分为标题，下面部分为图片。

二、样式

1.通过外层的大盒子对音乐盒的整体样式进行控制，设置最外层的宽度、高度、边框、文本等样式。
2.设置内部标题文本的样式。

三、准备实现

1、打开dreamweaver2021，新建立一个HTML5格式文档，将标题更改为音乐盒

2、使用HTML开始搭建整体的结构,搭建好结构后将对应的文本内容和图片引入到结构中

3、使用嵌入CSS的方式实现效果：

4、实现完成，完整代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐盒</title>
<style>*{margin: 0;padding: 0;/*初始化总体的边距*/}.box1{/*通过最外层的标签统一设置内部嵌套的<div>标签的宽度、高度、文字居中样式以及最外层边框样式*/width: 220px;  height: 260px;border: 1px solid #BBB;text-align: center;margin: 50px auto;/*设置整体的网页居中效果，50px的四周边距*/}div .title{/*设置h2标题文本的具体样式以及<div>标签的下边线*/height: 40px;border-bottom: 1px #BBB dashed;line-height: 40px;color: #211C1C;}div p{height: 25px;/*设置div的高度*/line-height: 25px;/*设置段落文本的字间距*/color: #211C1C;}
</style>
</head>
<body>
<div class="box1"><div><h2 class="title"> 毕业季|再见青春</h2><p>36557人收听</p></div><div><img src="music.jpg"  alt="music"/></div>
</div>
</body>
</html>

4、最后按快捷键option+fn+f12使用浏览器预览效果

通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/相关推荐

使用html 语言建立一个简单的网页,如何用记事本建立简单的网页(1).doc
第九章网页制作实验一用记事本建立简单的HTML文件 [实验目的] 学会用HTML语言建立一个简单的网页. [实验内容] 建立一个网页,布局自定,包括自我介绍.图片.自己的电子信箱地址等,要求在标 ...
使用HTML建立一个简单的网页
开发过程如下: 1.打开Dreamweaver2021,新建立一个HTML5格式的文档 2.而后在<body>双标签内部嵌套使<h2>标题标签创建标题 <body> ...
初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
ESP8266（NodeMCU）建立最简单的网页
通常承担网络服务器工作的设备都是运算能力比较强大的服务器电脑.ESP866-NodeMCU虽然也能实现网络服务器的一些功能,但是毕竟它的运算能力是无法与那些昂贵的服务器电脑相媲美的,因此ESP82 ...
bat 删除文件_利用电脑文本文档建立一个简单方便的删除文件的小程序
删除文不需要的文件或者资料,是日常工作中必定会遇到了. 各种的杀毒软件或者防护软件都具备删除文件的功能,例如360.腾讯电脑管家.这些操作起来其实也不是太麻烦! 不过呢!今天来和大家分享一个更简单的方 ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
github密码格式_如何使用GitHub构建一个简单的网页（不用框架版本）
1.申请GitHub账号进入GitHub官网,点击右上角的Sign up进行注册, 注册很简单,只要填写好用户名,邮箱,密码就行(已注册的用户名,邮箱不能再进行注册) 下面有一个你是人类的验证(照着 ...
Hibernate学习——建立一个简单的Hibernate项目
最近老师让做个web小应用,大三的时候学习过一点J2EE的东西,也做过一些web相关的XXX管理系统,都是用servlet,jsp这些完成的,虽然勉强能够完成任务,但其中各种代码掺杂在一起,不好看而且 ...
python3一个简单的网页抓取
python3一个简单的网页抓取都是学PYTHON.怎么学都是学,按照基础学也好,按照例子增加印象也好,反正都是学 import urllib import urllib.requestdata={ ...

通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/

一、结构分析

二、样式

三、准备实现

通过Dreamweaver建立一个简单的网页音乐盒模型效果/css/h5/相关推荐

最新文章

热门文章