div+css页面布局-html代码

<html>

<head>

<title>div+css页面布局</title>

<meta http-equiv="content-type" content="text/html" >

<link rel="stylesheet" type="text/css" href="css/layout.css" />

</head>

<body>

<div id="container">

<div id="head">

<div id="logo">

</div>

<div id="banner">

</div>

<div id="tool">

</div>

<div class="nav">

</div>

<div id="menu">

<ul>

<li><a href="#">公司概况</a></li>

<li class="tiao"></li>

<li><a href="#">企业文化</a></li>

<li class="tiao"></li>

<li><a href="#">产品简介</a></li>

<li class="tiao"></li>

<li><a href="#">人才招聘</a></li>

<li class="tiao"></li>

<li><a href="#">联系我们</a></li>

</ul>

</div>

</div>

<div class="nav"></div> <!-- 分割条 -->

<div id="main">

<div class="leftbox">

<div class="left">

<div class="title"><h3>强烈推荐</h3></div>

<div class="content">

<ul>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

<li><a href="#">点我进入</a></li>

</ul>

</div>

</div>

<div class="right">

</div>

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

<div class="left">

</div>

<div class="right">

</div>

</div>

<div class="rightbox">

</div>

</div>

<div class="nav"></div> <!-- 分割条 -->

<div id="foot">

</div>

</div>

</body>

</html>

时间: 2024-10-12 12:30:50

div+css页面布局-html代码的相关文章

第6天:DIV+CSS页面布局实战

今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真是不容易.然后放松了一下,收拾了一下东西,看了一会电视剧,心情才好点了.在这个例子中我总结了几点经验: 1.ul中只能放li,li是个容器,li中可以放任何标签内容. 2.在写CSS之前,记得要对标签等清除默认样式,这样在后面布局中就不会有误差. 3.任何一种效果都可以用多种方法实现,不一定要和别人

浅谈div+css页面布局

解释:  DIV+CSS是Web设计标准,是一种网页布局方法.与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS.因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式. 方法: 在HTML文档中加入CSS.css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty

div+css页面布局

实现效果: 500 Internal Server Error (图片为效果图:上--左右--下) 代码: <!DOCTYPE html> <html> <head> <!--或者利用DW里面的母版--> <style type="text/css"> * { margin:0; padding:0; } #container { width:70%; background-color:Red; margin:0px auto

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

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

html+css页面布局

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面

【div+css网页布局详解】

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

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上