要对网页中各个元素（网页的基本元素都有哪些）

本文目录

• 网页的基本元素都有哪些
• 在网页制作中,通常用什么来控制文本,图片等各种元素的位置
• 如果想对某网页元素设置宽高属性,可以对其设置什么属性
• 怎么用CSS给网页中的元素（图片、文字等）定位
• 网页上一般都包含哪些基本元素
• css不能动态地对网页各元素进行格式化
• 网页设计中让元素居中的方法

网页的基本元素都有哪些

网页基本元素包括：文字、图片、音频、动画、视频。 文字，符合排版要求。图片、音频、动画、视频，符合网络传输及专题需要。

网页组成元素：从页面结构的角度上看，网页主要由导航栏、栏目、及正文内容这三大要素组成。网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的。

1、导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。

2、栏目是指网页中存放相同性质内容的区域。在对页面内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。

3、正文内容是指页面中的主体内容。例如一个文章类页面，正文内容就是文章本身；而对于展示产品的网站，正文内容就是产品信息。

扩展资料：

网页结构类型：

创建网页结构实际就是对导航栏、栏目、及正文内容这三大页面基本组成元素进行组织布局。根据页面内容侧重点的不同，可以把网页分为导航型、内容型及导航内容结合型三种。

网页栏目结构一般来说，一个企业网站的一级栏目不应超过8个，而栏目层次以三层以内比较合适。网站栏目设置是一个网站结构的基础，也是网站导航系统的基础，应做到设置合理、层次分明。对网站栏目结构的研究室网络营销导向网站建设的基础。

还有网页的布局，传统的基于HTML的网站设计中，网页结构定位通常有表格定位和框架结构，现在主流是采用表格定位；基于XHTML语言的网站设计中，典型的定位方式采用层。

参考资料：

百度百科--网页结构

在网页制作中,通常用什么来控制文本,图片等各种元素的位置

码字不易，希望采纳。

既然问到的网页元素的位置问题，那么就可以去参考CSS的具体属性，以下是常见属性：

(一)对于文本：

1.text-align:center，right，justify

当text-align设置为"center"，居中分布

当text-align设置为"right"， 靠右分布

当text-align设置为"justify"，均匀分布

2.text-indent:50px

当text-indent设置为具体的px，代表首行缩进具体的px

(二)对于图片：

1. float:left，right

当float设置为left时，向左浮动

2.padding:10px 或者 margin:10px

当padding或margin设置具体的px时，前者代表内边距，后者代表外边距

当marging设置为margin:0 auto;代表水平居中

3.position:absolute，relative

当position设置为absolute，代表以浏览器原点为0点进行设置位置

当position设置为relative，代表以自身位置为原点进行位置设置

以上，都是常规的位置设置，如果使用flex布局，还会有更简单的设置方法，比如水平垂直居中，可以按下列方法设置

display:flex;

justify-content:center;                

align-items:center;    

如果想对某网页元素设置宽高属性,可以对其设置什么属性

教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
HTML中，标签可分为块级元素标签和行内元素标签。
什么是块级元素？
总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
什么是行内元素（内联元素）？
和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
将行内元素转换为块级元素，以设置宽高
一般情况下，行内元素是不能直接设置width和height的，不具有物理属性，这也是它不占据一行的原因。
但我们可以通过设置display:block;或者display:inline-block;样式，将其转换为块级元素或行内块元素，进而设置宽高。

怎么用CSS给网页中的元素（图片、文字等）定位

《div》 图片、文字 《/div》
一般我是同过 设置 padding（补白） margin（边距）等样式来在页面上排版，
有一些就是position 是在整个页面上定位
=================================
position : static; /* 无定位 */
position : relative; /* 依物件左上角为基准取相当位置 */
position : absolute; /* 依网页左上角为基准取绝对位置 */
position : fixed; /* 固定位置不受滚动条影响 */
===================================
设置了position属性 然后直接｛top:100px;｝还可以用margin-top:-100px;
margin在设置了position 后可以 为负值例如“-100px;
”

网页上一般都包含哪些基本元素

网页的基本元素：

一.文本：文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。

二.图像：图像元素在网页中具有提供信息并展示直观形象的作用。

静态图像。在页面中可能是光栅图形或矢量图形。通常为GIF，JPEG或PNG；或矢量格式，如SVG或Flash。

扩展资料

在网页设计的过程中，确保元素的视觉和功能表里如一

许多元素的外观特征会呈现出它功能性的一面，这也就是我们常说的显而易见、不言自明的设计。链接通常会呈现成特定的色彩，带有下划线，如果你的内容文本中有这么一段文字拥有这样的特征，用户通常会认为它是一个链接。

如果点击的时候发现它无法跳转，会让人有“被欺骗”的感觉。用户需要知道哪些内容是可点击的，而哪些只是强调，设计要表里如一。

参考资料：百度百科—网页

css不能动态地对网页各元素进行格式化

可用以下方式解决。
1、删除行内元素之间的换行符、tab（制表符）、空格等字符写代码的时候，在li之间不要有间隙，可以把代码格式化，放在一行显示。
2、给父辈元素设置font-size：0，该方法需要重新给元素单独设置字体大小属性。
3、更改代码书写方式。

网页设计中让元素居中的方法

我们在进行Web前端代码时，经常会遇到元素需要居中的问题，为此，特地总价了一下几种让元素居中的方法。
一、水平居中（text-align：center;） 这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。
二、使用margin:0 auto;水平居中 前提： 给元素设定了宽度和具有display：block；的块级元素。 让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。
三、定位实现居中(需计算偏移值) 原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。缺点：高度宽度需事先知道。 div class="absolute_p1" div class="absolute_c1"/div /div .absolute_p1 { position: relative; width: 200px; height: 200px;} .absolute_p1 .absolute_c1 { width: 100px; height: 100px; position: absolute; /* fixed 同理 */ left: 50%;  top: 50%; margin-left: -50px; margin-top: -50px; /* 需根据宽高计算偏移量 */} 该方法普遍使用，但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的，比方说页面需要弹出一个DIV层必须要居中显示，DIV的内容是动态的，所以宽高也是动态的，这是可以用jquery解决居中。
四、jquery实现水平和垂直居中。 jquery实现水平和垂直剧中的原理是通过jquery设置div的css，获取div的左，上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div的css设置要在resize（）方法中完成，就是每次改变窗口大小是，都要执行设置div的css，代码如下： $(function(){ $(window).resize(function(){ $(’.mydiv’).css({ position:’absolute’, left:($(window).width()-$(’.mydiv’).outerWidth())/2, top:($(window).height()-$(’.mydiv’).outerHeight())/2 }); }); }) 此方法的好处就是不需要知道div 的具体宽度和高度，直接用jquery就可以实现水平和垂直居中，并且兼容各种浏览器。这个方法在很多的弹出层效果中应用。
五、 定位实现居中(不需计算偏移值，margin：auto；和定位搭配使用) 这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度。 div class="parent" span class="child"margin:auto;和定位使用/span /div .parent{ border: 1px solid #002FFF; width: 400px; height: 400px; position: relative; } .child{ width: 200px; height: 120px; background: #ddd; text-align: center; line-height: 120px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
六、calc和定位的组合使用 calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。 calc使元素居中的原理和负margin是一样的，calc 允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。 我们需要把图片向左和向上各移动图片宽高的一半。计算公式为： top: calc(50% - (w / 2)); left: calc(50% - (h / 2)); /*css*/ div{ border:1px solid red; width: 200px; height: 200px; position: relative; } div span{ width: 150px; height: 50px; background: #ddd; position: absolute; top: calc(50% - (50px / 2)); left: calc(50% - (150px / 2)); } !--HTML-- div span我是span元素/span /div
七、使用css3的新属性transform:translate(x,y)属性 这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好 原理: 通过定位使元素左上角居中，再通过 translate 位移元素使之中心居中，由于 translate支持百分比，所以也就不用自己算偏移量了
八、使用flex居中 使用flex居中不需要知道元素本身宽高以及元素的属性。 /*css*/ div{ border:1px solid red; width: 200px; height: 200px; display: flex; justify-content: center;/* 水平居中*/ align-items: center;/* 垂直居中*/ } div span{ background: #ddd; } !--HTML-- div span我是span元素/span /div
九、使用table-cell居中 使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。 /*css*/ .center-aligned{ border:1px solid red; width: 200px; height: 200px; display: table; } .center-core{ display: table-cell; text-align: center; vertical-align: middle; } span{ background: #ddd; } !--HTML-- div class="center-aligned" div class="center-core" span我是span元素/span /div /div