提升网页布局技巧：div+css基础代码实例

需积分: 12 92 浏览量更新于2024-09-10 收藏 5KB TXT 举报

本文档提供了一份关于"随手记"应用中使用的HTML和CSS基础代码小抄，主要涵盖了布局与样式的基本设置。首先，我们看到一个通用的样式声明，包括清除默认边距和填充、字体大小设定，以及对列表样式、超链接行为和表格边框的定义。例如，`body`标签设置了全局的边距和字体大小为12像素，`ul`和`li`等元素去除了默认的列表符号，`a`标签的链接样式在不同状态（访问过、悬停）下有不同的颜色和下划线效果。在布局方面，文档强调了在某些情况下，如处理浮动元素时，可能会用到`.clearfloat`类，确保清除浮动元素带来的影响。同时，`margin:0 auto;`用于使元素水平居中，而`display: inline-block`在IE6及更低版本中是必要的，因为这些浏览器可能不支持其他更现代的CSS属性。接下来是HTML结构部分，包括基本的HTML5结构，如`<html>`、`<head>`、`<title>`、`<body>`、`<p>`等元素的使用。同时，文档还演示了如何创建列表（`<ul>`和`<li>`）、定义定义列表（`<dl>`、`<dt>`和`<dd>`）以及表格（`<table>`、`<tr>`、`<td>`和`<th>`）的结构。对于包含IFrame和Frameset的页面，代码展示了如何嵌入多个框架或在没有支持IFrame的旧浏览器上使用`<noframes>`标签来提供备选内容。这体现了在开发跨浏览器兼容性设计时的考虑。总结来说，这份代码小抄是为了解决日常网页开发中常见的样式和结构问题，提供了简洁实用的代码示例，适用于初学者或需要快速参考的开发者。通过理解和应用这些代码，可以更好地掌握HTML和CSS的基础知识，并为创建响应式、兼容性强的网页打下基础。

/*--------全局样式--------*/
body{ padding:0; margin:0; font-size:12px; }
ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
ul{list-style:none;}
img{border:0px;}
.clearfloat{clear:both; height:0px; font-size:1px; line-height:0px;}

伪类标签的用法

a{margin:0px;padding:0px;border:0px;}有链接属性时
a:link{color:#60a179;text-decoration:none;}链接地址已被访问过
a:visited{color:#666;text-decoration:none;}被用户激活(在鼠标点击与释放之间发生的事件)
a:hover{color:#3aad7e;text-decoration:underline;}
其鼠标悬停

关于居中:margin:0px auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思

"设置背景或者盒子模型的时候，一定要先给宽和高，在检查是否行内元素或者行元素阻挡，一定要记住IE6的双边距问题,要用display:inline来解决就好了.如果想调测兼容的话记得加边框 "boder:1px solid #000"" 好了就这些了，加油哦

<html>...</html> ：规定了文档的开始和结束，告知浏览器其自身是一个 HTML文档。

<head>...</head> ：标明了文档的头部信息。该标签嵌入<html>与</html>之内。

<title>...</title> ：标明网页的标题。

<body>...</body> ：标明网页的主题部分。该标签嵌入<html>与</html>之内。

剩余7页未读，继续阅读

aa2618929

粉丝: 0
资源: 1

提升网页布局技巧：div+css基础代码实例

软考教程+小抄+真题

政治经济学原理自考笔记+自考小抄+自考串讲自考必过笔记.docx

自考00054+管理学原理自考笔记+自考小抄-简答题配答案版集合.doc

2017电大专科可编程控制器应用期末复习考试试题+复习小抄.doc

自考00054+管理学原理自考笔记+自考小抄-简答题配答案版集合..doc

2021-2022年收藏的精品资料给力自考市场营销学包括名词解释、简答、论述题以及部分案例题答案小抄代码00058.doc

redis小抄

c语言小抄c语言小抄.doc

2022年电子商务专业代码互联网数据库最新最全自考小抄.doc

2141_计算机网络技术_课后习题及答案课代码_小抄.doc

最新资源