网页布局的例子

横向两列布局

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
color:#333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#ff0000;
}
p {
line-height:24px;
}
#wrap {
width:780px;
margin:0 auto;
padding:0 10px 10px;
border-left:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
}
#header {
width:100%;
overflow:hidden;
}
.logo {
width:100%;
height:80px;
line-height:80px;
font-size:30px;
font-family:"微软雅黑";
background:#3399cc;
color:#fff;
text-indent:30px;
}
.nav {
width:100%;
margin-top:10px;
}
.nav li {
margin:0 32px;
float:left;
}
.nav li a {
color:#7f7f7f;
font-size:16px;
display:block;
padding-bottom:2px;
}
.nav li a:hover {
border-bottom:3px solid #cc0000;
text-decoration:none;
}
.nav li.current {
border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
border-bottom:none;
}
#mainbody {
width:100%;
position:relative;
margin-top:20px;
}
#sidebar {
width:180px;
padding-bottom:10px;
}
#sidebar dl {
padding:0 0 5px;
}
#sidebar dt {
font-weight:bold;
line-height:22px;
font-family:"微软雅黑";
font-size:14px;
color:#fff;
background:#3399cc;
padding:5px 0 5px 15px;
font-weight:normal;
margin-bottom:10px;
}
#sidebar dd {
line-height:20px;
padding-left:15px;
}
#sidebar dd.current a {
color:#f00;
}
#content {
position:absolute;
top:0px;
margin-left:200px;

}
#content h1 {
color:#000;
font-size:24px;
font-family:"微软雅黑";
font-weight:normal;
}
#content h3 {
margin-top:10px;
line-height:26px;
}
#content dl {
margin-bottom:10px;
}
#content dt {
font-weight:bold;
line-height:26px;
}
#content dd {
line-height:22px;
}
.learn a {
color:#900b09;
text-decoration:underline;
padding-bottom:2px;
}
.learn a:hover {
text-decoration:none;
}
.tips {
color:#999;
margin-top:20px;
}
.pageto {
border-top:1px solid #aaa;
border-bottom:3px solid #aaa;
margin-top:5px;
padding:15px 0;
}
.pageto a {
margin:0 10px;
background:#f3f3f3;
padding:5px 20px;
border:1px solid #dfdfdf;
color:#555;
}
.pageto a:hover {
color:#000;
text-decoration:none;
}
.disline {
border-bottom:1px dashed #ccc;
margin-top:10px;
}
#footer {
width:100%;
margin-top:15px;
padding:15px 0;
text-align:center;
color:#999;
background:#ddd;
}
</style>
</head>

<body>
<div id="wrap">
<div id="header">
<div class="logo">前端开发教程</div>
<div class="nav">
<ul>
<li class="current"><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div id="sidebar">
<dl>
<dt>CSS 基础教程</dt>
<dd class="current"><a href="#">CSS 简介</a></dd>
<dd><a href="#">CSS 基础语法</a></dd>
<dd><a href="#">CSS 高级语法</a></dd>
<dd><a href="#">CSS 派生选择器</a></dd>
<dd><a href="#">CSS id 选择器</a></dd>
<dd><a href="#">CSS 类选择器</a></dd>
<dd><a href="#">CSS 属性选择器</a></dd>
<dd><a href="#">CSS 创建</a></dd>
</dl>
<dl>
<dt>CSS 样式</dt>
<dd><a href="#">CSS 背景</a></dd>
<dd><a href="#">CSS 文本</a></dd>
<dd><a href="#">CSS 字体</a></dd>
<dd><a href="#">CSS 链接</a></dd>
<dd><a href="#">CSS 列表</a></dd>
<dd><a href="#">CSS 表格</a></dd>
<dd><a href="#">CSS 轮廓</a></dd>
</dl>
<dl>
<dt>CSS 盒子模型</dt>
<dd><a href="#">CSS 盒子模型概述</a></dd>
<dd><a href="#">CSS 内边距</a></dd>
<dd><a href="#">CSS 边框</a></dd>
<dd><a href="#">CSS 外边距</a></dd>
<dd><a href="#">CSS 外边距合并</a></dd>
</dl>
<dl>
<dt>CSS 定位</dt>
<dd><a href="#">CSS 定位概述</a></dd>
<dd><a href="#">CSS 相对定位</a></dd>
<dd><a href="#">CSS 绝对定位</a></dd>
<dd><a href="#">CSS 浮动</a></dd>
</dl>
<dl>
<dt>CSS 选择器</dt>
<dd><a href="#">CSS 元素选择器</a></dd>
<dd><a href="#">CSS 选择器分组</a></dd>
<dd><a href="#">CSS 类选择器详解</a></dd>
<dd><a href="#">CSS ID 选择器详解</a></dd>
<dd><a href="#">CSS 属性选择器详解</a></dd>
<dd><a href="#">CSS 后代选择器</a></dd>
<dd><a href="#">CSS 子元素选择器</a></dd>
<dd><a href="#">CSS 相邻兄弟选择器</a></dd>
<dd><a href="#">CSS 伪类</a></dd>
<dd><a href="#">CSS 伪元素</a></dd>
</dl>
<dl>
<dt>CSS 高级</dt>
<dd><a href="#">CSS 对齐</a></dd>
<dd><a href="#">CSS 尺寸</a></dd>
<dd><a href="#">CSS 分类</a></dd>
<dd><a href="#">CSS 导航栏</a></dd>
<dd><a href="#">CSS 图片库</a></dd>
<dd><a href="#">CSS 图片透明</a></dd>
<dd><a href="#">CSS 媒介类型</a></dd>
<dd><a href="#">CSS 注意事项</a></dd>
<dd><a href="#">CSS 总结</a></dd>
</dl>
</div>
<div id="content">
<h1>CSS 简介</h1>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<h3>你应该知道这些知识</h3>
<p>在继续之前，你应该有一个以下基本认识：</p>
<p>&middot; HTML / XHTML</p>
<p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
<div class="disline"></div>
<h3>什么是CSS？</h3>
<p>CSS即级联样式表。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<div class="disline"></div>
<h3>基本信息</h3>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
<div class="disline"></div>
<h3>发展历史</h3>
<dl>
<dt>CSS1</dt>
<dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
</dl>
<dl>
<dt>CSS2</dt>
<dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
</dl>
<h3>CSS3</h3>
<dl>
<dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
<dd class="learn"><a href="#">亲自体验一下</a>！</dd>
</dl>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
</div>
</div>
<div id="footer">慕课&copy;版权所有</div>
</div>
</body>
</html>

该网页的整个设计图纸

时间： 2024-10-11 20:12:35

网页布局的例子的相关文章

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此．必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

网页布局之---固定布局、流动布局、弹性布局(转)

原文地址 有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网站. 当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨

CSS的三种网页布局模式

流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100% 流动模型(二) 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

风行一时瀑布流网页布局，实现无限加载（jquery）

今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div") var boxw = $boxs.eq(0).outerWidth(); var clos = Math.floor($(window).width()/boxw); $("#main").width(boxw*clos).css('margin','0 auto'); 二.用绝对定位

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

利用css进行网页布局

网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说).特点:1.网页可以自适应宽度2.网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部. 分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果). 一列布局: body{margin:0;parding:0;}清除默认样式,各个浏览

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一．文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二．常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note