动手实践，使用div盒子模型设计一个播放器效果/动手实践

noahsark747

已于 2022-04-14 17:17:36 修改

阅读量3.9k

点赞数 15

文章标签： css3 css html

于 2022-01-30 20:31:30 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122755632

版权

题目效果

在这里插入图片描述

执行代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动手实践</title>
	<style>
		*{
     
			margin: 0;
			padding: 0;
		}
		.box1{
     
			width: 500px;
			height: 500px;
			background-image: linear-gradient(to bottom, 
				rgb(79,48,89) 20%, rgb

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

noahsark747

关注关注

15
点赞
踩
52

收藏

觉得还不错? 一键收藏
6
评论
动手实践，使用div盒子模型设计一个播放器效果/动手实践

题目效果执行代码<!doctype html><html><head><meta charset="UTF-8"><title>动手实践</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 500px; height: 500px; background-image: linear-gradient(to
复制链接

扫一扫

HTML5音乐播放器界面特效.zip

07-04

HTML5音乐播放器界面特效是一款播放暂停，进度条的实时监听，支持触摸，拖拽等。

前端学习——css盒子模型简单布局

x1037490413的博客

03-04

2521

<html> <head> <title>盒子模型简单布局</title> <meta charset="UTF-8"/> </head> <style type="text/css"> div{ width: 300px; height:

6 条评论您还未登录，请先登录后发表或查看评论

音乐盒播放器图标html+css前端

最新发布

weixin_44788552的博客

03-31

513

音乐盒”可以看做一个大盒子，用<div>标签进行定义。大盒子的上面为文本内容，可以在<div>标签中嵌套<h2>和<p>标签来实现；大盒子下面为图像，通过在<div>标签中嵌套<img/>标签来实现。首先为最外层的大盒子添加宽高、渐变背景、圆角样式，然后为嵌套的第二个盒子添加阴影、渐变背景样式，最后制作播放背景、白色圆形背景和三角图标。

HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)

芝麻的博客

02-13

3131

黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章：播放器图标-课后习题参考代码

css背景相关属性和盒子

xuxunjy的博客

08-26

454

Css颜色 RGB(red greed bule)（0.0.256）#0010ff Css中的颜色表示方式预定义颜色：bule。Red。black 16进制颜色：#0f0f0f RGB颜色（128.0.0）全红 RGBA在RGB的基础上又添加了表示透明度的alpha HSL：用色调，饱和度，和透明度三个分量来表示颜色 HSL：在HSL的基础上又增加了表示透明度的alpha <p style="color: aqua;">直接定义颜色，预定义颜色</p> <p

CSS系列之盒子模式(五)

dapyandxpy的博客

06-12

336

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示盒子模型</title> </head> <body><div style="backgroun

盒子模型划分网页模块--播放器图标

weixin_66529571的博客

02-04

3591

播放器图标三角形模型原码： <style> .triangle{ width:0; height:0; border:40pxsolidred; border-top-color:black; border-bottom:none; border-left-color:transparent; border-right-...

HTML练习之路15(播放器效果)

qq_62714412的博客

01-26

1085

本次要完成如图所示的拼图效果：通过不同线性渐变的数量可以确定最少需要三个容器，由于本题没有任何素材，所以白色圆形和黑色三角形都需要自制，所以我们的框架可以是五个盒子依次包裹，并且在制定盒子时依次定义类名，方便在CSS中针对具体某个<div>进行操作： <body> <div class="father"> <div class="son1"> <div class="son2"> <div class="son

HTML5网页设计基础——播放器图标

shengming_tutou的博客

02-03

6144

案例：参考代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin: 0; padding: 0; } .wai{ margin: 50px auto; width: 300px; height: 253px; border:.

css的背景属性及盒模型

lkzy12345的博客

03-23

360

border:边框宽度边框风格边框颜色; 边框：border,网页中很多修饰性线条都是由边框来实现的。边框宽度：border-width: 边框颜色：border-color :边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)，也可以单独针对某一边 border-bottom:下边框 border-left...

网页设计实训教程ppt课件（包括div/css）

12-15

每个HTML元素都可视为一个盒子，包含内边距（padding）、边框（border）、外边距（margin）和实际内容。通过调整这些属性，我们可以精确控制元素的大小和位置。 6. **布局技术**：包括流体布局、响应式设计和...

DivCSS.rar_ divcss_divcss

09-21

3. 盒模型：每个Div都是一个盒子，包含内容、内边距、边框和外边距，理解盒模型对于布局至关重要。三、DivCSS布局技巧 1. 浮动布局：通过设置float属性，可以让Div元素浮动，常用于创建多列布局。 2. 定位布局：...

divcss.rar_divcss

09-20

9. 实战演练：通过实际案例分析和动手实践，加深对Div+CSS布局的理解，提高解决实际问题的能力。通过深入学习“divcss.rar”中的内容，初学者不仅能掌握Div+CSS的基础知识，还能进一步提升网页设计的技能，为创建...

HTML-e-CSS-Alura:使用一个简单的虚构理发店页面学习项目

08-04

4. **容器元素与空元素**: 如 `<div>` 是一个无特定意义的容器元素，常用于组织内容或应用样式；而 ` ` 是一个空元素，不需闭合标签，用于换行。接下来，我们探讨 CSS（Cascading Style Sheets）： 1. **CSS ...

Krazy个人网页设计.zip

11-20

通过“Krazy个人网页设计.zip”中的资源，你可以逐步学习这些概念，并动手实践，从创建简单的静态页面开始，逐渐掌握更复杂的网页设计技巧。记得不断练习和尝试，因为实践是最好的老师。祝你在网页设计的道路上取得...

html视频播放div,打造自己的html5视频播放器

weixin_31181381的博客

06-10

790

CSS-盒子模型

初听不知曲中意，再听已是曲中人。

10-24

468

介绍在使用CSS进行网页布局时，我们一定离不开的东西——盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，他装的东西就是HTML元素的内容。 盒子模型 英文名字（CSS box model）组成一个盒子由外到内可以分成四个部分：外边距(margin)、边框(border)、内边距(padding)、内容(content)在css中，每一个元素都被视为一个框，而每一个框都有三个属性： border:元素的边框（可能不可见），用于将框的边缘与其他框分开， margin：外边距，表示框的边.

css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等

tangjing556的博客

03-28

5627

今天，我继续来和大家聊聊css3. 在css3中，新增了很多样式，使得页面更加的美观，效果更加的优秀。但是，同样要注意的是，很多css3提出的新样式没有得到浏览器的支持，也就意味着有一部分的css3样式属性甚至可能没有任何浏览器支持。我们今天，就带大家来认识一些主流浏览器支持的并且常用的css3样式属性及其使用方式。 1.圆角边框在css3中，可以通过border-radius属性...

vue，自行设计一个div盒子的显示隐藏切换效果。(教材P112)

05-26

<div v-show="showBox">这是一个盒子</div> </div> </template> export default { data() { return { showBox: false } } } </script> ``` 然后，你可以在按钮的点击事件中切换 showBox 变量的值，从而...

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交