分类目录归档:html/css

html5布局

HTML5中,新增了以下与结构相关的元素:

  1. section
    表示页面中的一个内容区块,比如章节、页眉、或页面中的其他部分。
    可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。
    HTML5使用方法:
    <section>  </section>
  2. article
    表示页面中的一块与上下文不相关的独立内容。
    HTML5使用方法:
    <article>  </article>
  3. aside
    表示article元素的内容之外的与article元素的内容相关的辅助信息。
    HTML5使用方法:
    <aside>  </aside>
  4. header
    表示页面中一个内容区块或整个页面的标题
    HTML5使用方法:
    <header>  </header>
  5. hgroup
    用与对整个页面或页面中一个内容区块的标题进行组合。
    HTML5使用方法:
    <hgroup>  </hgroup>
  6. footer
    表示整个页面或页面中一个内容区块的脚注。
    一般包括创作作者的姓名、创作日期以及创作者联系信息。
    HTML5使用方法:
    <footer>  </footer>
  7. nav
    表示页面中导航链接的部分
    HTML5使用方法:
    <nav>  </nav>
  8. figure
    表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
    使用figcaption元素为figure元素组添加标题。
    HTML5使用方法:
    <figure>
    <figcaption>第一</figcaption>
    <p>第一个例子</p>
    </figure>

比如说下图中的布局,html标签就可以用html5的结构标签来写,这些标签不代表布局,但语义上与它们的内容是一致的。

<header>
<h2>页头</h2>
</header>
<nav>
<h2>导航</h2>
</nav>
<aside>
<h2>侧边栏</h2>
</aside>
<article>
<h2>内容区</h2>
</article>
<footer>
<h2>页尾</h2>
</footer>

media queries-阿里巴巴前端在线笔试

这是一个前端响应式布局问题,记录下来,以免要用的时候找不到。

实现如下图所示的布局

要求:sidebar 固定宽度200px,content和header宽度自适应
当window宽度小于600px时,变成三行布局
宽度小于600px时如下

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>笔试题</title>
<style type=”text/css”>
@media (min-width:600px){
*{ margin:0px; padding:0px;}
.header{
width:auto;
background-color:#333;
}
.sidebar{
float:left;
width:200px;
margin-right:-200px;
background-color:#00F;
}
.content{
float:left;
width:100%;
background-color:#900;
margin-left:200px;
}

}
@media (max-width:600px){
*{ margin:0px; padding:0px;}
.header{
width:auto;
background-color:#333;
}
.sidebar{
width:auto;
background-color:#00f;
}
.content{
background-color:#900;
margin:0 auto;
}
}

</style>
</head>

<body>
<div class=’header’>
<h1>header</h1>
</div>
<div class=”sidebar”>
<h1>sidebar</h1>
</div>
<div class=”content”>
<h1>content</h1>
</div>
</body>
</html>

display box-阿里巴巴前端在线笔试题

下图绿色区域的宽度为100%,其中有三个矩形,第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是:
<div>
<div>column 1</div>
<div>column 2</div>
<div>column 3</div>
</div>

在网上找到如下一种写法:
<html lang=”en” >
<head>

<title>demo</title>

<style type=”text/css”>
*{
margin:0;
padding:0;
}

.box{
width:100%;

background:green;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
overflow:hidden;
-webkit-box-orient:horizontal;
}

.item{
-moz-box-flex:1; /* Safari 和 Chrome */
-webkit-box-flex:1; /* Safari 和 Chrome */
box-flex:1; /* Safari 和 Chrome */
height:60px;
background:gray;
margin:10px 0 ;
}
.item:first-child{
width:200px;
-webkit-box-flex:0; /* Safari 和 Chrome */
margin:10px;

}
.item:last-child{
margin:10px;
}
</style>
</head>
<body >
<div class=”box”>
<div class=”item”>column 1</div>
<div class=”item”>column 2</div>
<div class=”item”>column 3</div>
</div>

</body>
</html>

效果如图:

关键点有两个:

1.css3的box-flex属性:

box-flex 属性规定框的子元素是否可伸缩其尺寸。它将规定框的子元素按比例划分。在这个例子里,column1划分的宽度为0,column2和column3划分的宽度都为1,所以column2和column3是等宽的。column1的宽度由固定宽度决定。

2.css3选择器

box里的三个div的class都是item,所以用了:first-child,:last_child选择器