css弹框样式,html弹框

CSS3中的弹性框布局Flexbox可以实现的效果有哪些?

flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：

代码如下：

!DOCTYPE HTML

html

head

 meta charset="utf-8"

 title flex box 弹性布局 /title

 meta name="Keywords" content=""

 meta name="Description" content=""

 style type="text/css"

html,body{height:100%;margin:0;}/*需要添加高度控制，否则无法撑满整个屏幕*/

body{

display:-webkit-box;

-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/

}

.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块高度定死*/

.logo{width:100px;height:50px;background:#99f;}/*为区分模块，设置了背景色 logo部分固定宽高*/

.nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/

.content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/

.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}

.nav{-webkit-box-flex:1;}

.con2{-webkit-box-flex:1;}

.con1{width:200px;background:#f99;}/*固定宽度，高度不定*/

.con2{min-width:200px;background:#999;}/*同上的min-height*/

.con3{width:100px;background:#9f9;}/*固定宽度，高度不定*/

.footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/

 /style

 link href="" style="text/css" rel="stylesheet"/

/head

body

 div class="header"

div class="logo"logo部分，宽高固定/div

div class="nav"nav部分，高度固定，宽度自适应/div

 /div

 div class="content"

div class="con1"内容初始化第1模块/div

div class="con2"内容初始化第2模块/div

div class="con3"内容初始化第3模块/div

 /div

 div class="footer"底部，宽度不定，高度固定/div

/body

/html

相关问答

Q1: Css样式能限制弹出框是中英文吗？ 比如应该是 "确定""取消"按钮,弹出是"OK","cancel"

不能，这与你的浏览器工作环境有关，与css无关，css仅仅是控制样式的，而不是控制行为的，你这种中英文切换是行为，css无法实现。

Q2: 关于如何编写div+css弹窗问题

编写div+css弹窗，首先单独的div+css是无法完成的，需要通过JS或者是JQ，这里用JS为例，弹窗的实现就是通过js的alert方法来实现的，可以通过给一个链接一个点击事件，然后实现弹窗实现，具体通过代码来实现：

html

head

/head

script

function dd(){

alert('我是弹出内容');

}

/script

body

a href='地址' onclick = "dd"点我出弹窗/a

/body

/html