css学习第五天

已于 2022-08-26 18:40:01 修改
阅读量131 收藏
点赞数
分类专栏： css 文章标签： 前端 html css
于 2022-07-21 20:47:02 首次发布
原文链接：https://www.bilibili.com/video/BV14J4114768?p=183&spm_id_from=333.851.header_right.history_list.click
版权

    • 使盒子变成圆角

    • 语法：border-radius：length；

    • radius半径原理：圆与边框交集形成的圆角效果

    • 参数可以是数值或者百分比

    • 设置成圆形：把数值设置成宽度和高度的一半，或者直接设置成50%

    • 设置成圆角矩形，设置为高度一半

    • 代码

      <!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: 150px;
            background-color: skyblue;
            /* 圆角边框 */
            border-radius: 10px;
        }
    </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>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* border-radius: 100px; */
            /* 这个50%是宽度和高度的一半 */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: orange;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>

<body>
    圆角的做法：
    <div class="yuanxing"></div>
    圆角矩形
    <div class="juxing"></div>
    设置不同圆角
    <div class="radius"></div>
</body>

</html>

    • 结果

  • 盒子阴影

    • box-shadow

    • 语法：box-shadow：h-shadow v-shadow blur spread color inset

    • h-shadow：水平阴影

      • 必需，允许负值（影子水平位置）

    • v-shadow：垂直阴影

      • 必需，允许负值（影子垂直位置）

    • blur：模糊数值（影子虚实）

    • spread：阴影尺寸（影子大小）

    • color：阴影颜色

    • inset：外部阴影改为内部阴影（默认的是外阴影，不需要加outset）

    • 影子不占用空间

    • 代码

      <!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: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        /* 鼠标经过盒子添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

    • 结果

  • 文字阴影

    • text-shadow

    • 语法：text-shadow：h-shadow v-shadow blur color；

    • h-shadow：水平阴影位置

      • 必需，允许负值

    • v-shadow：垂直阴影位置

      • 必需，允许负值

    • blur：模糊距离

    • color：阴影颜色

    • 代码

      <!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 {
            font-size: 50px;
            color: skyblue;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>文字阴影</div>
</body>

</html>

    • 结果

  • css浮动

    • 网页布局准则

      • 多个块级元素纵向排列使用标准流，多个块级元素横向排列使用浮动

    • 布局方式

      • 普通流

        • 标签按照规定好的默认方式排列

        • 块级元素独占一行。从上往下顺序方式排列

      • 浮动

        • 优点：可以让多个块级元素一行内排列显示

        • float属性用于创建浮动框，将其移动到一边，直到右边缘或者左边缘触及包含块或者另一个浮动边缘。

        • 语法：选择器{ float：属性值}

          • 属性值：none元素不浮动

          • 属性值：left向左浮动

          • 属性值：right向右浮动

          • 代码

            <!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>
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: aqua;

        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左边盒子</div>
    <div class="right">右边盒子</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 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: purple;
            height: 245px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div></div>
    <div class="four">4</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 {
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
            /* display: inline-block; */

        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</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>
        span,
        div {
            /* 如果使用了浮动，则不需要在转换为块级元素或者行内块元素 */
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>
    <div>1</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>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: gray;
        }

        .right {
            float: right;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 必须写.box .li，注意权重的问题 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</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>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: palegreen;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">zuo</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div class="four">4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div class="last">8</div>
        </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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;

        }

        .box {
            width: 980px;
            height: 300px;
            margin: 10px auto;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子，不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</footer>o</div>
</body>

</html>

          • 结果

             黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

正在加载jjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础css第一天,对应博客
04-03
5. **CSS预处理器**：虽然不是第一天学习的核心内容，但提到CSS，预处理器如Sass（SCSS）和Less值得提及。它们提供变量、嵌套规则、混合（mixins）等功能，使得编写CSS更加结构化和可维护。 在提供的压缩包文件中，...
CSS第07天.rar
04-25
【标题】"CSS第07天.rar"是一个与CSS（层叠样式表）相关的学习资料压缩包，可能包含了第七天课程的学习内容。CSS是网页设计和开发中的关键部分，用于控制网页元素的样式、布局和视觉表现。 【描述】虽然描述简洁，...
CSS基础课程笔记-day4
Obsession_k的博客
12-01 154
CSS基础课程笔记-day4
html、css中圆角边框
m0_51495354的博客
11-12 3966
html、css中圆角边框
H5中 video 使用border-radius失效解决方法
S筱潇S四维Smile
07-26 2047
添加css即可，亲测有效 -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);
H5：border-radius移动端的兼容问题
KWMax
08-01 1058
问题场景 通过以下方式实现一个圆形边框的选项值 .option { width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; font-size: 36px; color: #888888; border: 2px solid #888888; } 在chrome和其他浏览器上一直显示正常。在个别移动端机子上，出现圆圈不圆和
设置圆角border-radius值为50%安卓各版本会变形
热门推荐
希望能找到你的答案
06-01 5万+
在H5页面通过css样式设置圆角，比如border-radius：50%，这样的方式，在不同的安卓浏览器里，其表现的形式也会有不一样，会出现大小不一致，有些扁圆，有些大，有些小，但是在IOS系统不会出现问题。经排查，如果使用rem单位表示宽高，会有问题，如下：.car-radius { width: 0.2rem; height: 0.2rem; border-radius...
CSS学习第五天——CSS选择器的优先级
m0_65051363的博客
07-28 2071
CSS学习第五天——CSS选择器的优先级
CSS第10天.rar
04-26
在CSS（层叠样式表）的学习旅程中，第10天通常标志着对基本概念的深入理解和开始接触更高级的主题。这个“CSS第10天.rar”压缩包可能包含了一系列关于CSS进阶技巧和最佳实践的教学材料，旨在帮助学习者提升其网页...
CSS第04天.rar
04-25
【CSS第04天】的学习资料涵盖了CSS（层叠样式表）的核心概念和技术，这是网页设计和开发中不可或缺的一部分。CSS用于控制网页元素的布局、样式和视觉呈现，使其具有吸引力且易于阅读。在本压缩包中，你将找到与CSS第...
CSS第03天.rar
04-22
在CSS（层叠样式表）的学习旅程中，第三天通常会深入探讨更多关于CSS选择器、布局技巧以及一些高级概念。下面将详细讲解这些知识点，帮助你更好地理解并掌握CSS。 1. **CSS选择器**：选择器是CSS中用于指定我们要...
h5端 input输入框点击的时候出现黄色阴影，设置border-radius出现上左边出现内阴影
业余前端的职业经历
05-08 1069
点击出现黄色阴影的解决方式 input{ outline:none; } 当我设置border-radius的时候出现了 内阴影 ui让我去掉，去掉确实有点难哈 可以选择加上一个边框进行掩盖哈，既然去不掉 那就覆盖你 input{ border:1px solid #666; } 给input的直接设置border-radius 怕存在兼容性问题哈 最好的方法是 -webkit-borde...
CSS学习笔记6
qwq_666的博客
05-11 122
圆角边框（重点） 在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了 语法 border-radius:length; radius半径（圆的半径）原理：圆与边框的交集形成圆角效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆角边框</title> <style type="text/css"> .yuanxing
border-radius值的解析
xiaozhen0610的博客
08-24 431
border-radius: none　｜　length{1,4} / length{1,4}其中每一个值可以为 数值或百分比的形式。length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。如果是三个...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 383
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1222
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1716
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
前端性能优化--懒加载
weixin_43799793的博客
07-19 159
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 336
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
HTML与CSS入门经典第七版学习资源
在本书的CSS部分，读者可以期待学习： 1. CSS基础：理解CSS选择器、属性和值的概念，以及如何将CSS应用到HTML元素上。 2. 块级元素与行内元素：掌握不同类型的元素如何影响页面布局。 3. 盒模型：理解边距、填充、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值