`

HTML元素布局学习1 -- 绝对居中

HTMLCSSJavaScriptCC++ 
阅读更多

在这里我分为三个文件来练习: all.elehtml.js elehtml-buju.html  all.elehtml.css

在这里 先贴出all.elehtml.js 的内容

 

接下来看 elehtml-buju.html的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML元素布局学习</title>
</head>
<body>

<div id='container'>
	
</div>

<div id='container1'>
	
</div>


</body>
</html>

<link href='css/bjextreme/all.elehtml.css' rel='stylesheet' type='text/css'> 
<script src='js/debug/nitobibug/compressed.js' type='text/javascript'></script>
<script src='js/bjextreme/all.elehtml.js' type='text/javascript'></script>

 

 

有这两个我们可以看到 BJExtreme.Dom.$c.test(); 运行成功,可以动态创建HTML元素

 

下一步,我们将通过all.elehtml.css' 文件来使得这两个div 绝对居中[左右居中和上下居中],如图:

 

 

 

下面贴出 CSS文件的代码:

 

 

未完待续,请见第二部分

 

 

 

 

 

  • 大小: 63 KB
  • 大小: 19 KB
  • 大小: 41.5 KB
2
顶
3
踩
分享到：
| jquery选择器的调试 -- 使用其他的日志工具
评论
2 楼 vb2005xu 2009-03-24  
首字下沉
p:first-letter {
    padding: 6px;
    font-size: 32pt;
    float: left;
}
1 楼 vb2005xu 2009-03-24  
/*页面文字段落缩进*/
p {
padding: 15px; border: 1px solid black;
text-indent: 2em; /*首行缩进2个字距*/
}
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS DIV居中布局

    在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`&lt;div&gt;`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高了代码的可维护性和网页的加载效率。本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV...

    垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF

    在网页设计中，实现元素的垂直居中布局一直是一个常见的挑战，尤其是在需要兼容不同浏览器，尤其是老版本的 Internet Explorer（如 IE6、IE8）时。"垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF"这个主题...

    DIV+CSS上下左右绝对居中

    在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip

    总结来说，学习和掌握Flexbox弹性布局对于Web前端开发者至关重要，它提供了强大的布局工具，可以轻松应对各种复杂的界面设计需求。同时，了解并能灵活运用经典布局模式如圣杯布局，有助于提升布局解决方案的多样性和...

    DIV绝对居中例子

    在网页设计中，让元素居中是...总的来说，`div`的绝对居中涉及到了CSS的定位、变形、Flexbox和Grid布局等多个方面，理解并掌握这些技巧对网页设计和开发至关重要。通过不断实践和探索，你将能够灵活应对各种居中需求。

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求...同时，随着CSS规范的不断发展，如Flexbox和Grid等新布局模型，使得元素居中变得更加简单和灵活。不过，对于CSS2.1环境下的需求，上述方法已经足够应对。

    div居中-divjuzhong-master.zip

    在前端开发中，"div居中" 是一个常见的布局需求，尤其在构建网页时，我们需要让div元素在页面上水平或垂直居中显示。这里，我们主要探讨如何使用CSS（层叠样式表）来实现这一目标，同时也会涉及到HTML的基本结构。 ...

    10种经典布局和5种居中布局

    1. **流式布局**：流式布局是最基础的响应式方法，通过百分比设置宽度，使元素随浏览器窗口大小变化而自动调整。 2. **网格布局**：网格系统是将页面划分为多个单元格，便于内容的对齐和组织。Bootstrap和...

    垂直居中显示ie7+

    - 缺点：需要额外的定位代码，且可能与页面其他元素布局冲突。 5. **CSS伪元素**： - 使用`::before`或`::after`伪元素作为占位符，设置`height: 100%; vertical-align: middle;`，然后将子元素与之对齐。 - ...

    绝对居中div

    在网页设计中，"绝对居中div层"是一种常见的布局技术，用于使一个div元素在容器内保持垂直和水平居中的状态。这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述...

    图片水平垂直居中

    在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...

    页面元素居中

    - **Position absolute/fixed**：通过设置绝对定位，结合`left`和`right`或`top`和`bottom`为`0`，并使用`margin: auto`，可以实现元素的居中。固定定位类似，但元素相对于视口定位。 2. 源码解析： 在给定的博文...

    css左右居中对齐

    在网页设计中，CSS（Cascading Style Sheets）是用于控制网页元素布局和样式的语言。"css左右居中对齐"是一个常见的需求，尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中...

    01拓展-居中方式.pdf

    1. 使用弹性布局flex ```css .father { display: flex; justify-content: center; align-items: center; width: 1000px; height: 600px; background-color: pink; } .son { width: 200px; height: 300px; ...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    3. 使用绝对定位：为登录框设置绝对定位，然后通过计算窗口的一半减去元素高度的一半来设置`top`属性，实现垂直居中。同时，设置`left: 50%`并应用`transform: translateX(-50%)`使其水平居中。 在描述中提到的...

    div垂直居中-CSS元素垂直居中方法的探究

    本课程"div垂直居中-CSS元素垂直居中方法的探究"深入探讨了如何在HTML中使用CSS实现元素的垂直居中。下面将详细介绍两种主要的解决方案：文本垂直居中和块级元素垂直居中。 首先，我们来讨论文本垂直居中。在HTML中...

    div+css垂直居中和水平居中

    在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...

    DIV+CSS 图片垂直居中效果

    - **DIV**：HTML中的`&lt;div&gt;`元素是一个通用容器，用于组合其他HTML元素，常用来实现页面布局。 - **CSS**：层叠样式表（Cascading Style Sheets）是用于控制网页元素样式的语言。 2. **传统方法：绝对定位** 在...

    HTML+CSS实现单列布局水平居中布局

    在网页设计中，布局是至关重要的，而单列布局水平居中则是常见且实用的一种布局方式。本文将详细探讨如何使用HTML和CSS实现这一布局，以及它的优缺点和实际应用。 1. **父元素text-align:center; 子元素：inline-...

    自适应居中图片轮播

    1. Flexbox布局：CSS3中的Flexbox模型提供了一种简便的方式来进行水平或垂直居中。通过设置容器的`display: flex;`和`justify-content: center;`或`align-items: center;`，可以轻松实现子元素的居中对齐。 2. CSS ...

Magicbox
Global site tag (gtag.js) - Google Analytics