网页分栏样式

最新推荐文章于 2022-07-25 12:10:05 发布
最新推荐文章于 2022-07-25 12:10:05 发布
阅读量116 收藏
点赞数
原文链接：http://www.cnblogs.com/zrx401558287/archive/2009/02/05/1384706.html
版权

     今天看msdn,上面的页面都做的很好,羡慕不已,所以自己也试着做了下.

效果图

     第一个和第二个都用到了div的圆角,网上很多这种代码,第一个的标题的背景色是从上往下渐变的,然后第三个就把渐变用的多一点了标题和整个背景都是,只是他们的渐变方向不同,感觉还可以呵呵.

     下面是这三个的代码:

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<html>
<head>
    <style type="text/css">
        u.corner u
        {
            height: 1px;
            font-size: 1px;
            display: block;
            overflow: hidden;
            text-decoration: none;
            background-color: #E3E3E6;
        }
        u.corner u.h1
        {
            margin: 0px 5px;
            background-color: #B4B4BC;
        }
        u.corner u.h2
        {
            margin: 0 3px;
            border-left: solid 2px #B4B4BC;
            border-right: solid 2px #B4B4BC;
            background-color: #E3E3E6;
        }
        u.corner u.h3
        {
            margin: 0 2px;
            border-left: solid 1px #B4B4BC;
            border-right: solid 1px #B4B4BC;
            background-color: #E3E3E6;
        }
        u.corner u.h4
        {
            margin: 0 1px;
            height: 2px;
            border-left: solid 1px #B4B4BC;
            border-right: solid 1px #B4B4BC;
            background-color: #E3E3E6;
        }
        u.cornertitle u
        {
            height: 1px;
            font-size: 1px;
            display: block;
            overflow: hidden;
            text-decoration: none;
            background-color: #3A3A3A;
        }
        u.cornertitle u.h1
        {
            margin: 0px 5px;
            background-color: #B4B4BC;
        }
        u.cornertitle u.h2
        {
            margin: 0 3px;
            border-left: solid 2px #B4B4BC;
            border-right: solid 2px #B4B4BC;
            background-color: #3A3A3A;
        }
        u.cornertitle u.h3
        {
            margin: 0 2px;
            border-left: solid 1px #B4B4BC;
            border-right: solid 1px #B4B4BC;
            background-color: #3A3A3A;
        }
        u.cornertitle u.h4
        {
            margin: 0 1px;
            height: 2px;
            border-left: solid 1px #B4B4BC;
            border-right: solid 1px #B4B4BC;
            background-color: #3A3A3A;
        }
        .csstitle
        {
            height:20px;
            padding:3 0 0 10;
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr= 'lightblue' , endColorStr= '#FFFFFF' , gradientType= '1' );
            border-bottom: lightblue 1px solid;
        }
    </style>
    <head>
        <body>
            <hr />
            <table width="100%">
                <tr>
                    <td width="50%" valign="top">
                        <div>
                            <u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
                            </u></u>
                            <div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;">
                                <div style="width: 100%; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E3E3E6', endColorStr='#F3F3F3', gradientType='0');">
                                    <div style="margin: 0 10 0 10; font-weight: bold;">
                                        分栏效果一
                                    </div>
                                </div>
                                <div style="margin: 10 10;">
                                    <a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
                                    <a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
                                    <a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div>
                            <div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;
                                border-top: solid 1px #B4B4BC;">
                                <div class="csstitle">
                                    分栏效果三
                                </div>
                                <div style="width: 100%; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E8F7F5', endColorStr='#FFFFFF', gradientType='0');">
                                    <div style="margin: 10 10 10 10">
                                        <hr />
                                        <hr />
                                        <hr />
                                        <hr />
                                        <hr />
                                        <hr />
                                        <hr />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td width="50%" valign="top">
                        <div>
                            <u class="cornertitle"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
                            </u></u>
                            <div style="border-bottom: solid 1px #B4B4BC; border-left: solid 1px #B4B4BC; border-right: solid 1px #B4B4BC;">
                                <div style="width: 100%; background-color: #3A3A3A;">
                                    <div style="margin: 0 10 0 10; font-weight: bold; color: White;">
                                        分栏效果二
                                    </div>
                                </div>
                                <div style="margin: 10 10;">
                                    <a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
                                    <a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
                                    <a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
                                    <a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
                                    <a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
                                    <a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
                                    <a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
                                    <a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
                                    <a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a><br />
                                    <a style="text-decoration: none;" href="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a><br />
                                    <a style="text-decoration: none;" href="a">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a><br />
                                    <a style="text-decoration: none;" href="a">cccccccccccccccccccccccccccc</a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </body>
</html>

转载于:https://www.cnblogs.com/zrx401558287/archive/2009/02/05/1384706.html

weixin_33825683
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5标题分栏,网页分栏设计和不同的CSS样式
weixin_39792686的博客
06-17 1336
网页分栏设计写网页的时候，我们可能觉得自己做出来的东西和真正的网页有所差别，总是“少了点什么”。这很有可能是因为我们的网页没有注意分栏哦。这里是天猫主页的截图，大家可以观察一下它的分栏设计。右上角是搜索栏，页眉是导航栏，中间是促销广告，分栏十分清晰。我们将用CSS来实现一个基本的分栏页面，大致分布如下。导航栏导航栏的制作我们在前面一篇文章中已经讲过了，这里只贴代码。CSS样式：ul { /*设置导...
js 分栏效果实现代码
10-29
分栏效果是一种常见的用户界面效果，指的是将网页分成多个区域，每个区域可以独立地进行编辑、浏览或其他操作。分栏效果广泛应用于各种Web应用程序中，如管理后台、数据分析平台、 在线编辑器等。 知识点二：...
圣杯布局和双飞翼布局的理解与思考
FengziTianYu的专栏
09-17 426
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点： 两侧宽度固定，中间宽度自适应 中间部分在DOM结构上优先，以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的<div>标签 下面我将依次介绍圣杯布局和双飞翼布局的实现方法，并在最后
常见的页面布局(两栏布局、三栏布局)
yangpengze的博客
01-10 738
理解双飞翼和圣杯布局
网页布局，左右分栏实现——原来是响应式的锅
chudaxiakkk的专栏
05-21 3200
开发博客系统，现在要开发 “用户个人空间页”。 这次参考csdn的布局 它是分左右两栏。 它是通过display：left 、 display：right来做左右的。 在我个人实践时，当缩小浏览器窗口，**右侧的文章栏 会自动换行。**导致页面很难看 我是用bootstrap4 UI框架的。csdn很多页面也是用bootstrap4。 通过F12，可以看到class 确实是使用了container 但是，这里确实没有用到bootstrap4，而是自定义 响应式属性。 导致和我自己引入bootstrap4的
html5页面上下分栏,HTML5+CSS3 分栏效果
weixin_34221374的博客
06-03 1448
HTML5+CSS3 分栏效果在很多刊物、报纸、网页中，都会看到将文本内容分成几栏的效果。而columns属性就可以同时定义多栏的数目和每栏宽度等。通过上述语法中，中文参数的含义，即可理解“宽度”代表着每栏的宽度。而“栏目数”代表着所要分隔的栏数。1．column-width属性该属性主要用来定义每栏的宽度。为负值。2．column-span属性该属性定义元素可以在栏目上定位显示。位在栏目的Z轴...
html5响应式左右分栏个人主页模板
07-14
左右分栏布局是一种常见的网页设计模式，通常用于展示主要内容和侧边栏信息。在这个模板中，左侧栏可能包含主要的文章内容，右侧栏则可能展示相关的链接、广告、或者用户个人信息。使用CSS，我们可以设置两个栏目的...
网页样式css3
11-14
`column-count`、`column-gap`、`column-width`等属性可以帮助开发者实现自动分栏，提升网页设计的灵活性。 **边框与背景** CSS3的边框和背景功能有了显著提升。你可以使用`border-radius`创建圆角，使用`box-...
可爱分栏css模板下载
12-01
它允许我们将样式与内容分离，使得网页设计更加灵活且易于维护。标题“可爱分栏css模板下载”表明我们将讨论的是一种具有可爱风格的CSS分栏布局模板，适用于那些希望为网站增添温馨、趣味性元素的设计者。 描述中的...
CSS实现网页分栏布局的方法：绝对定位和浮动.pdf
最新发布
11-26
在网页设计中，CSS是样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的外观和格式。本文主要探讨CSS如何实现网页的分栏布局，重点集中在绝对定位和浮动这两种方法。 1. **绝对定位** 绝对...
CSS实现网页分栏布局的方法：绝对定位和浮动
09-27
网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的
html页面分栏显示
11-16
采用非iframe形式，实现页面分栏效果
页面分栏布局
郑怪兽
07-15 339
1）用BDC实现分2栏：右栏自适应 <style> *{ margin:0; padding:0; } html,body{ height:100%; } .box{ width:100%; height:100%; background:orange; }
网页设计中分栏布局的几种实现方案
weixin_34407348的博客
09-13 2630
在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。 三栏布局 三栏布局最常见的就是左右定宽，中间自适应的方式，我们就先以这种方案开始讲述。 首先我们先假设页面的高度固定为100像素，下面先快速地看一遍，五种布局方案...
CSS多栏布局-两栏布局和三栏布局
weixin_44286392的博客
07-25 1211
css多栏布局
HTML框架详解：创建分栏网页教程
HTML框架提供了灵活的页面布局方式，使得网页设计者能够组织复杂的信息架构，并且通过不同的HTML元素来控制页面样式和交互。掌握HTML框架对于开发动态和交互式的网站至关重要，因为它允许内容在多个视口间共享和管理...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值