CSS3学习笔记（二）

最新推荐文章于 2022-10-28 10:25:12 发布

一天到晚写BUG

最新推荐文章于 2022-10-28 10:25:12 发布

阅读量211

点赞数 1

文章标签： html css css3 列表定位

本文链接：https://blog.csdn.net/qq_43760651/article/details/115362613

版权

1、标题logo设置

在title标签下面贴上这句代码（图片地址换成你自己的图标）：

<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
<link rel="icon" href="图片路径/logo.png" sizes="32x32">
</head>

href:小标签图标的地址
sizes:大小（可以不设置这个属性）

效果

在这里插入图片描述

2、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

CSS box-model

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

1.1 外边距

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

Margin - 单边外边距属性

属性参考：菜鸟教程

在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

1.2 边框

边框属性参考：菜鸟教程

边框宽度、颜色

p.one
{
    border-width:5px;
    border-style:solid;
    border-color:red;
}

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

1.3 内边距

所有的CSS填充属性

属性	说明
padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>

    <style>
        h3 {
            margin: 0 0 0 0; /*去外边距*/
            background: #6b6bff;
            color: white;
        }

        #app {
            border: #1d0715 3px solid;
            margin-right: 1100px;
            background: hsla(196, 100%, 98%, 0.9);
        }

        .div {
            margin: 3px;
            margin-left: 50px;
        }

        #button {
            background: #ff6631;
            width: 150px;
        }

        a {
            font: 15px 楷体;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div id="app">
    <h3 align="center">用户登录</h3>
    <form action="#">
        <div class="div">
            <span>用户名</span>
            <input type="text" placeholder="请输入用户名">
        </div>
        <div class="div">
            <span>密码&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input type="password" placeholder="请输入密码">
        </div>
        <div class="div">
            <span>邮箱&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input type="email" name="email">
        </div>
        <a href="#">忘记密码？</a>
        <div align="center">
            <input type="button" name="button1" value="登录" id="button">
        </div>
    </form>
</div>
</body>
</html>

在这里插入图片描述

1.4 圆角

圆角制作器：https://www.runoob.com/css-radius

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

实例一：

div
{
    border:2px solid;
    border-radius:25px;
}

实例二：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

3、浮动和display

3.1 display(显示)

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有li元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

内联元素被包含在块元素当中，反之不可以。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用未隐藏之前一样的空间。也就是说，该元素虽然被隐藏，但仍然会影响布局。

把列表项显示为内联元素：

li {display:inline;}

把span元素作为块元素：

span {display:block;}

3.2 浮动

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

.div
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

.text_line
{
    clear:both;
}

3.3 父级边框塌陷问题

方案一：增加父级元素的高度

#father{
    border:1px #000 solid;
    height:800px;
}

方案二：增加一个空的div标签。清除浮动

<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

方案三：overflow

/*在父级元素增加*/
overflow:hidden;

方案四：在父类添加一个伪类：after

#father:after{
    content:'';
    display:bloack;
    clear:both;
}

4、定位（position）

4.1 相对定位

相对定位：position：relative;

相对原来的位置，进行指定的偏移，相对定位的话，他不在标准文档流中，原来的位置会被保留

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

    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }

        a {
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: #3a8021;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }

        a:hover {
            background: #3d0eff;
        }

        .a2, .a4 {
            position: relative;
            left: 200px;
            top: -100px;
        }

        .a5 {
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>

<div id="box">
    <a href="#" class="a1"> 链接一</a>
    <a href="#" class="a2"> 链接二</a>
    <a href="#" class="a3"> 链接三</a>
    <a href="#" class="a4"> 链接四</a>
    <a href="#" class="a5"> 链接五</a>
</div>
</body>
</html>

在这里插入图片描述

4.2 绝对定位

定位：基于xxx定位，上下左右偏移

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素偏移

3、在父级元素范围内移动

相对于父级元素或浏览器的位置，进行指定的偏移，相对定位的话，他不在标准文档流中，原来的位置不会被保留

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

    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 3px solid #000000;
            padding: 0;
            position: relative;
        }

        #first {
            background-color: #f9e377;
            border: 2px dashed darkgrey;
            position: absolute; /*绝对定位*/
            top: -20px;
            right: 20px;
        }

        #second {
            background-color: #f9e377;
            border: 2px dashed darkgrey;
        }

        #third {
            background-color: #f9e377;
            border: 2px dashed darkgrey;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

4.3 固定定位

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

    <style>
        body {
            height: 1000px;
        }

        div:nth-of-type(1) {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        div:nth-of-type(2) {
            width: 50px;
            height: 50px;
            background: #ffec54;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

4.4 z-index

<!DOCTYPE htm1>
<htm] lang="en">
<head>
<meta charset="UTF-8">
<title>Tit1e</tit1e>
<1ink re1="stylesheet" href="css/style.css"> 
</head>
<body>
<div id="content">
<u1>
<1i><img src="../../resource/bg.jpg" a1t="> </1i>
<1i class="tipText">学习java</1i>
<1i class="tipBg"></li>
<1i>时间: 2099-01-01</1i>
<1i>地点:月球- -号基地</1i>
</u1>
</div>
</body>
</htm1>

#content{
width: 380px;
padding: epx;
margin: epx;
overflow: hidden;
font-size: 12px;
line-height: 25px; 
border: 1px #000 solid;
}
ul,li{
padding: epx;
margin: epx;
list-style: none;
}
/*父级元素相对定位*/
#content u1{
position: relative;
.tipText,.tipsg{
position: absolute ;
width: 380px;
height: 25px;
top: 216px;
. tipText{
color: white ;
/*z-index: 0:*/
. tipBg{
background: #000;
opacity: 0.5; /*背景透明度*/
filter: Alpha(opacity=5日);

5、动画

CSS3动画

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

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

一天到晚写BUG

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记（二）

1、标题logo设置在title标签下面贴上这句代码（图片地址换成你自己的图标）：<head> <meta charset="UTF-8"> <title>用户登录</title><link rel="icon" href="图片路径/logo.png" sizes="32x32"></head>href:小标签图标的地址sizes:大小（可以不设置这个属性）效果2、盒子模型所有HTM
复制链接

扫一扫