网页 选项卡的实现 拷贝后 以html形式保存即可

最新推荐文章于 2024-07-18 16:22:57 发布
最新推荐文章于 2024-07-18 16:22:57 发布
阅读量473 收藏
点赞数
文章标签： html class float div go border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyizhong001/article/details/5945651
版权

<html>

<head>

<title>div+css实现网页布局</title>

 

<style>

<!--

body{

margin:0px;

text-align:center;

background:#ffffcc;

}

 

#container {

width:800px;

height:1000px;

margin:auto 0px;

}

 

#header {

        float:left; 

         width:800px;

         height: 100px;

       margin:auto 0px;

          background:red;

        clear:both;

      

}

 

#logo {

float:left;

width:250px;

height:90px;

background:green;

clear:right;

margin:opx;

}

 

#banner{

float:right;

width:540px;

height:90px;

margin:0px;

clear:left;

background:blue;

}

#menu {

  width:800px;

   height:35px;

   margin:auto 0px;

 clear: both;

}

#menu  ul {

float:left; 

list-style:none;

margin:0px;

}

 

#menu ul li {

float:left;

dispaly:block; 

line-height:35px;

margin:0 10px;

}

 

.menuDiv {

width:1px;

height:35px;

background:green;

}

 

#menu ul li a:link, #menu ul li a:visited {

 

font-weight:bold; color:blue;

}

 

#menu ul li a:hover {

 

font-width:800;

color:red; 

}

 

.nav {

margin:auto 0px;

width:800px;

height:10px;

 clear:both;

 background:#ffffff;

   line-height:10px;

}

 

.nav_a {

float:left;

margin:0px;

width:610px;

 height:10px;

 clear:both;

 background:#ffffff;

   line-height:10px;

}

.left_main {

 margin:0px;

 float:left;

 width:610px;

 height:420px;

 background:red;

 

}

 

.right_main{

margin:0px;

float:right;

width:180px;

height:420px;

background:green;

clear:left;

}

 

.left_a {

margin:0px;

float:left;

width:300px;

height:205px;

background:blue;

 

}

.left_b {

margin:0px;

float:right;

width:300px;

height:205px;

background:blue;

clear:left;

}

.con {

margin:auto 0px;

width:800px;

height:200px;

background:green;

clear:both;

}

.one {

float:left;

width:200px;

height:200px;

background:#ff99f0;

clear:right;

}

 

.two{

float:left;

width:200px;

height:200px;

background:#ffcc00;

}

 

.three {

float:left;

width:200px;

height:200px;

background:#0ffff0;

}

 

.four {

float:right;

width:190px;

height:200px;

background:#f0fff0;

}

 

#footer {

width:800px;

height:100px;

background:red;

margin:auto 0px;

padding-top: 30px;

color: #ffffff;

}

  #footer a:link, #footer a:visited,{

    text-decoration:none;

    color: #ffffff;

}

#footer a:hover{

    text-decoration:underline;

    color: #ffffff;

  }

 

.tab1  h3{

float:left;

width:300px;

height:20px;

line-height:20px;

margin:0px;

font-size:13px;

text-align:left;

color:red;

background:green;

padding-left:10px;

}

 

.tab2{

        width:300px;

        height:180px;

      

       background:yellow; 

     

}

 

.tab2  ul {

margin: 4px 0 0;

list-style:none;

padding:0;

}

.tab2 li

{

float:left;

width:50%;

}

 

.tab2 li a {

display:block;

width:84%;

height:25px;

line-height:25px;

margin-left:8%;

font-size:12px;

text-decoration:none;

color:#333;

 

} 

 

#tab {

float:left;

margin:0px;

width:600px;

height:260px;

position:relative;

background:green;

}

 

#tab h3{

float:left;

width:120px;

height:26px;

line-height:26px;

margin:0 -1px 0 0 ;

font-size:12px;

cursor:pointer;

text-align:center;

color:#ff00ff;

background:#aacc33;

}

#tab div {

display:none;

}

#tab .block {

 

display:block;

}

 

#tab .up {

 

background:blue;

}

#tab  div {

            float:left;

            top:26px;

            left:0px;

            width:600px;

            height:230px;

           border:solid #eee;

           border-width:0 1px 1px;

           background:#0f0f0f;

}

 

#tab ul{

float:left;

margin:15px 0 0;

list-style:decimal;

padding:0;

clear:right;

}

#tab li {

float:left;

width:50%;

background:#123456;

}

#tab li a{

display:block;

width:90%;

height:25px;

line-height:25px;

margin-left:8%;

font-size:12px;

text-decoration:none;

color:#ffffff;

}

 

#tab li a:hover {

text-decoration:underline;

color:red;

 

}

//-->

</style>

</head>

 

 

<body>

<div  id="container" >

<div id="header">

<div id="logo">

</div>

 

<div id="banner">

</div>

</div>

 

<div id="menu">

<ul>

<li><a href="#">网站首页</a></li>

<li class="menuDiv"></li>

<li><a href="#">关于我们</a></li>

<li class="menuDiv"></li>

<li><a href="#">网站首页</a></li>

<li class="menuDiv"></li>

<li><a href="#">关于我们</a></li>

<li class="menuDiv"></li>

<li><a href="#">网站首页</a></li>

<li class="menuDiv"></li>

<li><a href="#">关于我们</a></li>

<li class="menuDiv"></li>

</ul>

</div>

<div class="nav">

nav

</div>

<div class="left_main">

<div class="left_a">

<div class="tab1">

<h3>第一个栏目</h3>

</div>

 

<div class="tab2">

<ul>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

</ul>

</div>

 

</div>

<div class="left_b">

<div class="tab1">

<h3>第一个栏目</h3>

</div>

 

<div class="tab2">

<ul>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

</ul>

</div>

 

</div>

 

<div class="nav_a">nav_left</div>

 

<div class="left_a">

<div class="tab1">

<h3>第一个栏目</h3>

</div>

 

<div class="tab2">

<ul>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

</ul>

</div>

 

</div>

<div class="left_b">

<div class="tab1">

<h3>第一个栏目</h3>

</div>

 

<div class="tab2">

<ul>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

</ul>

</div>

 

</div>

</div>

<div class="right_main">

 

</div>

<div class="nav">nav</div>

<div class="con">

<div class="one"></div>

 

<div class="two"> </div>

 

<div class="three"> </div>

<div class="four"> </div>

 

</div>

 

<div class="left_main">

<div class="left_a"></div>

<div class="left_b"></div>

 

<div class="nav_a">nav_left</div>

 

<div id="tab">

<h3  οnclick="go_to(1)">选择一</h3>

<h3 οnclick="go_to(2)">选择二</h3>

<h3 οnclick="go_to(3)">选择三</h3>

<h3 οnclick="go_to(4)">选择四</h3>

<h3 οnclick="go_to(5)">选择五</h3>

 

<div class="block"> 

<ul>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

<li><a href="#">11111111111</a></li>

</ul>

</div>

<div> 

<ul>

<li><a href="#">222222222222</a></li>

<li><a href="#">22222222222</a></li>

<li><a href="#">222222222222</a></li>

<li><a href="#">22222222222</a></li>

<li><a href="#">222222222222</a></li>

<li><a href="#">22222222222</a></li>

<li><a href="#">222222222222</a></li>

<li><a href="#">22222222222</a></li>

<li><a href="#">222222222222</a></li>

<li><a href="#">22222222222</a></li>

 

</ul>

</div>

 

<div> 

<ul>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

<li><a href="#">3333333333</a></li>

 

</ul>

</div>

<div> 

<ul>

<li><a href="#">444444444444</a></li>

<li><a href="#">4444444444</a></li>

<li><a href="#">444444444444</a></li>

<li><a href="#">4444444444</a></li>

<li><a href="#">444444444444</a></li>

<li><a href="#">4444444444</a></li>

<li><a href="#">444444444444</a></li>

</ul>

</div>

<div> 

<ul>

<li><a href="#">555555555</a></li>

<li><a href="#">555555555</a></li>

<li><a href="#">555555555</a></li>

<li><a href="#">555555555</a></li>

<li><a href="#">555555555</a></li>

<li><a href="#">555555555</a></li>

</ul>

</div>

</div>

</div>

<div class="right_main">

 

</div>

<div class="nav">nav

</div>

 

<div id="footer">

Powered by <a href="http://www.coodu.cn">Fandt</a>

  </div>

</div>

 

<script>

<!--

var h=document.getElementById("tab").getElementsByTagName("h3");

var  d=document.getElementById("tab").getElementsByTagName("div");

 

function go_to(ao)

{

for(var i=0; i<h.length; i++)

{

if(ao-1==i)

{

d[i].className+=" block";

h[i].className+=" up";

}else

{

h[i].className=" ";

d[i].className=" ";

}

}

}

//-->

</script>

</body>

 

</html>

linyizhong001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 11万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
JAVA—— HTML
weixin_50594210的博客
09-20 1981
文章目录1 HTML入门1.1 初识HTML1.1.1 概述1.1.2 HTML的组成1）标签2）属性1.2 入门案例1.2.1 初始页面1）创建一个标准的初始化页面2）页面说明1.2.2 案例实现1.3 总结2 基本语法2.1 **关于注释**2.2 关于标签2.2.1 空元素2.2.2 嵌套元素2.2.3 块级和行内1）概念2）div和span2.3 关于属性2.4 特殊字符2.5 总结3 HTML案例-新闻文本3.1 案例效果3.2 案例分析3.2.1 div样式布局3.2.2 文本标签3.3 使用标
HTML入门
楠黎倾风的博客
08-28 1310
HTML
http选项、https、会话保存、状态码
wdirdo的博客
10-21 1087
https的实现 httpd启用压缩–常用配置 使用mod_deflate模块压缩页面优化传输速度 适用场景： (1) 节约带宽，额外消耗CPU；同时，可能有些较老浏览器不支持 (2) 压缩适于压缩的资源，例如文本文件 LoadModule deflate_module modules/mod_deflate.so SetOutputFilter DEFLATE SetOutputFilte...
一篇文章让你掌握HTML+CSS
Lbsssss的博客
09-14 1734
一篇文章让你掌握HTML+CSS
html5基础知识，期末复习大全
zm321917的博客
06-02 6516
html，css，js超详细基础知识及响应式设计，动画等进阶
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】
热门推荐
weixin_43633329的博客
01-22 5万+
用VUE实现一个具有登陆、注册等功能的网站用VUE实现一个具有登陆、注册等功能的网站一、主要功能二、实现思路三、代码实现四、效果展示五、总结 用VUE实现一个具有登陆、注册等功能的网站 一、主要功能 本次任务主要是使用VUE实现一个具有登陆、注册等功能的网站 主要功能为： 1.要求三个页面 分别是登陆、注册、主页 2.记录存储已注册的用户信息列表 3. 实现各个页面之间的跳转 二、实现思路 1、页面设计 Register.vue 注册页面，包含输入用户名、输入密码、注册按钮等 login.vue登录页面，包
html链接文件不可用,使用PPT 图表显示链接文件不可用 怎么解决啊？(excel放进ppt)...
weixin_42355666的博客
07-02 2500
PPT中EXCEL图表链接不能更新这个过程是没问题的，但是需要注意的一点是在你拷贝的过程中不能更换文件的保存路径，就是说你拷贝的东西需要是原先设计的哪一个整体，不能做任何更改。ppt中插入excel如何与原excel保持同步？你可以通过POWERPNT单栏“插--对象”里面的“由文件创建”，选面的链接框更新用。这样插入的excel文件当你修改了其中的内容时，再右键点击ppt中的excel文件中的更...
移动云产品工作记录
企业实战系列集 ●●● https://ximenjianxue.blog.csdn.net
02-02 2346
背景 记录移动云相关理解和记录 初认识 1、移动云全家桶 2、云主机 云主机是一种按需获取的云端服务器，为您提供高可靠、弹性扩展的计算资源服务，您可以根据需求选择不同规格的CPU、内存、操作系统、硬盘和网络来创建您的云主机。云主机从订购到开通使用仅需数分钟时间。云主机服务可用性达到99.95%，云主机备份数据以多副本形式保存，数据可靠性可达99.9999999%。 规格： vCPU / 内存比为1:1、1:2、1:4、1:8，从“1核2G”到“80核1280G”；采用2.3GHz主频的Intel
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
qq_44891434的博客
01-29 1万+
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs） 一. HTML 1. 盒子模型 是什么：每个元素被表示为一个矩形的盒子，有四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE
适合移动网页纯原生js选项卡tab切换.zip
07-05
效果描述： ...一套原生js实现的tab选项卡切换效果，纯js，不依赖任何库实现 这个可以用在普通pc客户端，也适用移动mobile手机页面 使用方法： 1、引入css样式 2、将index.html中的代码部分拷贝过去即可
Java Clone深拷贝与浅拷贝的两种实现方法
08-26
Java Clone 深拷贝与浅拷贝的两种实现方法 Java Clone 是 Java 语言中的一种复制对象的机制，它可以将一个对象的所有属性和状态复制到另一个对象中，实现对象的深拷贝和浅拷贝。下面我们将讨论 Java 中的深拷贝和浅...
copy_files.zip_线程池实现文件目录的拷贝
09-23
线程池是一种多线程处理形式，处理过程中将任务添加到队列，然后在创建线程后自动启动这些任务。它的主要目的是减少创建和销毁线程的开销，提高系统对高并发请求的响应速度。线程池中的线程可以被重复利用，减少了...
html2canvas，无需命令安装，直接拷贝引用即可！.rar
04-04
html2canvas，无需命令安装，直接拷贝引用即可 html2canvas，无需命令安装，直接拷贝引用即可 html2canvas，无需命令安装，直接拷贝引用即可 html2canvas，无需命令安装，直接拷贝引用即可 html2canvas，无需命令...
javascript简单实现深浅拷贝过程详解
10-16
主要介绍了javascript简单实现深浅拷贝过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用 XPath 定位 HTML 中的 img 标签
最新发布
Z_suger7的博客
07-18 773
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
html 关闭信息窗口
cuisidong1997的博客
07-14 322
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
html2canvas + jspdf 纯前端HTML导出PDF的实现与问题
幸运小男神的博客
07-18 582
这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。使用 html2canvas + jsPDF 纯前端导出pdf的方式还是有很多问题的，一般情况下都是后端进行文件的导出，前端配合解决样式问题。
HTML-VUE页面调用android 客户端网络请求并返回数据
weixin_42504805的博客
07-15 204
确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。2.在WebView中设置该接口。
Linux零拷贝技术全面解析：优势、实现、应用。
Linux中的零拷贝技术是一种用于提高数据传输性能的技术，并且在Linux操作系统中有多种实现方式。本文将介绍这些零拷贝技术的背景知识，以及它们在Linux中的应用。 传统的Linux操作系统使用标准I/O接口进行数据传输...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值