css-210205-01

css - 210205 - 01

CSS美化

  • 背景
  • 渐变
  • 盒子模型
  • 圆角边框
  • 盒子阴影
  • 浮动

背景

  • 背景颜色

    ​ background

  • 背景图片

渐变

一个css网站,里面有很过css样式:https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>

    <style>
        div{
            height: 500px;
        }
        #div1{
            background-color: #0093E9;
            background-image: linear-gradient(206deg, #0093E9 0%, #80D0C7 100%);
        }
        #div2{
            /*background-color: #FBAB7E;*/
            background: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 100%);

        }
    </style>
</head>
<body>

<div id="div1">白光一</div>
<div id="div2">白光一</div>

</body>
</html>

盒子模型

  • margin 外边距
  • padding 内边距
  • border 边框

盒子计算:margin + border + padding + 内容宽度

border
  • 边框粗细
  • 边框大小
  • 边框颜色
h1-h6,ul,li,a,body 等都会有默认边距

margin
margin:0				上下左右都是0
margin:0 1px			上下0,左右1px
margin:0 1px 2px 3px	 上0,右1px,下2px,左3px
margin:0 auto			居中
margin-top:
margin-bottom:
margin-right:
margin-left:

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>

<!--    border-radius:0px       全部-->
<!--    border-radius:10px 10px 10px 10px       左上,右上,右下,左下(顺时针来的)10px-->

    <style>
        .div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px;
        }
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 0px 10px 20px 50px;
        }
        .div3{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid red;
            border-radius: 50px 50px 0 0;
        }
        .div4{
            width: 50px;
            height: 100px;
            background-color: red;
            border: 1px solid red;
            border-radius: 50px 0 0 50px;
        }
        .div5{
            width: 50px;
            height: 100px;
            background-color: red;
            border: 1px solid red;
            border-radius:  0 50px 50px 0;
        }
        .div6{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid red;
            border-radius:  0 0 50px 50px;
        }
        img{
            border-radius: 100px;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<img src="../images/a.PNG">

</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>

    <style>
        .div1{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            box-shadow: 10px 10px 10px yellow;
        }
        img{
            border-radius: 100px;
            box-shadow: 10px 10px 10px yellow;;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<img src="../images/a.PNG" alt="">

</body>
</html>

浮动

块级元素:独占一行
	h1-h6, p , div, 列表.....
	
行内元素:不独占一行(行内元素,可以被包含在块级元素中,反之,不可以)
	span, a , img, strong..........

display
<!--
	display:
		block	块元素
		inline  行内元素
		inline-block	块元素,可以在一行
-->

float

父级边框塌陷问题

clear

<!--
	clear:
		right		右侧不允许有浮动元素
		left		左侧不允许有浮动元素
		both		两侧不允许有浮动元素
		none		
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="css/test01.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="father">
    <div class="layer01"><img src="image/01.jpeg" alt=""></div>
    <div class="layer02"><img src="image/02.jpeg" alt=""></div>
    <div class="layer03"><img src="image/03.jpeg" alt=""></div>
    <div class="layer04">
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或
    </div>
</div>

</body>
</html>
div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid black;
}
.layer01{
    border: 1px red dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px green dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px deepskyblue dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px yellow dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}
  • 解决1 (增加父级元素高度)

    #father{
        border: 1px solid black;
        height:500px;
    }
    
  • 解决2 (加一个空的div)

    <div id="father">
        <div class="layer01"><img src="image/01.jpeg" alt=""></div>
        <div class="layer02"><img src="image/02.jpeg" alt=""></div>
        <div class="layer03"><img src="image/03.jpeg" alt=""></div>
        <div class="layer04">
            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或
        </div>
        <div style="clear:both; margin:0; padding:0;"></div>
    </div>
    
  • 解决3 (overflow)(父类元素中添加)

    #father{
        border: 1px solid black;
        overflow: hidden;
    }
    
  • 解决4 (添加伪类)

#father{
    border: 1px solid black;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}
 </div>
  <div style="clear:both; margin:0; padding:0;"></div>
```
  • 解决3 (overflow)(父类元素中添加)

    #father{
        border: 1px solid black;
        overflow: hidden;
    }
    
  • 解决4 (添加伪类)

#father{
    border: 1px solid black;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-in-CSS是一种前端开发技术,也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别,使得样式与组件的逻辑和结构紧密关联,提高代码的可维护性和可重用性。 在传统的CSS开发中,样式是全局共享的,容易造成样式冲突和难以维护。而CSS-in-CSS通过将样式封装在组件内部,实现了样式的局部作用域。这样一来,每个组件都可以拥有自己独立的样式规则,不会相互干扰。 CSS-in-CSS有多种实现方式,其中比较常见的有以下几种: 1. CSS Modules:CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值,实现了样式的局部作用域。在使用时,可以通过import语法引入CSS文件,并在组件中使用对应的类名。 2. CSS-in-JS:CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则,并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS Nesting:CSS Nesting是一种提案,旨在原生CSS中实现嵌套样式的语法。它使用类似于Sass的嵌套语法,可以更方便地描述组件内部的样式关系。目前,CSS Nesting还处于实验阶段,尚未得到所有浏览器的广泛支持。 总的来说,CSS-in-CSS是一种将CSS样式与组件紧密结合的开发方式,可以提高代码的可维护性和可重用性。不同的实现方式适用于不同的项目需求和开发环境。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值