CSS3学习第五天

已于 2022-10-23 17:25:24 修改
阅读量99 收藏
点赞数
分类专栏： CSS学习 文章标签： html 前端
于 2022-10-20 15:50:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46563235/article/details/127406204
版权

1、多列布局

案例：

代码：


<!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{
            column-count: 5;
            background-image: url(images/19.gif);
        }
        .box img{
            width: 100%;
        }
        .box div{
            border: 3px solid green;
            padding: 5px;
            margin-bottom: 10px;
            /* 禁止盒子内部折行显示 */
            break-inside: avoid;
        }
        .box div p{
            line-height: 30px;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="images/1.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/2.jpg" alt="">
            <p>中国演员</p>
        </div>        
        <div>
            <img src="images/3.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/5.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/6.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/7.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/8.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/9.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/10.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/11.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/12.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/13.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/14.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/15.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/16.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/17.jpg" alt="">
            <p>中国演员</p>
        </div>
        <div>
            <img src="images/18.jpg" alt="">
            <p>中国演员</p>
        </div>
    </div>
</body>
</html>

2、响应式布局

 

 

 

 

 

 

3、响应式布局案例

效果：

  

 代码：


<!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>
        *{
            padding: 0px;
            margin: 0px;
        }
        .top{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .top>div{
            width: 49%;
            display: flex;
        }
        .top img{
            width: 100%;
            height: 100%;
        }
        .top .right {
            display: flex;
            justify-content: space-between;
        
        }
        .top .right>div{
            width: 49%;
        }
        @media screen and (max-width:768px){
            .top>div{
                width: 100%;
            }
        }
        .bottom{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .bottom>div{
            width: 24%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gray;
            
            margin-bottom: 10px;
            box-shadow: 0 0 5px black;
        }
        .bottom img{
            width: 100%;
        }
        @media screen and (max-width:1024px) and (min-width:768px){
            .bottom>div{
                width: 31%;
            }
        }
        @media screen and (max-width:768px) and (min-width:450px){
            .bottom>div{
                width: 48%;
            }
        }
        @media screen and (max-width:450px) {
            .bottom>div{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 
        top: flex,wrap
            >768px   左 49%   右49%
            <768px   上100%  下100%

        bottom：flex，wrap
            >1024   25%*4
            768>   <1024    31%*3
            
            450>   <768     48%*2
            <450      90%*1
     -->
     <div class="top">
         <div class="left">
             <img src="images/1.jpg" alt="">
         </div>
         <div class="right">
             <div>
                 <img src="images/2.jpg" alt="">
             </div>
             <div>
                <img src="images/3.jpg" alt="">
             </div>
         </div>
     </div>

     <div class="bottom">
         <div>
             <img src="images/4.jpg" alt="">
             <p>
                 迷你微型摄影展

             </p>
         </div>
         <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

            </p>
        </div>
        <div>
            <img src="images/4.jpg" alt="">
            <p>
                迷你微型摄影展

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

4、em和rem

px：50px

em：相对单位，相对于父元素的字体大小。

rem:相对单位，相对于根元素html字体大小。

5、rem布局准备工作

vscode插件 

 

这个插件默认只能转化16px的

需要改变16px，需要在vscode中选中文件->首选项->设置->在搜索里边打上“px”，把16这个值改成别的值就行

6、足球圈rem布局

效果：换不同型号的设备，缩放比例差不多

 代码：


<!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>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        ul{
            list-style: none;
        }
        html,body{
            height: 100%;
        }
        html{
            font-size: 16px;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 2.75rem;
            background: #0cc420;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div{
            width: 3.75rem;
            height: 1.5625rem;
            line-height: 1.5625rem;
            text-align: center;
            font-size: .75rem;
            color: white;
        }
        header div:nth-child(1){
            border-radius: .75rem 0 0 .75rem;
            background: #63d985;
           
        }
        header div:nth-child(2){
            border-radius: 0 .75rem .75rem 0;
            background: #6dd006;
         
        }


        section{
            flex: 1;
            overflow: auto;
        }
        section ul{
            position: sticky;
            top: 0rem;
            display: flex;
            background: white;
        }
        section ul li{
            flex: 1;
            text-align: center;
            height: 2.1875rem;
            line-height: 2.1875rem;
            border-bottom: .0625rem solid #d9d9d9;
            color: #8c8c8c;
            font-size: .875rem;
        }
        section ul li:hover{
            border-bottom: .125rem solid #08c63e;
            color: #08c63e;
        }
        section .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list>div{
            width: 49%;
            margin-top: .25rem;
            border: 1px solid grey;
        }
        section .list>div img{
            width: 100%;
          
        }
        section .list>div p{
            height: 1.875rem;
            line-height: 1.875rem;
            font-size: .75rem;
            text-indent: .625rem;
        }

        

        footer{
            height: 2.75rem;
            background: white;
            color: #d5d5d7;
            
        }
        footer ul{
            display: flex;
            height: 100%;
        }
        
        footer li{
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        footer li:hover{
            color: #08ca43;
        }
        footer li i{
            height: 1.3125rem;
            line-height: 1.3125rem;
            text-align: center;
            font-size: 1rem;
        }
        footer li span{
            height: 1.0625rem;
            line-height: 1.0625rem;
            font-size: .75rem;
            text-align: center;
        }
        footer li:nth-child(3){
            position: relative;
        }
        footer li:nth-child(3) i{
            width: 3.125rem;
            height: 3.125rem;
            border: .0625rem solid #dadada;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -1.5625rem;
            top:-0.5rem;
            font-size: 1.875rem;
            text-align: center;
            line-height: 3.125rem;
            background: white;
          
        }
        .iconfont{
            font-size: 1rem;
        }
    </style>
    <script>
        document.documentElement.style.fontSize=document.documentElement.
        clientWidth/320 * 20 +"px"
    </script>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>

    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>
        <div class="list">
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
            <div>
                <img src="1.png">
                <p>大家好大家好</p>
            </div>
        </div>
    </section>

    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>

            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>

            <li>
                <i class="iconfont icon-xiangji"></i>
            </li>

            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
            
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
        </ul>
    </footer>
</body>
</html>

你还要我怎样？
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 学习笔记 DAY5
using131的博客
09-15 129
十.CSS3 过渡 十一.CSS3 动画
2021.5.14 CSS3学习第一天
JINGMaNong的博客
05-14 134
CSS3 CSS 用于控制网页的样式和布局。 CSS 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Pad
移动端开发rem像素适配js文件
Mertyu的博客
12-04 215
<script> (function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() ...
移动端开发 rem 单位使用问题
weixin_34112900的博客
02-15 147
前言 PC 端页面开发与移动端页面开发： PC 端页面开发需要考虑更多的兼容性问题，ie、谷歌、火狐等浏览器各自内核不同（ie 的天下）。 移动端页面开发基本不用考虑这种浏览器间的兼容问题，手机上的浏览器绝大部分是webkit内核的（webkit 的天下），但是需要考虑屏幕分辨率。 原生开发与移动端开发： 原生 app，在浏览体验上优于网页，需要依赖具体设备，一旦更换设备，需要重新下载才能继续...
淘宝——移动端页面终端适配
weixin_30578677的博客
10-25 468
注：本文参考自：http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录 适配的要求 适配的方法，3个步骤 适配中背景图片的处理 适配的原理解析 摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型， 在大...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
css3学习心得分享
09-25
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它极大地扩展了CSS的功能，并引入了许多新特性，使得网页设计更加灵活、高效且富有表现力。以下是我对CSS3学习的一些核心知识点的详细说明： 1. **新...
css3布局学习html5网站模板
04-02
CSS3（层叠样式表第三版）提供了丰富的样式控制和动画效果，而HTML5则是新一代的超文本标记语言，带来了更强大的语义元素和交互功能。这两者的结合使得创建美观、响应式且功能强大的网站成为可能。本教程将重点讨论...
HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_
10-04
CSS3（层叠样式表）是CSS的第三个主要版本，它带来了许多新的选择器、布局模式和动画效果。CSS3的选择器如`:nth-child()`、`:not()`、`:checked`等，使得选取特定元素变得更加精准。多列布局（column-count、column-...
HTML 5与CSS 3权威指南 第2版 代码清单.rar
08-03
HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它在前一版本的基础上进行了重大改进，增加了许多新特性。这些特性包括： 1. 新的结构元素：如、、、等，帮助构建更有组织的页面结构。 2. 内容...
怎么使用html中的div元素画圆
wangyufei0815的博客
09-05 63
元素会呈现为一个直径为 100px 的蓝色圆形。属性的值，你可以改变圆的大小。的宽度和高度相等，并应用。
前端知识HTML&CSS
w13114的博客
08-31 1257
前端知识
数据结构-栈、队列-相关练习
2401_86587256的博客
09-05 996
数据结构初阶部分，栈和队列的相关练习。
VitePress 文件路由解析：从 Markdown 到 HTML 的映射艺术
软考鸭
09-05 197
VitePress 采用文件路由的方式，将 Markdown 文件的目录结构直接映射为生成的 HTML 页面的 URL 路径。这种设计使得网站的结构清晰易懂，同时也方便了内容的组织和维护。VitePress 的文件路由机制为文档网站的构建提供了一种直观且高效的方式。通过简单地组织和编写 Markdown 文件，你可以快速生成结构清晰、易于导航的静态网站。无论是个人博客、项目文档还是企业官网，VitePress 都是一个值得尝试的选择。
html备忘录
lulei5153的博客
09-05 179
【代码】html备忘录。
web前端HTML
2301_77599154的博客
09-05 385
作用：根据元素的结构关系查找元素使用公式设置多个元素，根据元素的结构关系查找多个元素例。如：(注意n从0开始算术)
SpringBoot开发——结合Thymeleaf模板整合HTML
最新发布
bjzhang75的博客
09-05 693
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
前端面试题总结（HTML篇和CSS篇）
hyx_1225的博客
08-31 2513
BFC是一个独立渲染区域，它丝毫不会影响到外部元素BFC特性BFC内部元素是垂直排列的同一个BFC下margin会重叠计算BFC高度时会算上浮动元素BFC不会影响到外部元素BFC区域不会与float元素重叠如何创建BFCposition设为absolute或fixedfloat不为noneoverflow设置为hidden、autodisplay设置为inline-block或者inline-table或flexBFC的作用：解决margin的重叠问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值