静态网页心得一

最新推荐文章于 2024-01-09 20:33:33 发布

xu_zihao

最新推荐文章于 2024-01-09 20:33:33 发布

阅读量942

点赞数 3

分类专栏：总结心得文章标签： HTML CSS

本文链接：https://blog.csdn.net/xu_zihao/article/details/93880684

版权

总结同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

心得

9 篇文章 0 订阅

订阅专栏

本文介绍了静态网页的概念，以及在模仿页面制作时在结构、布局和细节上遇到的挑战。重点讨论了CSS的基本理念，包括盒模型、display属性、position和float的运用，以及HTML元素类型的区别。通过理解这些概念，可以更好地掌握静态网页的设计技巧。

摘要由CSDN通过智能技术生成

静态网页

定义：是指没有后台数据库，不含程序不可交互的网页。你写什么它就显示什么，不会有更改。

在模仿页面制作中遇到的问题

结构
布局
细节

结构上

<html>
<head>
<!--里面包括样式 -->
</head>
<body>
<!--之间的文本是可见的页面内容-->
</body>
</html>

布局上

在制作一个页面之前，首先分析页面布局
[外链图片转存失败(img-X1JgbqXd-1562057004871)(http://www.daqianduan.com/wp-content/uploads/2018/03/html5-768x508.png)]

细节上

主要出现问题的地方

什么是css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，如果把HTML比做成一个人head是头body是身体，那么css就是肉，用来修饰个网页

css的基本理念：盒模型 dispaly postion float

盒模型

如果不写任何CSS代码，HTML文档中的元素是按照出现顺序显示的，从上到下，从左到右。这是很自然的处理方式，我们在纸上或者在电脑上写文章也都是按照这种顺序。

具体到一个特定HTML元素的显示，它会被呈现为一个矩形，CSS标准中称之为Box。一个HTML元素占据空间的大小由盒模型决定。在盒模型中，一个盒子由内容、内边距、边框和外边距共同构成，其尺寸也是这四部分的尺寸之和。

<style>
.box{
	 width: 100px;
	 height: 100px;
	 border: 10px solid blue;
	 padding: 30px;
	 margin: 40px;
	 background: yellow;
}

按F12可以更直观的的看到盒模型

内容区域是最内部的浅蓝色方框部分，是由width: 100px; height: 100px;定义的，即高为100px，宽为100px
内边距区域由padding属性定义
边框区域由border属性定义
外边距区域由margin属性定义

HTML元素类型

在开始不明白HTML元素占据一整行的时候常出现两个盒子上下排列而不是在一行
这是因为HTML元素分为两种类型：

块元素（block）
行内元素（inline）

块元素的特点是：

每个块元素都从新的一行开始，自己占一行
元素高和宽是可设的

例如 < div > < p > < ul > < form >等

行内元素的特点是:

和其他行内元素在一行
元素长和宽不可设置

< a >< span >< em >< strong >等就是

display属性

行内元素与块元素也可以相互转化，在CSS中将行内元素可以通过display: block设置为以块元素的方式显示，我们还可以继续设置该元素的长宽等原本不能设置的属性。同样，我们也可以设置块元素的display属性为display: inline，这样块元素就可以再同一行显示了。
但如果设置成行内元素那么它的width height padding margin就不可以设置了。那么就可以设置display：inline-block。这样就可以修饰行内块元素了