Day15-CSS练习+圆角边框

ian燃.

已于 2023-01-29 10:20:42 修改

阅读量127

点赞数 1

分类专栏：工坊打卡前端学习文章标签：前端 css css3 Powered by 金山文档

于 2023-01-28 21:42:42 首次发布

本文链接：https://blog.csdn.net/m0_73952430/article/details/128780702

版权

工坊打卡前端学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

ps的基本操作

这个要自学一下哈哈哈

我下载的是2019版的PS，毕竟应该比较稳定。

下载地址和安装包可以私我分享哦！😁

综合练习

总结：

布局为啥用不同盒子,可以用div 吗?

标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p

为啥用那么多类名?

类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便

到底用margin还是padding ?

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

自己做没有思路?

布局有很多种实现方式，我们可以开始先模仿自己学习的老师的写法，然后再做出自己的风格。

问题：做小米商城的一个板块

<!DOCTYPE html>
<html lang="zh-CN">

<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>综合案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让盒子居中对齐 */
            margin: 100px auto;
        }

        .box img {
            /* 宽度和父亲一样宽就不会铺满整个盒子了 */
            width: 100%;
        }

        .review {
            height: 70px;
            font-style: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            font-style: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-style: 14px;
            margin-top: 15px;
            padding: 0 24px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="ikun.png" alt="">
        <p class="review">web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式增加的H5C3新特性，新语法/p>
        <div class="appraise">视口、二倍图、流失布局，flex布局，rem布局，响应式布局</div>
        <div class="info">
            <h4><a href="#">真ikun才会有着这样的...</a></h4>
            <em>|</em><span>9.9元</span>
        </div>
    </div>
</body>

</html>

效果图大概是下边这样的，因为我没有找到和老师一样的资源素材，所以用的是之前的截屏素材。

😭😭😭

去掉li前面的小圆点

list-style: none;

圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

语法

border-radius:length;

在这些里面border-radius:length;

border是边框的意思。

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

数值越大弯曲越明显。

参数值可以为数值或百分比的显示

.yuanxing {
    width:200px;
    height:200px;
    background-color:pink;
    border-radius:100px;
}

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写成50%

.yuanxing {
    width:200px;
    height:200px;
    background-color:pink;
    border-radius:50%;
}

如果是个矩形，设置为高度的一班就可以做出

.yuanxing {
    width:300px;
    height:100px;
    background-color:pink;
    border-radius:50px;
}

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

(也可以跟两个或者三个数值)

.yuanxing {
    width:200px;
    height:200px;
    background-color:pink;
    border-radius:10px 20px 30px 40px;
}

也可以分开写border-top-left-radius、...-...-right-...、...-bottom-right-...、...-bottom-left-...。

ian燃.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day15-CSS练习+圆角边框

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。样式，这样我们的盒子就可以变圆角了。：（椭）圆与边框的交集形成圆角效果。radius半径（圆的半径）原理。，想要设置为一个圆，把数值修改为。属性用于设置元素的外边框圆角。参数值可以为数值或百分比的显示。，设置为高度的一班就可以做出。(也可以跟两个或者三个数值)问题：做小米商城的一个板块。border是边框的意思。这个要自学一下哈哈哈。去掉li前面的小圆点。在CSS3中，新增了。数值越大弯曲越明显。
复制链接

扫一扫