`

页面布局整理-01

 
阅读更多
2. 初始化设置窗体的大小:

   onload= "window.resizeTo(100,100) " 

 

3. 隐藏文本域:

  <input style="background:transparent;border:0px;" value="lalalallalalalla" />

 

4.

style="padding-left:100px; padding-top:30PX"  设置层里的内容距层的边距

style = “margin-top: 10px” 设置层于层之间的边距

 

二,盒子模型

1,  设置内边框——padding

2,  要同时应用两个样式:class=calss1  calss2;

类别

属性

含义

举例

四个方向

padding-top

padding-right

padding-bottom

padding-left

内容于上边框之间的距离

内容于右边框之间的距离

内容于下边框之间的距离

内容于左边框之间的距离

padding-top5px

padding-right:5px

padding-bottom:5px

padding-left:5px

书写形式

Padding

 

在一个申明中统一四个方向的边框属性

padding:1px 2px 3px 4px

(按顺时针方向,上填充1px,有填充2px,下填充3px,昨填充4px)

 

2,设置外边距——margin

于内边距一样。

Margin:0px auto      设置对象居中

 

 3,边框 ——border  

类别

属性

含义

举例

修饰属性

border-color

border-writh

border-style

边框颜色

边框宽度

边框样式,常用值如下:

   none,默认无边框

   solid,实线

   dashed,虚线

border-color:#333333

border-writh:2px

border-style:solid

 

 

 

四个方向

border-top

border-right

border-bottom

border-left

上边框

右边框

下边框

左边框

border-top5px

border-right:5px

border-bottom:5px

border-left:5px

书写形式

Border

 

 

Border-left

在一个申明中统一四个方向的边框属性

 

在一个申明中设置左边框的属性

border:1px  solid #797976

(设置四个方向的边框为1px,红色,实线)

Border-left:1px  solid #797976

(设置左边框为1px,红色,实线)

 

 

三,浮动——float

描述

float:left

float:right

float:none

设置元素左浮动

设置元素右浮动

默认值,不浮动

例:

.cat,.sider{float:left;width:20%;height:100%}

 

四,清楚浮动—clear属性

描述

Left

Right

Both

none

在左侧不允许有浮动

在右侧不允许有浮动

在左右两侧都不允许有浮动

默认,允许两侧右浮动

#example{    Clear:left;     }

(清楚id等于” example”左侧的浮动)

 

五、属性列表

属性

方法

描述

backgrount

 

backgrount-repeat:

background-attachment:

background-position:

背景图片是否平铺

背景图片是否固定(fixed固定)

设置背景图片的位置

line

line-height:

设置行间距(行高)

font

font-weight:

设置文字的粗细

 

list-style-type:none

去掉ul-li前的黑圆点

 

text-align:center

属性规定元素中的文本的水平对齐方式

 

vertical-align:middle;

支持valign特性的对象的文本与对象,于文本在垂直方向的对齐方式。

 

分享到:
评论

相关推荐

    cms项目hw加了页面的布局整理后的

    标题"cms项目hw加了页面的布局整理后"表明这是一个关于CMS系统的项目,其中的“hw”可能代表项目的特定阶段或者开发者的代号。描述中的“运行过看到了效果”意味着更新后的布局已经成功部署并进行了测试,用户可以...

    自己整理div+css网页标准版式布局(50种布局方式)

    大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 ...

    最全面试题整理---持续更新中1

    - **渲染引擎**:负责获取页面内容(HTML、XML、图像等),计算样式(CSS),排版布局,并最终将内容渲染到屏幕上。 - **JavaScript引擎**:负责解析和执行JavaScript代码,实现页面的动态效果及用户交互功能。 ###...

    整理的漂亮登陆页面+后台页面

    漂亮的登录页面通常包含清晰的布局、简洁的元素、和谐的色彩搭配以及适当的交互效果。设计时应注重用户体验,确保表单易于填写,输入框和按钮有明确的反馈,同时提供忘记密码和注册新账户的便捷链接。HTML...

    Axure+RP+pro教程(整理-转载)

    - **自定义模板**:用户可以根据自身需求创建模板,如特定风格的界面布局或组件集合。 - **模板库**:可以将自定义模板保存至模板库,以便日后重复使用或分享给团队成员。 #### 五、Widgets 工具 Widgets(小部件...

    Flex布局学习资料

    Flex布局,全称为“Flexible Box”,也称作柔性盒布局,是CSS3中的一种布局模式,旨在提供一种更加有效和灵活的方式来控制Web页面元素的排列和对齐方式。这种布局方式特别适合处理需要动态调整的界面,比如响应式...

    网址导航引导页面H5源码-自动检测域名延迟

    1. **界面设计**:页面可能采用简洁的布局,列出各种网址链接,每个链接旁边可能有一个加载指示器或计时器,显示域名延迟信息。 2. **实时检测**:使用JavaScript或者Web Workers技术,对每个网址发起异步请求,获取...

    PS设计整洁漂亮的网页页面布局和背景[整理].pdf

    在本教程中,我们将学习如何使用Adobe Photoshop设计一款整洁且美观的网页页面布局和背景。首先,创建一个新的文档,尺寸设定为1200×1640像素,分辨率72像素/英寸。为了构建基础布局,我们需要规划页面结构,可能...

    div+css控制布局整理大全

    ### Div+CSS控制布局整理大全 #### 一、制作网页整体布局思想的转变 ##### 1.1 思想的转换 在传统的网页设计中,设计师通常会首先关注页面的视觉效果,包括图像、字体、颜色等元素的设计,并且经常采用如Photo...

    本人整理的各种页面特效模板页面

    本资源包“本人整理的各种页面特效模板页面”显然是一个宝贵的集合,涵盖了各种现代Web技术的精彩示例。下面将详细探讨这些知识点: 1. **特效**:页面特效是提升网站视觉吸引力和用户参与度的重要手段。这可能包括...

    母版页搭建页面框架-003静态页面.rar

    在ASP.NET开发中,母版页(Master Page)是一种强大的工具,用于创建具有统一布局和设计的多页面网站。"母版页搭建页面框架-003静态页面.rar"这个压缩包显然包含了关于如何将静态HTML页面转换为使用母版页的教程资料...

    DIV+CSS网页布局常用的一些基础知识整理

    - **固定定位**:元素相对于浏览器窗口定位,即使滚动页面也保持位置,`position`设为`fixed`。 4. **浮动** - `float`属性允许元素向左(`left`)或向右(`right`)浮动,常用于创建多列布局。但需注意清除浮动...

    div+css网页标准版式布局整理自www.aa25.cn

    本资源"div+css网页标准版式布局整理自www.aa25.cn"提供了40个不同的布局示例,包括20个绝对布局和20个自适应布局,是初学者学习网页布局的理想资料。 1. `div`元素:`&lt;div&gt;`是HTML中的一个块级元素,代表一个分区...

    DIV+CSS布局技巧整理集合

    ### DIV+CSS布局技巧整理集合 #### 命名规范 在进行网页设计时,合理的命名不仅能够提高代码的可读性,还能帮助其他开发者更好地理解网页结构。以下是一些常用的命名规范: - **页头**:`header` - **登录条**:`...

    书架界面布局

    - **拖放排序**:用户可以通过拖动书籍到不同的位置进行整理。 - **标签/分类**:允许用户将书籍归类,例如按作者、主题或进度,便于管理。 - **搜索/筛选**:快速查找特定书籍,支持关键词搜索、按标签筛选等...

    HTML页面源代码布局介绍_动力节点Java学院整理

    在节点中,标签是一个非常重要的容器元素,它被广泛用于通过class或id属性对页面进行布局和样式设计。通过CSS,开发者可以控制元素的尺寸、位置、边距、填充等,从而在页面上实现各种布局。 了解HTML页面源代码布局...

    div+css网页标准布局企业项目实例源码整理

    【标题】"div+css网页标准布局企业项目实例源码整理"主要涵盖了Web前端开发中的核心概念和技术,尤其是关于页面布局的部分。这个项目实例旨在帮助开发者掌握如何利用HTML的`div`元素配合CSS来实现响应式和标准化的...

    Labview页面设计素材(资源整理)

    3. **页面布局**: - **人性化设计**:遵循易用性原则,合理安排控件位置,确保操作直观。 - **响应式布局**:适应不同分辨率和屏幕尺寸,保证在各种设备上都能良好运行。 4. **资源整理**: - **1244559483089....

    自己整理的网页 页面

    本压缩包文件名为"网页页面",包含的是作者整理的一系列jpg格式的网页页面设计示例,旨在为设计师们提供灵感和参考。这些jpg图片可能是各种类型的网页设计,包括但不限于首页、产品展示页、博客页面、登录页面等,...

Global site tag (gtag.js) - Google Analytics