本周总结-2023-5-14

最新推荐文章于 2025-12-18 22:12:37 发布

原创最新推荐文章于 2025-12-18 22:12:37 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

文章介绍了在网页制作中使用Flex布局的原理和示例，包括设置主轴方向、子元素排列及换行的父项属性，以及全屏背景图的实现方法和调整超链接的样式技巧。作者通过学习感到收获颇丰。

本周主要学习了在制作网页的过程中需要用到的知识，我感觉在制作网页的过程中，可以复习以前学习过的内容，同时也会接触到一些新的知识，感觉受益匪浅。

一.flex布局

flex（flexible Box的缩写）布局，意为“弹性布局”，也叫伸缩布局、伸缩盒布局、弹性盒布局。
代码示例如下：

<style>
   div{
   display:flex;
   width:80%;
   height:300px;
   background-color:pink;
   justify-content:space-around;
}
div span{
   height:100px;
   background-color:purple;
   margin-right:5px;
   flex:1;
}
</style>

<body>
<div>
     <span>1</span>
     <span>2</span>
     <span>3</span>
</div>
</body>

注：
1.当我们为父类盒子设为flex布局以后，子元素的float、clear、和vertical-align属性将失效。
2.总结flex布局原理：
通过给父盒子添加flex属性来控制子盒子的位置和排列方式。

二.常见的父项属性

1.flex-direction:设置主轴方向
属性值：
row:从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上
2.justify-content :设置主轴上的子元素排列方式
属性值：
flex-start
flex-end
center
space-around
space-between
3.flex-wrap:设置子元素是否换行
属性值
wrap
nowrap

三.全屏背景图代码

个人觉得用处还是挺多的*-*

<style>
body {
            background-image: url(images/wn.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
 </style>

四.去除超链接下划线和改变超链接颜色的神仙操作

去除超链接下划线

<style>
        A:link {           
            text-decoration: none
        }

        A:visited {           
            text-decoration: none
        }

        A:hover {
            text-decoration: none
        }

        A:active {            
            text-decoration: none
        }

想改超链接颜色的话，直接加上颜色就行了
示例如下：

<style>
        A:link {
            color: violet;
            text-decoration: none
        }

        A:visited {
            color: rgb(3, 3, 3);
            text-decoration: none
        }

        A:hover {
            color: rgb(255, 179, 0);
            text-decoration: none
        }

        A:active {
            color: greenyellow;
            text-decoration: none
        }

以上便是这周学习的主要内容，个人的感受就是：又收获了不少呢^ - ^,下周将会继续学习。