CSS中如何实现分屏，或者点开一个网页时打开两个网页

html-css08

CSS中如何实现分屏，或者点开一个网页时打开两个网页,第1张

css不行，使用JavaScript的open方法即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function change(){

var sw=window.screen.width

var sh=window.screen.height

window.open('http://www.google.com','newWin1','width='+sw/2+',height='+sh+',screenX=0,screenY=0')

window.open('http://www.baidu.com','newWin2','width='+sw/2+',height='+sh+',screenX='+sw/2+',screenY=0')

}

</script>

</head>

<body>

<a href="###" onclick="change()">ddddd</a>

</body>

</html>

css让网页各屏背景全屏显示，首先需要理解就是浏览器展示区域，其实就是body这个部分，想要让背景全屏的话，需要用到css的background这个属性，在选择好背景的图片就可以了，具体看下代码：

<html>

<head>

<style>

body{

background:url('图片地址')repeat 0px 0px

}

</style>

</head>

<body>

<p>我是测试文字</p>

</body>

</html>

<style>

    .a { display: flex background-color: #000 }

    .a div { height: 50px }

    .a .a1 { flex-grow: 1 background-color: #c00 }

    .a .a2 { flex-grow: 2 background-color: #008000 }

    .a .a3 { flex-grow: 3 background-color: #ff7f50 }

    .a .a4 { flex-grow: 4 background-color: #ff1493 }

</style>

<div class="a">

    <div class="a1">

    </div>

    <div class="a2">

    </div>

    <div class="a3">

    </div>

    <div class="a4">

    </div>

</div>