HTML_CSS布局技巧(2)

1)设置网页整体居中的代码:

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,

<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<div id="layout">标准之路test</div>

宽度为适合800×600分辨率浏览器的宽度,margin:0 auto; 这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。那么可能你要问了,text-align:center;为什么还要让内容居中呢?这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救,以下在涉及内容时再用 text-align:left;就可以了。

注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0。

2)设置容器中的内容垂直居中:

实例1设置网页整体居中的代码中内容是居容器的顶部的,而在表格布局时默认是垂直居中的,只用设置容器内的行高就行了。line-height:500px;这是一种方法,另外和种方法就是设置的它内边距padding了。

3)设置层的透明度:

有时候我们需要用到层的透明度,把下边的背景透出来

filter: alpha(opacity=70);
opacity: 0.7;

把这两句代码加入到要实现半透明层的CSS样式表里即可,70和0.7的值可改为你需要的。

时间: 2024-08-26 05:17:02

HTML_CSS布局技巧(2)的相关文章

UWP开发入门(九)——简单界面的布局技巧及屏幕适应

嘿嘿嘿,题目比较绕哈.本篇主要讨论一般情况下,页面的布局技巧,怎么将元素的展现尽量做到分辨率无关.基本的思路仍然是尽量少的标定具体的数字,而是用比列来标注各元素占据的空间. 这里我打算用易信的名片页来举例: Phone的界面看起来不错,大致以纵向排列.最上方是标题栏,头像部分居中,下面的文字以列表形式靠左对齐,最下部为留白.考虑到标题栏需要锚定在顶部,不参与比例分配.头像,文字和留白的占比大致为2.5:4:3.XAML中的Grid定义如下: <Grid.RowDefinitions> <

网页版面设计步骤和布局技巧

版面设计也可以理解为布局设计,就是我们在浏览器上说看的一个完整的页面.设计师们如何将所有要体现的内容有机的整合和分布,达到某种视觉效果,这就叫做版面布局.我们将如何做好网站的版面设计呢? 本文将介绍网页版面设计的步骤和布局技巧 网页版面设计步骤 首先我认为是“过程注定了结果”,重视你所做的每一步并把它尽量的做到最好,相信结果也不会偏离轨道.下面先让我们来了解一些版面设计的步骤: 1.构思(结构的搭建) 当然在构思之前我们总需要了解很多,如:客户的需求.网站的定位.受众群等很多方面的事情,也就是说

移动平台3G手机网站前端开发布局技巧

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的 惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是

移动平台3G手机网站前端开发布局技巧汇总

移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程

CSS总结篇—布局技巧

CSS布局技巧 单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好:不足:需要同时设置子元素和父元素 使用margin:0 au

css4种布局技巧-float

我所知的常用的布局技巧有四种,原来的三种(1.float布局  2.position布局 3.table布局)以及现在css3新增的flex布局.这四种布局各有优劣 block与inline属性比较 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可以设置margin和padding属性. dis

三栏结构布局技巧,顶了

CSS 七种三栏布局技巧 三栏布局,顾名思义就是两边固定,中间自适应,即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色和蓝色宽度固定,绿色宽度自适应,下面七种方法实现的最终效果跟这个差不多,可能会稍有不同. 下面七种技巧各有千秋,在开发中可以根据实际需求选择适合自己的方法进行编码. 1. 流体布局 <!DOCTYPE html><html lang="

DIV+CSS常用网页布局技巧!

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi

CSS之定位布局(position,定位布局技巧)

css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置. 2.各个属性值的描述: static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,在普通流中,各个元素默认的属性. relative(相对定位) 对象不可层叠.不脱离文