`
jojo_java
  • 浏览: 96058 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

分散对齐,iframe,漂亮的标签页

    博客分类:
  • UI
阅读更多

分散对齐:

 

<label style="width: 53px;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify">备注:</label>

 

iframe:

<iframe name="" src="about:blank" style="z-index:1; width:100%; height:100%;" marginheight="0" marginwidth="0" hspace="0" vspace="0" frameborder="0" scrolling="auto"></iframe>

 

标签页:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<style type="text/css">
body, div, ul, li {
 margin:0;
 padding:0;
}
.tabs {
 background-color:#fad78d;
 height:28px;
 position:relative;
 border:1px solid #ffae00;
 padding:0 3px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
}
.tabs ul {
 position:absolute;
 height:29px;
 top:0px;
}
.tabs li {
 float:left;
 list-style-type:none;
 margin:0 3px 0 0;
}
.tabs li a, .tabs li a:hover {
 text-decoration:none;
 font-size:12px;
 font-weight:bold;
}
.tabs li a {
 background-color:#f6f6f6;
 color:#3f3f3f;
 border:1px solid #ffae00;
 height:23px;
 line-height:23px;
 padding:0 5px;
 margin-top:4px;
 display:block;
 float:left;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px;
 -webkit-border-top-right-radius:4px;
}
.tabs li a.selected, .tabs li a:focus {
 background:#fff;
 color:#e6820e;
 cursor:default;
 border-bottom-color:#fff;
}
.tabs li a:hover {
 background:#fff4d6 url(/images/bg_li_tabs_hover.gif) repeat-x 50% 50%;
 color:#3f3f3f;
 outline:none;
}
.tabs li a.selected:focus, .tabs li a.selected:hover {
 background:#fff;
 color:#e6820e;
}
</style>
</head>
<body style="margin:100px;">
<div class="tabs">
  <ul class="clearfix">
    <li><a href="#">菜单一</a></li>
    <li><a href="#" class="selected">菜单二</a></li>
    <li><a href="#">菜单三</a></li>
    <li><a href="#">菜单四</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
    <li><a href="#">菜单五</a></li>
  </ul>
</div>
</body>
</html>

分享到:
评论

相关推荐

    textview实现word分散对齐功能

    textview实现word分散对齐功能

    word两端对齐、分散对齐.docx

    ### Word两端对齐与分散对齐详解 #### 一、两端对齐 两端对齐是一种常用的文本排列方式,尤其在Word等文字处理软件中极为常见。所谓“两端对齐”,是指文档中的文字在水平方向上既对齐左边界也对齐右边界。这种...

    Word 表格单元格中的文字始终分散对齐

    ### Word表格单元格中的文字始终分散对齐 #### 背景与问题描述 在Microsoft Word文档中编辑表格时,可能会遇到一个让人头疼的问题:即无论怎样调整单元格内文字的对齐方式(如左对齐、居中对齐、右对齐等),文字...

    iframe中页面显示不全1

    `position: absolute`使`&lt;iframe&gt;`相对于其最近的非静态定位祖先(这里就是`&lt;div&gt;`)定位,`top`和`left`属性设置为0,使得`&lt;iframe&gt;`与`&lt;div&gt;`的左上角对齐。`width: 100%`和`height: 100%`确保`&lt;iframe&gt;`填充`...

    MyTextview

    本篇文章将深入探讨`TextView`的水平分散对齐(Horizontal Spacing)和竖直分散对齐(Vertical Spacing)的概念,以及如何实现这两种对齐方式。 首先,我们来理解一下`TextView`的基本用法。在XML布局文件中,我们...

    matlab开发-在3绘图中对齐轴标签

    在MATLAB开发过程中,我们经常需要创建各种图形,特别是在3D绘图中,对轴标签的定位和对齐显得尤为重要,因为它们可以帮助我们清晰地理解数据的分布和关系。本篇将详细介绍如何在MATLAB中实现3D绘图中轴标签的对齐。...

    ios-文字两头对齐.zip

    标签"文字视图"进一步明确了这是关于显示文本的视图组件,很可能是在谈论UILabel或者自定义的类似视图。UILabel是iOS SDK中用于展示单行或多行文本的标准控件,但默认情况下,它只支持左对齐、右对齐或居中对齐,不...

    Word 2021中段落设置之段落对齐.docx

    除了本文介绍的居中对齐、右对齐和分散对齐外,用户还可以尝试使用左对齐和两端对齐,以满足不同场景下的需求。通过熟练掌握这些基本操作,可以大大提高文档编辑的效率和质量。希望上述内容能对你有所帮助!

    word字符对不齐怎么办 word上下文字对齐图文教程.docx

    在 Word 中,characters 对齐可以通过使用分散对齐按钮来实现。具体步骤如下: 1. 选中需要修改字符宽度的文字,切换到"开始"选项卡,在"段落"组中单击"分散对齐"按钮。 2. 弹出"调整宽度"对话框,将新文字宽度设置...

    iframe自适应内容页面的高度

    - 在某些情况下,可能还需要消除`iframe`的边距和填充,以确保内容区域与`iframe`边缘对齐。可以添加如下CSS样式: ```css iframe { margin: 0; padding: 0; border: none; } ``` 5. **浏览器兼容性**: ...

    word2021段落对齐方式设置.docx

    2. 在“开始”标签页下的“段落”区域中,可以看到五个对齐图标(左对齐、居中对齐、右对齐、两端对齐和分散对齐)。 3. 直接点击相应的对齐图标即可完成设置。 ##### 方法二:通过“段落”对话框设置 1. 同样先...

    iframe弹出窗

    这里的`div`设置为固定定位(`position:fixed`),并居中对齐(`transform:translate(-50%, -50%)`)。 **3. dialog(对话框)** 在Web开发中,`dialog`通常指的是模拟操作系统中弹出对话框的一种交互方式。虽然...

    matlab开发-在3绘图中对齐轴标签matlab开发-在3绘图中对齐轴

    在MATLAB开发过程中,创建3D图形是一种常见的需求,而为这些图形添加清晰、对齐的轴标签可以显著提升图表的可读性。本篇主要介绍如何在MATLAB中实现3D绘图中轴标签的对齐,以帮助开发者更好地展示数据。 在MATLAB中...

    allegro自动对齐工具

    Allegro自动对齐工具是电路板设计领域中的一款高效实用软件插件,专门用于PCB设计的布局优化。在复杂的电路板设计过程中,元件的精确摆放对于最终产品的性能和可靠性至关重要。Allegro作为业界知名的PCB设计软件,其...

    自动对齐选择标签的做法

    在Android开发中,"自动对齐选择标签"通常是指在用户交互过程中,让标签(通常是TextView或者自定义View)根据用户的选中状态自动调整位置、颜色、大小等属性,以达到良好的视觉效果和用户体验。这一做法广泛应用于...

    iframe_常用属性知识.txt

    - `&lt;iframe align="center"&gt;&lt;/iframe&gt;`(居中对齐) - 说明:`align`属性用于定义`iframe`在页面中的水平对齐方式。尽管在HTML4中是有效的,但在HTML5中已不再推荐使用。现在更推荐使用CSS的`float`或`text-align`...

    WPF单行文本两端对齐

    WPF是不支持单行文本的两端对齐的,于是自己写了一个控件。有兴趣的朋友可以下载了解一下我的设计原理。

    Allegro两种自动对齐方法

    2. 对齐选项:在内置工具中,用户可以选择不同的对齐方式,如Top、Bottom、Left、Right、Center对齐,还可以设置对齐基准,例如以某个元器件或网络为参照进行对齐。 3. 选择对齐对象:你可以选择单个元器件,也可以...

    iframe for flex!

    4. **对齐和间距控制**:`flex`布局允许我们精确控制`iframe`的对齐方式(如居中、两端对齐)和与其他元素之间的间距,增强界面的整洁度和用户体验。 5. **加载状态管理**:在`iframe`加载过程中,我们可以利用`...

Global site tag (gtag.js) - Google Analytics