html网页页面布局如何切换到设计视图

html网页页面布局如何切换到设计视图,第1张

html网页页面布局如何切换到设计视图 方法如下,1、首先,打开你常用的浏览器,就可以看见d出的是当前浏览器默认的主页。

2、点击浏览器右上角的三点,在d出来的方框里找到“设置”选项并点击。

3、然后在d出来的页面中可见目的浏览器绑定的页面链接,我们点击链接后面的“×”号,把该链接删掉。

4、然后在输入框里输入我们想要修改的主页网址,再点击右侧的保存图标。

5、然后关闭浏览器,重新打开,就可以看见d出来的主页已经变成我们想要的主页啦。

html 选项卡切换内容方法:

工具/原料

网页编辑器dreamweaver

javascript中的getElementById和getElementsByTagName方法

*** 作步骤:

1、三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、 制作HTML结构框架

2、完成对应CSS的输入,使页面形成特定布局

<!DOCTYPE html> 

<html lang="en"> 

<head> 

 <meta charset="UTF-8"> 

 <title>tab切换</title> 

 <style type="text/css"> 

 button { 

  width:120px 

  height: 32px 

  line-height: 32px 

  background-color: #ccc 

  font-size: 24px 

 } 

 div { 

  display: none 

  width:200px 

  height: 200px 

  font-size: 72px 

  color:#ddd 

  background-color: green 

  border:1px solid black 

 } 

 </style> 

</head> 

<body> 

 <button style="background-color: yellow">1</button> 

 <button>2</button> 

 <button>3</button> 

 <button>4</button> 

 <div style="display:block">1</div> 

 <div>2</div> 

 <div>3</div> 

 <div>4</div> 

 <script type="text/javascript"> 

 var buttonArr = document.getElementsByTagName("button") 

 var divArr = document.getElementsByTagName("div") 

 for(var i = 0 i < buttonArr.lengthi++) { 

 buttonArr[i].index = i 

 // buttonArr[i].setAttribute("index",i) 

 buttonArr[i].onclick = function() { 

  for(var j = 0 j < buttonArr.length j++) { 

  buttonArr[j].style.backgroundColor = "#ccc" 

  buttonArr[this.index].style.backgroundColor = "yellow" 

  divArr[j].style.display = "none" 

  divArr[this.index].style.display = "block" 

  } 

 } 

 } 

   

 </script> 

</body> 

</html>

3、输写javascript代码,对选项卡标头分别注册相应的事件

<!doctype html> 

<html lang="en"> 

<head> 

 <meta charset="UTF-8"> 

 <title>tab</title> 

 <style type="text/css"> 

 * {padding:0 margin:0} 

 button { 

  background-color: #ccc 

  width:80px 

  height: 30px 

 } 

 .btn-active { 

  background-color: yellow 

  font-weight:bold 

  font-size: 14px 

 } 

 div{ 

  width:200px 

  height: 200px 

  font-size: 64px 

  background-color: #0c0 

  display: none 

  color:#fff 

 } 

 .div-active { 

  display: block 

 } 

 </style> 

</head> 

<body> 

 <button class="btn-active">按钮1</button> 

 <button>按钮2</button> 

 <button>按钮3</button> 

 <button>按钮4</button> 

 <div class="div-active">1</div> 

 <div>2</div> 

 <div>3</div> 

 <div>4</div> 

 <script type="text/javascript"> 

 //1.先获取元素 

 var buttonList = document.getElementsByTagName("button") 

 var divList = document.getElementsByTagName("div") 

 //2.添加事件 

 for(var i = 0 i < buttonList.length i++) { 

 buttonList[i].index = i 

 buttonList[i].onclick = function() { 

  for(var j = 0 j < buttonList.lengthj++) { 

  buttonList[j].className = "" 

  divList[j].className = "" 

  } 

  this.className = "btn-active" 

  divList[this.index].className = "div-active" 

 } 

 } 

 </script> 

</body> 

</html>

4、完整代码:

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title> 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

     *{padding:0px margin:0px}

      a{ text-decoration:none color:black}

      a:hover{text-decoration:none color:#336699}

       #tab{width:270px padding:5pxheight:150pxmargin:20px}

       #tab ul{list-style:none display:height:30pxline-height:30px border-bottom:2px #C88 solid}

       #tab ul li{background:#FFFcursor:pointerfloat:leftlist-style:none height:29px line-height:29pxpadding:0px 10px margin:0px 10px border:1px solid #BBB border-bottom:2px solid #C88}

       #tab ul li.on{border-top:2px solid Saddlebrown border-bottom:2px solid #FFF}

       #tab div{height:100pxwidth:250px line-height:24pxborder-top:none  padding:1px border:1px solid #336699padding:10px}

       .hide{display:none}

    </style>

    <script type="text/javascript">

    // JS实现选项卡切换

    window.onload = function(){

    var myTab = document.getElementById("tab")    //整个div

    var myUl = myTab.getElementsByTagName("ul")[0]//一个节点

    var myLi = myUl.getElementsByTagName("li")    //数组

    var myDiv = myTab.getElementsByTagName("div") //数组

    for(var i = 0 i<myLi.lengthi++){

        myLi[i].index = i

        myLi[i].onclick = function(){

            for(var j = 0 j < myLi.length j++){

                myLi[j].className="off"

                myDiv[j].className = "hide"

            }

            this.className = "on"

            myDiv[this.index].className = "show"

        }

      }

    }

    </script></head><body><!-- HTML页面布局 --><div id = "tab">

        <ul>

        <li class="off">房产</li>

        <li class="on">家居</li>

        <li class="off">二手房</li>

        </ul>

    <div id="firstPage" class="hide">

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab/a><br/>

            <a href = "#">切换代码tab</a><br/>

    </div>

    <div id="secondPage" class="show">

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

    </div>

    <div id="thirdPage" class = "hide">

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

            <a href = "#">切换代码tab</a><br/>

    </div></div></body></html>

今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:

第一步:在连接样式表的元素里定义一个id,例如

复制代码

代码如下:

<link

href=”1.css”

rel=”stylesheet”

type=”text/css”

id=”css”>

我定义的id是css。

第二步:写一个js函数,代码如下:

复制代码

代码如下:

<script

type=”text/javascript”>

function

change(a){

var

css=document.getElementById(“css”)

if

(a==1)

css.setAttribute(“href”,”1.css”)

if

(a==2)

css.setAttribute(“href”,”2.css”)

}

</script>

这个函数的code可以放在页面的任何地方。

第三步:为改变页面的样式表的连接添加一个函数的触发事件,代码如下:

复制代码

代码如下:

<a

href=”#”

onClick=”change(1)”>1.css</a>

<a

href=”#”

onClick=”change(2)”>2.css</a>

该效果在IE和FF下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是:

在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。

另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%

方法二:

第一步:导入两套css文件

复制代码

代码如下:

<link

rel="stylesheet"

type="text/css"

title="样式A"

href="css/people1.css"

/>

<link

rel="alternate

stylesheet"

type="text/css"

title="样式B"

href="css/people2.css"

/>

第二步:写切换的js函数

复制代码

代码如下:

<script

type="text/javascript">

var

title

=

"样式A"

function

setStyle(){

//只是样式A

和样式B切换

if(title=="样式A"){

title

=

"样式B"

}else{

title

=

"样式A"

}

var

i,links

//用dom方法获取所有link元素

links

=

document.getElementsByTagName("link")

//判断每个link元素中是否含有style字符串

,用来判断此link元素为样式表link

,同时判断此link是否包含title属性

for(i=0

links[i]

i++){

if(links[i].getAttribute("rel").indexOf("style")

!=

-1

&&

links[i].getAttribute("title")){

//把所有link设为disabled

links[i].disabled

=

true

//再来判断title中是否有指定的title字符串

有则把当前的link设为可视

即激活当前的link

if(links[i].getAttribute("title").indexOf(title)

!=

-1){

links[i].disabled

=

false

//alert("ok")

}

}

}

}

</script>

第三步:在html标签中调用切换的js函数

复制代码

代码如下:

<a

href="#"

onclick="setStyle()"

>1</a>

<a

href="#"

onclick="setStyle()">2</a>

<a

href="#"

onclick="setStyle()">3</a>

<a

href="#"

onclick="setStyle()">4</a>

<a

href="#"

onclick="setStyle()">5</a>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/zaji/6290216.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存