DIVCSS布局大全笔记

最新推荐文章于 2024-11-14 19:46:46 发布
最新推荐文章于 2024-11-14 19:46:46 发布
阅读量412 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： xhtml stylesheet 文档 html css import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mintian2008/article/details/5666703

一、XHTML下css+div布局总结

             1、为页面添加正确的DOCTYPE，建议使用严格型；

             2、设定一个名字空间，<html XMLns = http://www.w3.org/1999/xhtml >；

             3、声明编码语言，建议用utf-8；

             4、用小写字母书写所有的标签；

             5、为图片添加alt属性；

             6、给所有属性值加引号；

             7、关闭所有标签；

             8、收藏夹小图标(16X16)；

             9、用CSS定义元素外观；

             10、结构化代码div(division)、id、class；

             11、制作好的网站可以到w3c进行标准校正，http://validator.w3.rog, http://jigsaw.w3.org/css-validator/；

二、DOCTYPE声明

             1、DOCTYPE是document type(文档类型)的简写，用来说明使用的XHTML或HTML是什么版本；

             2、DTD叫文档类型定义，里面包含了文档的规则，浏览器根据DTD解释页面的标识，并展现出来；

             3、DOCTYPE声明是必不可少的关键组成部分；

             4、建议使用严格型

<!DOCTYPE html PUBLIC "-//W3C/DTD  XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

             5、DOCTYPE声明必须放在每一个XHTML文档最顶部，所有代码和标识之上；

三、名字空间

             1、由于在XHTML1.0中不能自定义标识，所有统一如下格式：

                   <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

             2、"xmlns"是XHTML namespace的缩写，是对名字空间的声明。"lang"指定文档所用语言；

四、定义语言编码

             1、XML文档定义方式<?xml version="1.0" encoding="gb2312"?>;

             2、由于浏览器支持不完善的原因，使用meta方式定义<meta http-equiv="Content-Language" content="gb2312" />;

             3、建议两种方式同时用来定义

五、调用样式表

             1、页面内嵌法：<style type="text/css"></style>;

             2、外部调用法：<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

             3、@import方法：<style type="text/css" media="all">@import url(css/style01.css);</style>

             4、建议使用外部调用法：<link rel="stylesheet" href="base.css?date=070101" type="text/css" media="all">,其中media指设备类型；

六、head区的其他设置

             1、收藏夹小图标：<link rel="icon" href="/favicon.ico" type="image/x-icon" />

                                   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />；

             2、为搜索引擎准备内容：

                      允许搜寻机器人搜索站内所有链接。如不想被搜索，采用robots.txt方法

                                   <meta content="all" name=robots" />

                      设置站点作者信息

                                   <meta name="author" content="momo@net.com,某某" />

                            设置站点版权信息

                                            <meta name="Copyright" content="www.w3cn.org,自由版权，任意转载 " />

                            设置站点的简要介绍（推荐）

                                            <meta name="description" content="新网页设计师，web标准的教材" />

                            设置站点的关键词（推荐）

                                            <meta name="keywords" content="designing,with,web,w3,w3c" />

七、XHTML代码规范

             1、所有的标记都必须有一个相应的结束标记；

             2、所有标签的元素和属性的名字都必须使用小写；

             3、所有的XML标记都必须合理嵌套；

             4、所有的属性都必须用引号""括起来；

             5、所有特殊符号用编码表示：< &lt、> &gt、& &amp、' &apos、 " &quot；

             6、给所有属性赋值；

             7、不要再注释内容中使用“--”；

八、CSS入门

             1、四个伪类定义链接样式，是：a:link（链接）、a:visited（访问过）、 a:hover（悬停）、a:active（点下）；

             2、在定义时必须按照“LVHA”的顺序来定义，否则可能显示的和预想的不一样；

九、CSS布局入门

             1、margin、padding是透明元素不能设置颜色值，background-image比background-color优先；

             2、所有辅助图片一律用背景处理；

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

mintian2008
关注
DIV+CSS基础教程笔记
sapphire7的博客
07-10 2503
缺点：1）显示样式和数据是绑定的在一起 2）布局的时候，灵活度不高 3）一个页面可能会有大量的元素，代码会冗余 4）增加带宽 5）搜索引擎不喜欢这样的布局优点：1）理解比较简单 2）不同的浏览器看到的效果一般是相同的 3）显示数据还是很好的 基本思想：数据和样式要分离 div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 ......
div和CSS布局大全
01-03
学习div和css的必备书籍，讲的很好，欢迎大家下载学习
Div+CSS 布局大全
01-06
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该 转换成对应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你的 HTML，我再给出一个列表，详细列出原来的表 现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的)，你需要回头重来，先不考虑“外观”，要先思考你的页面 内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来，CSS Zen Garden 是一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但 是一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的 目的，然后再根据这些内容目的建立起相应的 HTML 结构。
网页设计div+CSS布局大全
03-08
作为网页设计的基础，无论你学的是什么。这种框架设计技术是每个网站从事者必备技能。只有基础打的好，才能在不同的前端框架中显得游刃有余。
css+div网页布局大全
寂寞的博客
03-01 1万+
1.一列固定布局 style> body{ margin:0; padding:0; font-size:30px} div{ text-align:center; font-weight:bold} .head, .main, .footer{ width:600px; margin:0 auto} .head{ height:50px; background:#ccc} .main{ h
《Div+CSS布局大全》学习笔记
"《Div+CSS布局大全》是一本适合初学者的学习资料，由博客园的JesseZhao整理，内容涵盖了从基础的Div+CSS布局到更深入的网页设计技巧。这本书旨在帮助读者理解并掌握CSS布局的核心概念，通过实例和规范讲解，提升...
div css制作网页实战笔记心得
09-27
在网页设计领域，Div+CSS布局技术是一种广泛采用的方式，它可以帮助我们构建高效、响应式且易于维护的页面结构。本文将围绕一个网友在实际工作中遇到的问题和解决方案展开，主要探讨了Div+CSS在实现网页布局时的一些...
CSS学习笔记：Div+CSS布局详解
进一步，教程引导读者进入CSS布局的世界，讲解了如何定义和使用DIV作为布局容器，并引入了CSS2的盒模型概念，盒模型是理解元素尺寸计算的关键。此外，还提到了利用背景图像辅助布局的方法，这是CSS布局中常见的技巧...
div 布局_给你一份详细的CSS布局指南，请查收
weixin_39719989的博客
11-09 523
在我们前端开发过程中，写css（包括sass, less, stylus这样的预处理器）进行设计稿的样式还原是一项重要的工作，而其中，关于页面布局的部分，又是书写样式代码时候的重点和难点，这篇文章就尽可能的去总结常见的一些页面布局实现方案(并不是全部，布局实现方法太多了)，希望能够对大家有所帮助。在开始正题之前，有一点要说明：css布局中遇到的一个绕不开的问题就是浏览器兼容性，下面方案会遇到类似t...
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
icemwj的博客
10-05 2万+
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布局页面
『煮面一族』的专栏
10-02 1万+
如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?     实际上div布局并不是什么高
CSS布局大全（转载）（精华）
友人C君的博客
06-06 1101
原文地址：https://juejin.im/post/5aa252ac518825558001d5de 内容目录 一、水平居中(1)文本/行内元素/行内块级元素▲(2)单个块级元素▲(3)多个块级元素(4)使用绝对定位实现▲(5)任意个元素(flex)★本章小结： 二、垂直居中(1)单行文本/行内元素/行内块级元素▲(2)多行文本/行内元素/行内块级元素(3)图片▲(4)单个块级...
第九章 DIV+CSS概述
最新发布
2301_80634189的博客
11-14 745
div标签在Web标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有CSS的影响下，每个div标签只占据一行，即一行只能容纳一个div标签。
div的简单布局
04-02 1万+
div的简单布局 一、标签定义及使用说明： 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 **二、提示和注释** 提示： 元素经常与 CSS 一起使用，用来布局网页。 注释：默认情况下，浏览器通常会在 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。 **三、属性** *1、全局属性* 1）accesskey 设置访问元素的键盘快捷键。 2）class 规定元素的类名（classname） 3）cont
12种常见的div+css布局实例
passport_daizi的博客
04-01 7306
图示： 源码参考国外的一个网站： http://www.mycelly.com/
DIV 左右布局方案
热门推荐
又言又语
03-01 7万+
DIV 左右布局方案
div布局
前景
11-01 1297
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" conten
什么是div+css
lihaikuo666的博客
07-12 3040
什么是div+cssCSS（Cascading Style Sheet）中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计，它以HTML语言为基础，在学习CSS前你要具备我们HTML教程中基础知识,CSS提供丰富的格式化功能，如字体、颜色、背景及整体排版等，Web设计者可以设置不同的样式风格。纠正d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值