H5 day11

最新推荐文章于 2024-07-14 10:34:53 发布
最新推荐文章于 2024-07-14 10:34:53 发布
阅读量49 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68258851/article/details/123897601
版权

一 盒子高度

    <style>

        div {

            background-color: red;

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div>c默认文字</div>

二 背景图片

    <style>

        div {

            /* background-image: url('./img/1.jpg'); */

            background-image: url('./img/img_flwr.gif');

            width: 600px;

            height: 400px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div></div>

三  盒子边框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <title>Document</title> -->

    <style>

        div {

            width: 300px;

            height: 200px;

            /* border：边框宽度 边框样式 边框颜色 四个反向都是一样的 */

            /* border: 2px solid red; */

            /* 边框 solid: 实线 dotted：点线 dashed：虚线 double：双实线 */

            /* 上边框 --- 总体设置 */

            /* border-top: 10px solid red; */

             /* 上边框 --- 分开设置 */

            border-top-width: 10px;

            border-top-style: solid;

            border-top-color: red;

            /* 右边框 */

            /* border-right: 5px dotted green; */

            border-right-width: 5px;

            border-right-style: dotted;

            border-right-color: green;

            /* 下边框 */

            /* border-bottom: 10px dashed darkmagenta; */

            border-bottom-width: 10px;

            border-bottom-style: dashed;

            border-bottom-color: darkmagenta;

            /* 左边框 */

            /* border-left: 20px double salmon; */

            border-left-width: 20px;

            border-left-style: double;

            border-left-color: salmon;

            /* 宽度综合 上右下左 */

            border-width: 30px;

            border-width: 10px 20px 30px 40px;

            border-width: 20px 40px;

            /* 样式综合 */

            border-style: dashed;

            border-style: solid dotted dashed double;

            border-style: dashed dotted solid;

            /* 颜色综合 */

            border-color: red;

            border-color: yellowgreen blue;

            /* 最终综合 */

            border: 20px solid blueviolet;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

四 边框圆角

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <title>Document</title> -->

    <style>

        div {

            width: 400px;

            height: 300px;

            background-color: red;

            /* 宽度*50% 高度*50% 横向纵向的一共圆角设置 */

            /* border-radius: 50%; */

            /* 左上角 */

            /* border-top-left-radius: 200px; */

            /* 右上角 */

            /* border-top-right-radius: 200px; */

            /* 右下角 */

            /* border-bottom-right-radius: 200px; */

            /* 左下角 */

            /* border-bottom-left-radius: 200px; */

            /* 四个角200px */

            /* border-radius: 200px; */

            /* 左上角 右上角 右下角 左下角顺序取值  如果某个角没有 就从对角取值 */

            border-radius: 10px 40px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

五 盒子阴影

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <title>Document</title> -->

    <style>

        div {

            width: 200px;

            height: 150px;

            margin: 50px 400px;

            background-color: red;

        }

        /* div:hover {

            box-shadow: 0px 0px 20px 20px #000 inset;

        } */

        div:hover {

            box-shadow: 0 15px 30px rgba(0,0,0, .5);

        }

    </style>

</head>

<body>

    <div></div>

    <!--  

        box-shadow 外部

            水平阴影位置 必须 增大 右

            垂直阴影位置 必须 增大 下

            阴影模糊距离 可选 值越高 就越模糊

            阴影尺寸 可选 向外延展的尺寸

            阴影颜色 可选

            外部or内部 可选

            内部：

    -->

</body>

</html>

旺仔抱抱糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（43）：边框实现三角形
歌谣的博客
12-08 166
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
前端----文字下方小三角的实现方法
nO0b
09-21 3098
效果如图： 文字下有一个小三角，看起来美观小巧但是实现起来有点让人摸不到头脑，这里有两种方法实现，当然有人有更好的办法可以留言补充。 把块元素的长宽设为0再加下边线可以实现： 这种是常用的方法，网上很多，先用代码举个栗子：       .div{ width: 0; height: 0; border: 10px solid transparent; ...
前端小技巧（一）：边框写三角形
柒钥的博客
09-26 7990
边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{ width:100px; height:100px; border:10px solid #f00283; }这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起
CSS-border制作轮播三角形
zhou
12-15 387
  通常写轮播图的前后换页的时候，会用到左右箭头或者三角形，今天这里是用border写的，只有一层标签，左右两个写着可能更方便些，更美观一些。 效果 这里我们会用到一个知识点，提前点出 — transparent 我们正常使用边框是这样： 设置宽高为 0 这样看不太出来，给四边都添加颜色 这样一看，直接只写border-top，那三角形不就出来了吗，可你会发现不是这样的，效果是全空白。 ...
web中利用边框制作三角形
weixin_30896825的博客
07-11 222
<!DOCTYPE html><html> 　　<head> 　　<meta charset="UTF-8"> 　　　　<title>边框制作三角形</title> 　　　　<style> 　　　　　　div{ 　　　　　　　　width:0px; 　　　　　　　　height:0px;//让...
h5day1.docx
05-17
html5基础知识
h5day2.docx
05-17
html5基础知识
h5简单计算器
03-21
在压缩包子文件的文件名称列表中，我们看到 "Day10_计算器"，这可能是项目文件夹的名字，暗示这个计算器可能是在一个学习计划或者教程的第10天创建的，用于教学目的，帮助学生理解如何使用HTML5构建交互式元素。...
陶国荣H5培训课件
03-15
陶国荣老师的课件中，"day1.pptx"和"day2.pptx"可能分别涵盖了H5基础和进阶内容，以及AngularJS的基本概念和实战应用。通过这两个部分的学习，学员将能够理解并运用H5和AngularJS构建高效、动态的Web应用。同时，...
h5简单淘宝轮播图
03-21
在提供的“Day08_淘宝轮播”文件中，我们可以看到实现这一功能的具体代码结构，包括HTML模板、CSS样式表和JavaScript脚本。通过分析这些文件，我们可以学习如何组织和实现一个完整的H5轮播图组件，包括其内部逻辑和...
用CSS、JS实现三角形、轮播图和动画盒子
Peggy0829的博客
06-16 444
三角形 用CSS边框可以模拟三角形的效果。 首先将盒子的高度、宽度设为0。 四个边框都要写，只给有需要的边框设置颜色，其余设置为透明。 为了照顾兼容性，低版本的浏览器可以加上font-size:0;line-height:0; 这是未设置透明的效果： div{ width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid green; border-left:
前端怎么画三角形_CSS三角形的实现原理及运用
weixin_39834281的博客
12-19 352
之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在(链接挂了).原理css盒模型一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.– 调整宽度大小可以调节三角形形状.示例1一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会...
前端小技巧：边框写三角形
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
09-26 285
来源：开课吧前端团队https://mp.weixin.qq.com/s/8vcrfzh5J5aSRGSPRwFASQ边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2760
title>充电效果
通过 tomcat 让手机访问到电脑写的 html 网页
m0_75138009的博客
07-10 717
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
html 关闭信息窗口
最新发布
cuisidong1997的博客
07-14 111
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
forevercui的博客
07-09 1276
弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式align-items：flex-start | flex-end | center | baseline | stretch （单行）
初识HTML
Dxito_的博客
07-09 942
⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等。在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落。• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
HTML 标签简写和全称及其对应的中文说明和实例
lulei5153的博客
07-10 492
【代码】HTML 标签简写和全称及其对应的中文说明和实例。
H5显示日期
05-30
var dateString = year + "年" + month + "月" + day + "日"; document.getElementById("date").innerHTML = dateString; ``` 在这个示例中，我们使用了 JavaScript 来获取当前日期，并将其格式化为一个...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值