牛客网CSS布局

最新推荐文章于 2024-04-24 17:07:17 发布
最新推荐文章于 2024-04-24 17:07:17 发布
阅读量291 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulizhi1996/article/details/124661010
版权

CSS1 盒模型 - content-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div class="content-box"></div>
    </body>
</html>

CSS2 盒模型 - border-box

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<div class="border-box"></div>
    </body>
</html>

CSS3 盒模型- 外边距折叠

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <section class="top"></section>
        <section class="bottom"></section>
    </body>
</html>

CSS4 浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
</html>

CSS5 浮动 - 清除

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .media {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    	<section>
            <div class="media"></div>
            <p>hello</p>
            <p class="clear-left">universe</p>
        </section>
    </body>
</html>

CSS6 定位 - static

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            section {
                width: 100px;
                height: 100px;
                background-color: black;
            }
        </style>
    </head>
    <body>
    	<section></section>
    </body>
</html>

CSS7 定位 - inherit

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
                background-color: black;
            }
            .inner {
                width: 80px;
                height: 80px;
                background-color: red;
            }
        </style>
    </head>
    <body>
    	<section class="outer">
            <section class="inner">
                
            </section>
        </section>
    </body>
</html>

CSS8 定位 - absolute

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .outer {
                width: 100px;
                height: 100px;
            }
            .middle {
                width: 100px;
                height: 100px;
            }
            .inner {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    	<div class="outer">
            <div class="middle">
                <div class="inner">
                    
                </div>
            </div>
        </div>
    </body>
</html>

CSS9 定位 - absolute - 评注

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            article {
                margin-left: 10rem;
            }
            aside {
                width: 5rem;
                padding: 1rem;
                color: white;
                background-color: pink;
                border-radius: 0.5rem;
            }
            aside:after {
                content: '';
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: 0.5rem solid pink;
                border-bottom-color: transparent;
                border-right-color: transparent;
                right: -1rem;
                top: 0.5rem;
            }
            .note {
                color: green;
                text-decoration-line: underline;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>
                <p>煮豆燃豆萁，</p>
                <p>豆在釜中泣。</p>
                <p>本是同根生，</p>
                <aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>
                <p class='note'>相煎何太急？</p>
            </article>
        </section>
    </body>
</html>

CSS10 定位 - z-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<h1>The countdown to Christmas starts here.</h1>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100">
        <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
    </body>
</html>

CSS11 定位 - relative

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .left {
                width: 100px;
                height: 100px;
            }
            .center {
                width: 100px;
                height: 100px;
            }
            .right {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    	<div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
</html>

CSS12 定位 - fixed

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    	<nav><br /></nav>
        <section>1<br />2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
    </body>
</html>

CSS13 定位 - fixed - 广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .advert {
                width: 300px;
                height: 200px;
                background-color: black;
            }
            .advert:first-line {
                color: white;
            }
        </style>
    </head>
    <body>
    	<section class="advert">
            广告文案
            <button class="x">x</button>
        </section>

        <script>
            document.querySelector('button').onclick = function() {
                this.parentNode.style.display = 'none'
            }
        </script>
    </body>
</html>

CSS14 display - flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            nav ul {
                height: 2rem;
                list-style: none;
            }
            nav ul li {
                border: 1px solid black;
            }
            nav ul li:first-child {
                font-size: 1.2rem;
            }
        </style>
    </head>
    <body>
    	<nav>
            <ul>
                <li>home</li>
                <li>spaceships</li>
                <li>planets</li>
                <li>stars</li>
            </ul>
        </nav>
    </body>
</html>

CSS15 display - flex - 可伸缩项属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            nav {
                width: 500px;
            }
            nav ul {
                display: flex;
                list-style: none;
            }
        </style>
    </head>
    <body>
    	 <nav>
            <ul>
                <li>home</li>
                <li>spaceships</li>
                <li>planets</li>
                <li>stars</li>
            </ul>
        </nav>
    </body>
</html>

CSS16 display - flex - 标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
                box-sizing: border-box;
            }
            nav ul {
                padding: 0.5rem;
                list-style: none;
            }
            nav ul li {
                display: inline-block;
                margin: 0.2rem;
            }
            nav ul li a {
                position: relative;
                display: block;
                padding: 0.2rem 0.6rem;
                color: white;
                line-height: 1rem;
                background-color: black;
                border-radius: 0.2rem;
                text-decoration: none;
                text-align: center;
            }
            nav ul li a:before {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                border: 0.7rem solid transparent;
                border-right-width: 0.7rem;
                border-right-color: black;
                left: -1.2rem;
                top: 0;
            }
        </style>
    </head>
    <body>
    	<nav>
            <ul>
                <li><a href="">Fillithar</a></li>
                <li><a href="">Berzite</a></li>
                <li><a href="">Galidraan</a></li>
                <li><a href="">Gravlex Med</a></li>
                <li><a href="">Cato Neimoidia</a></li>
                <li><a href="">Coruscant</a></li>
                <li><a href="">Dantooine</a></li>
                <li><a href="">Dhandu</a></li>
                <li><a href="">Iktotchon</a></li>
                <li><a href="">Hosnian Prime</a></li>
                <li><a href="">Harkrova I</a></li>
                <li><a href="">Livno III</a></li>
                <li><a href="">Karfeddion</a></li>
                <li><a href="">Eriadu</a></li>
                <li><a href="">Jestefad</a></li>
                <li><a href="">Iridonia</a></li>
                <li><a href="">Malachor</a></li>
                <li><a href="">Gan Moradir</a></li>
                <li><a href="">Kethmandi</a></li>
                <li><a href="">Mirrin Prime</a></li>
                <li><a href="">Ezaraa</a></li>
                <li><a href="">Muunilinst</a></li>
                <li><a href="">Itapi Prime</a></li>
                <li><a href="">Nam Chorios</a></li>
            </ul>
        </nav>
    </body>
</html>

CSS17 display - flex - order

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
        </style>
    </head>
    <body>
    	<section>
            <h2>countdown</h2>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1912%2F1135-191202143454.jpg&refer=http%3A%2F%2Fuploads.xuexila.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639984107&t=eca951193e736a17eb96278117bcfb1f" width="100%">
            <article>The countdown to Christmas starts here.</article>
            <p><a href="#">more</a></p>
        </section>
    </body>
</html>

CSS18 display - grid

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                width: 500px;
                text-align: center;
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

CSS19 display - grid - 区域

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                text-align: center;
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

CSS20 单列布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                width: 500px;
            }
        </style>
    </head>
    <body>
    	<header></header>
        <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
        <footer></footer>
    </body>
</html>

CSS21 双列布局 - 浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

CSS22 双列布局 - 绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .left {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

CSS23 双列布局 - flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                border: 1px solid black;
            }
            .right {
                border: 1px solid greenyellow;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

CSS24 双列布局 - grid

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

CSS25 三列布局 - 浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
            <article class="center"></article>
        </section>
    </body>
</html>

CSS26 三列布局 - 绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .left {
                border: 1px solid black;
            }
            .center {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

CSS27 三列布局 - flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .left {
                border: 1px solid black;
            }
            .center {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

CSS28 三列布局 - grid

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
             * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .left {
                border: 1px solid black;
            }
            .center {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

CSS29 三列布局 - 圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                background-color: greenyellow;
            }
            .center {
                background-color: darkorange;
            }
            .right {
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

CSS30 三列布局 - 双飞翼布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
            }
            .left {
                background-color: greenyellow;
            }
            .main {
                background-color: darkorange;
            }
            .right {
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><main class="main"><br /><br /><br /></main></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

liulizhi1996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS网格布局和定位网格项
01-29
Igalia在Chromium/Blink以及Safari/WebKit浏览器实现CSS网格布局的部分工作的完成，我们已经实现了对于定位网格项(positioned items)的支持。是的，在网格中支持绝对定位。可能你的第一反应是不希望在网格布局中使用...
JS模拟手机短信发送
Handsome_fan的博客
05-05 2194
今天实现了用JS模拟手机短信发送的效果，其HTML代码如下：&lt;div class=&quot;out&quot;&gt; &lt;div class=&quot;main-content&quot;&gt; &lt;div class=&quot;head&quot;&gt;&lt;/div&gt; &lt;div class=&quot;content&
循环操作class相同的Div
风轻云淡
12-01 2705
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;循环操作class相同的div&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.1
div填满页面问题
just_do_it_123的博客
04-13 524
作为前端小透明，最近遇到一个需要两个div在垂直方向上填充满整个页面的问题，具体效果如下： <div class="out"> <div class="one">1</div> <div class="two">2</div> </div> 在网上找到的方法如下： .out { position: ...
(前端)HTML之CSS(div+css布局)
weixin_65479202的博客
04-23 9879
前端HTML的基础知识内容的更新已经更新完毕！！！打好基础，才能学好HTML的相关知识！！！
梅科尔工作室-第四次网页前端培训笔记（CSS常用属性和盒子模型）
ayaxx1314的博客
02-07 508
前言 本文主要记录我学习CSS常用属性和盒子模型的笔记 1、CSS常用属性设置 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用属性</title> <style type="text/css"> #div1{ height: 37.5rem; /* 背景颜色 */ background-color: ..
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
CSS网站布局实录
07-10
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
Bootstrap CSS布局之图像
08-31
主要介为大家详细绍了Bootstrap CSS布局之图像的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS1 盒模型 - content-box
qq_42250642的博客
03-17 152
CSS1 盒模型 - content-box 题目 代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <style type="text/css"> .content-box{ margin: 0; padding: 5px; wi
【CSS】【面试题】牛客网CSS专项练习部分答案及解析（更新中...）
weixin_39006917的博客
03-01 6258
1.在W3C标准盒模型中，默认情况下块元素的总宽度为： content content+2*padding content+2*padding+2*border content+2*padding+2*border+2*margin 答案为：content 解析：CSS有两种盒子模型，分别为W3C盒子模型和IE盒子模型。区别在于，IE盒子模型的content部分，将border和padding包含进去了。width = border+padding+content。题干问的总宽度应该理解为width值为
在牛客网答题总结的前端面试71道HTML+CSS常考题
bluedandelion的博客
05-30 3890
1、浏览器页面有哪三层构成，分别是什么，作用是什么?       构成：结构层、表示层、行为层        分别是：HTML、CSS、JavaScript        作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点？优点：        a、网络标准统一、HTML5本身是由W3C推荐出来的；       b、多...
css3新增：属性选择器+结构伪类选择器+伪元素选择器（::before+::after）+CSS3 盒子模型+图片变模糊+calc函数+CSS3 过渡（transition)
Echo_bx的博客
04-21 350
这里写目录标题一级目录二级目录三级目录 一级目录 二级目录 三级目录
牛客网HTML/CSS专项练习错题汇总
qq_27905183的博客
08-12 818
有关浏览器的内核判断主要分为四类：-o-/-ms-/-moz-/-webkit-通过js的dom.style.XxxTransition进行相应的校验判断: var div = document.createElement('div'); var style = div.style; if (style.webkitTransition) { return '-
理解CSS中的sticky与fixed定位
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 420
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
Three CSS2D 渲染器 月球绕地球旋转
最新发布
n_229397218的博客
04-24 458
2D 渲染器 DOM 挡住了轨道控制器要监听的 canvas 画布，发现鼠标无法触发轨道控制器影响相机移动了，把轨道控制器监听的 DOM 改成 2D 渲染器的 DOM，让 2D 渲染器的 DOM 不交互任何鼠标事件，让鼠标可以摸到后面一层的 canvas 标签。渲染器是生成一个 DIV 容器，它的作用是能把 HTML 元素绑定到三维物体上，在 DIV 容器中各自的 DOM 元素分别封装到 CSS2DObject 的实例中，并在 scene 中增加。1、引入 CSS2D 渲染器和创建物体的构造函数。
基于 Tailwind CSS + Shadcn 的 Vue3 后台管理模版 2024.0.4 发布
qianmoQ - 关注云计算,关注大数据
04-20 302
Shadcn UI Vue Admin 是一个使用 Shadcn UI (基于 Tailwind CSS) 和 Vite 和 Vue 制作的管理面板。InfoSphere 是一款面向企业和个人的开源 Wiki 系统，旨在提供简单而强大的知识管理解决方案。欢迎大家前往测试站点使用并提出宝贵的建议，如果您有需要实现的布局，可以提交 issues 我们会在最快的时间内实现。该模版的使用方式比较简单只要传递相应的数据即可，也支持多个 slot 用户自定义，欢迎大家使用。以下是该模版的目前支持的功能截图。
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
开源服务指南
04-23 371
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
html css布局
08-25
根据引用，HTML和CSS布局方式可以分为以下几种：浮动布局、定位布局、flex布局、table-cell表格布局、网格布局。 浮动布局是通过设置元素的浮动属性来实现元素的排列。通过设置元素的float属性为left或right，可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值