纯css3实现栏目三等平均分配

た入场券 2023-02-25 14:28 1阅读 0赞

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>纯css3实现栏目三等平均分配</title>
        <style>
    	*{margin:0;padding:0;font-size:12px;font-family:'Microsoft YaHei'}
    	#nav,#nav2{display:-webkit-box;display:-moz-box;display:box;margin:auto;margin-top:30px;border:10px solid #7f8c8d}
    	#nav{width:300px;height:100px;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;box-orient:horizontal}
    	#nav2{width:100px;height:300px;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical}
    	#nav div,#nav2 div{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;text-align:center;line-height:100px;font-size:36px;color:#fff}
    	#box1{background:#1abc9c}
    	#box2{background:#3498db}
    	#box3{background:#9b59b6}
    	#box4{background:#f39c12}
    	#box5{background:#27ae60}
    	#box6{background:#c0392b}
        </style>
    </head>
    <body>
        
        <div id="nav">
            <div id="box1">1</div>
            <div id="box2">2</div>
            <div id="box3">3</div>
        </div>
        
        <div id="nav2">
            <div id="box4">4</div>
            <div id="box5">5</div>
            <div id="box6">6</div>
        </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css3实现栏目三等平均分配

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

た入场券/ 2023年02月25日 14:28/ 0 赞/ 2 阅读

相关纯css html代码,纯css3实现文字动画

先上代码，代码如下： css3动画 - daimami.com 示例文字关于一些属性的说明： css3中的动画功能分为transitions功能和animations

心已赠人/ 2022年10月06日 12:45/ 0 赞/ 241 阅读

相关 CSS3之栏目column

　　CSS3之栏目column是之前CSS2没有的属性，和背景边框等属性不一样，是之前没有的属性。这个属性是设置有关栏目的一系列数值的属性。CSS3之栏目column的属性主要

落日映苍穹つ/ 2022年09月17日 05:25/ 0 赞/ 307 阅读

相关纯CSS实现3D图像轮转

CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳[研究效果][Link 1]先，也可[下载收藏][Link 2]先。首先看html文件，div.b

「爱情、让人受尽委屈。」/ 2022年08月25日 11:58/ 0 赞/ 198 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 420 阅读

相关纯css3实现的圆形进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ

向右看齐/ 2022年08月03日 03:10/ 0 赞/ 284 阅读

相关纯CSS3实现动感菜单

今天学了一款用CSS3实现的垂直的动感菜单，附上效果图： ![这里写图片描述][SouthEast] HTML代码： <ul class="navList">

谁借莪１个温暖的怀抱￠/ 2022年06月16日 14:10/ 0 赞/ 229 阅读

相关纯CSS3实现的标签效果

1.效果分析纯CSS3实现的标签效果，如图1所示，看看[demo][]。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面

浅浅的花香味﹌/ 2022年02月27日 01:17/ 0 赞/ 353 阅读

相关纯CSS3时钟

一、效果欣赏纯css3打造精美时钟效果，效果如下图所示，也可看看----[demo][]\----- ![20130507131442266][] 二、难点解析

﹏ヽ暗。殇╰゛Y/ 2022年02月25日 08:24/ 0 赞/ 266 阅读

相关纯 CSS3 实现波浪效果

1.使用linear-gradient来做小波浪线 ①原理: linear-gradient(45deg, red, transparent 45%) 是个渐变

水深无声/ 2021年09月14日 15:42/ 0 赞/ 1189 阅读