div+css 网页布局

最新推荐文章于 2023-04-07 22:11:07 发布
最新推荐文章于 2023-04-07 22:11:07 发布
阅读量941 收藏
点赞数
分类专栏： Div+Css 文章标签： div css stylesheet javascript vbscript url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldl22847/article/details/5020127
版权

今天刚弄的，呵呵

 

index.asp

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!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/html; charset=gb2312" />
<title>网站首页</title>
<link rel="stylesheet" type="text/css" href="css/styleCss.css" />
<script type="text/javascript" src="js/Comman.js"></script>
</head>

<body>
<div id="ContentAll">

<div id="CTop">
<div id="head">
<div id="Logo"><img src="images/all_03.gif" width="118" height="99" /></div>
<div id="tpright">
<div id="TpText">
<a href="javascript:void(null)" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com/');">设为首页</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(null)" οnclick="AddTest();">加入收藏</a></div>
<div id="tpflash"><img src="images/all_06.gif" width="649" height="33" /></div>
</div>
</div>
<div id="fgf">
<img src="images/all_08.gif" width="1003" height="4" /></div>
</div>

 

<div id="CMain">
<div id="leftside">
<div id="lftitle"><img src="images/all_11.gif" width="233" height="97" /></div>
<div id="lfmouth">
<ul>
<li οnclick="changeMounth(this,'1')"><div>1<br />JAN</div></li>
<li οnclick="changeMounth(this,'2')"><div>2<br />FEB</div></li>
<li οnclick="changeMounth(this,'3')"><div>3<br />MAR</div></li>
</ul>
<ul>
<li οnclick="changeMounth(this,'4')"><div>4<br />APR</div></li>
<li οnclick="changeMounth(this,'5')"><div>5<br />MAY</div></li>
<li οnclick="changeMounth(this,'6')"><div>6<br />JUN</div></li>
</ul>
<ul>
<li οnclick="changeMounth(this,'7')"><div>7<br />JUL</div></li>
<li οnclick="changeMounth(this,'8')"><div>8<br />AUG</div></li>
<li οnclick="changeMounth(this,'9')"><div>9<br />SEP</div></li>
</ul>
<ul>
<li οnclick="changeMounth(this,'10')"><div>10<br />OCT</div></li>
<li οnclick="changeMounth(this,'11')"><div>11<br />NOV</div></li>
<li οnclick="changeMounth(this,'12')" class="Cli"><div>12<br />DEC</div></li>
</ul>
</div>
<div id="lfgg">
<div id="ggtp"></div>
<div id="ggnr">
<div id="nrbt"><span id="chmounth">12</span>月活动</div>
<div id="nrmn">
<div id="nrmain">
12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍 12月暂时不安排团拍</div>
</div>
</div>
<div id="ggft"></div>
</div>
</div>

<div id="rightside">
<div id="rhgg"></div>
<div id="rhmain">
人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!人之所以能,因为相信能!
</div>
</div>
</div>
</div>
<div id="mainfoot">版权所有 版权所有 版权所有 版权所有 版权所有 版权所有 版权所有</div>
</body>
</html>

 

styleCss.css

 

 

效果图：

 

 

 

 

 

 

 

 

 

 

 

 

 

ninja
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS网页布局
DesertOrchid的博客
12-01 963
CSS盒子模型 Margin-right/left/top/bottom:当两个块级元素外边距都设置的时候，相邻的外边距不是叠加关系。而是采用谁大用谁，这种现象叫做“塌陷”。 标准流和div标记 标准流：网页默认的自然排列布局方式，即CSS规定的默认块级元素和行内元素排列方式。 网页元素=块级元素+行内元素 块级元素：h1-h6、p、div ①占据一定矩形区域； ②同级兄弟块依次...
DIV+CSS页面布局
qq_48315043的博客
10-14 4488
一、页面布局 1.确定网页的主体内容，在页面中水平居中显示 2.分析页面中的模块，思考各个模块的排版 3.控制页面中的各个模块到指定位置，完成页面布局 二、CSS的定位机制 1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定) 2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框 3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标) 三、浮动属性 1.浮动：元素脱离原有的标...
div+css布局
qq_62898618的博客
01-08 3329
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定） 1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 ...
div+css页面布局
Luqing的专栏
02-23 7595
1、什么是 DIV DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它是一个容器，DIV的起始标签和结束标签之间所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 在页面中插入div标签，其代码如下：     内容     在页面上显示为一行的效果。它是一个块状元素，在其中放置页面内容。 因此在 div+cs
Div + Css 布局网页
jxdwuao的专栏
10-18 218
先插入Div标签， ID 设置为 main。 新建Css样式，选择器类型为 高级。选择器输入 #main 。   仅对该文档。 规则定义中选择   方框，定义宽度和高度。   边界选择自动， 全部相同。 这样定义了一个外框。   在这个大的DIv里面建立小的div,  浮动选择左对齐， 这样，就相当于大的框里面嵌入了小的框，布局类似 table。 更多技巧有待继续学习。...
Div+css网页布局（一）
qq_41891425的博客
08-30 1085
Div是网页的块标记（一个div实际就是一行，行有高度height、宽度width、边框线border、背景色background-color等属性） Css文件是样式文件，可用于集中定义各div块的属性。采用css样式文件定义div块的属性，主要是为了方便后期的维护。 发现没有 例１：div+css网页布局之　一列两块。 步骤： 窗口内容大致是这样 编辑：one.css代码，定义两种div块aa和bb的属性 注意：每个属性后面以分号结束，代码中不弄个出现中文标点符号 将One.css，拖到
DIV+CSS 网页布局心得
09-27
在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将详细探讨DIV+CSS布局的核心...
学习DIV+CSS网页布局之混合布局
09-24
本文介绍的混合布局，是在DIV+CSS网页布局教程中的第四篇，内容涵盖了一般混合布局和固定宽度混合布局两种主要类型。 首先，一般混合布局是通过使用DIV元素来创建不同的布局区域，然后利用CSS样式来控制这些区域的...
学习DIV+CSS网页布局之三列布局
12-13
DIV+CSS 网页布局第三篇：三列布局 1、宽度自适应三列布局 　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列...
DIV+CSS 网页布局
weixin_30516243的博客
04-20 128
----------------------------------------------------------------------------------------------------------------------------********************************************************************...
一个简单的网页布局案例(DIV+CSS)
04-26
网页布局简单案例 通过简单的更改几行样式实现通篇布局的调整
div 布局_DIV+CSS网页布局（一）！
weixin_39955233的博客
11-29 188
——零基础自学留存，仅作笔记使用，2019.3.22更！1，head头部逻辑规范：京东商城为例！<head><meta charset="utf-8"> <!--国际标准编码 --><title>京东(http://JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title><!--网页title标题，第一个重要标题，是...
html，div+css布局,div+css网页标准布局
weixin_39926588的博客
06-10 199
DIV全称 division意为“区块、分割”,DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域。通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。cssCSS (Cascading Style Sheet)，中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。div...
【div+css网页布局详解】
FFA(Frighting for Ambition!)
05-20 3491
网页布局是制作一个网页的第一步也是最重要的一步
用css+div进行页面布局
飘影的专栏
10-12 4189
用css+div进行页面布局　　刚刚接触css布局，还真有点不适应，相比较传统的table布局，css实在是比较难用。但这是一场web页面制作的一次新革命，目的是为了适应不同终端的需要，其次是提高显示速度。至于别的好处，我到现在还没感觉到。　　如何对css进行布局？在布局之前，我有必要提一下“内容，结构，表现，行为分离”这一思想。我们用div进行结构的制作；用ul,ol,li,table,p,sp
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
DIV+CSS网页基础布局
恒的小仙女的博客
01-05 1375
1）id的使用原则 Id具有唯一性，其使用原则也是依据这一特征建立的。Id是不能重复的，所以在h5结构中的大结构一定要用id，例如标志，导航，主体内容，版权。这些根据规范命名为#logo,#nav,#content,#copyright等，本着其唯一性的原则，建议定义id尽量在网页外的盒子中使用。 2）class的适用原则 Class在css的定义具有普遍性，即class可重复，无限制的使用
使用DIV+CSS进行网页布局设计【HTML节日介绍网站——二十四节气】
最新发布
qq_38515370的博客
04-07 386
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
DIV+CSS网页布局设计指南
DIV+CSS美工布局 DIV+CSS美工布局是前台美工在MVC模式的前台界面设计中非常重要的一部分，本文将介绍如何通过DIV和CSS布局...本章将介绍如何使用CSS布局网页，包括定义DIV、CSS2盒模型、辅助图片一律用背景处理等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值