用css设计网页版式（网页设计与制作css样式）

本文目录一览：

• 1、如何用css进行网页布局
• 2、如何用DIV+CSS进行网页样式布局
• 3、如何快速用css加div做一个简单网页
• 4、简述css的概念和在网页设计中的作用
• 5、网页设计的新建CSS样式
• 6、在网页中使用css的几种方式

如何用css进行网页布局

1、一列布局：一般都是固定的宽高，设置margin ： 0 auto来水平居中，用于界面显著标题的展示等。两列布局：说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。

2、单列布局 又名全页布局。这是最简单的布局，用于登录页面。您有足够的空间来显示大图像，以创建可增强您的产品或品牌的声明。一栏式布局中的事物充当单独的模块，并且易于在移动设备上扩展，因为事物已经按照您希望它们显示的顺序进行了堆叠。因为它在激发情绪方面非常强大，所以这是主页，操作指南或新产品等的通用布局。

3、栅格与响应式（移动端的兴起，2007与2010）当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。

如何用DIV+CSS进行网页样式布局

1、确定页面结构和内容 创建基本的HTML结构 使用div元素创建页面的主要结构，每个div代表一个页面元素，如头部、导航栏、主要内容区、侧边栏、底部等。这样可以建立一个基础的页面骨架。使用CSS进行样式设计 接下来，通过CSS来定义每个div的样式。这包括颜色、背景、字体、大小、边距等视觉属性。

2、【答案】：CSS+DIV布局的常用方法有三种： 常规流式布局 元素按照自身的常规显示方式显示，有两个特点：元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）元素按照自身的常规显示特性显示，比如块级元素垂直排列，行级元素水平排列。

3、css的基础布局方法 块区域介绍 body div p这是一个段落./p /div /body p元素的包含块是div元素，因为作为块级元素，表单元格或行内元素，这是最近的祖先元素，类似的，div的包含块是body.因此，p的布局依赖于div的布局，而div的布局则依赖于body的布局。

4、只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。

如何快速用css加div做一个简单网页

页面中间部分，那就是我们的主体了，这里就以我们为一客户做的站点为例来说明。考虑到该行业要求打开首页快速，所以我们在网站发布的信息设 计为三列。底部，包括一些版权信息。

style type=text/cssbody{height：100%； margin：0px； padding：0px；}/style每个div，都有父容器。body就是最根源的父容器。只有把body设置为100%就可以满屏幕。共2图05 还可以添加以下底部啊什么的。大家可以自己试试。

新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。

简述css的概念和在网页设计中的作用

1、在CSS里用一个点开头表示类别选择器定义，例如：.14px {color ： #f60 ；font-size：14px ；} 在页面中，用class=类别名的方法调用：14px大小的字体 这个方法比较简单灵活，可以随时根据页面需要新建和删除。

2、css的作用是：主要用来设计网页的样式，美化网页；能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式；对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

3、详细来说，CSS主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。通过CSS，开发者可以更加灵活地控制网页的外观，实现丰富的视觉效果。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

4、css是网页表现与内容分离的一种样式设计语言，就比如每个人都有一双眼睛、两只耳朵、两个鼻孔、一个嘴巴，而长的丑的人只是他的面部样式不符合大众的审美观。网站制作中之所以要使用css，是为了让页面布局样式等更加美观从而吸引更多阅读者。

网页设计的新建CSS样式

在dreamweavercc中可以直接创建css文件，或在内面内手写输入css代码定义规则等等。如果要使用可视化css编辑，可以使用css设计器，在默认的界面下，在软件窗口右侧的活动窗口内就可以找到css设计器。

类是类选择符。如“.red”就是一个类选择符。类选择符以英文点号“.”开头，后面的名字可以自己定义。标签是类型选择符，就是html文档中的元素，如：p{} 高级是id选择符，id选择符定义的方法跟类基本相似，只是其开头不是“.”号而是英文“#”，后面的名字也是可以自己定义。

例如：新建一个html文件，点击css设计器的“源”窗口的“+”号，选择创建css的方式，包括：新建css；附件已有的css或在页面内创建css样式。

用类，标签还是ID没有绝对的标准，对错，看个人喜好。

在网页上输入一些文字。打开“CSS样式”面板，也可以用“窗口/CSS样式”打开。面板下方有四个按钮，分别是附加样式、新建样式、编辑样式、删除样式。点击“新建样式”，打开对话框。输入名称，注意名称前有一个点号。如取名为.zi（中文名不行）。

一般地讲，样式表（style sheet）就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS：代码式（Inline）：写入到代码中的一次性的样式。

在网页中使用css的几种方式

使用Embed（嵌入样式单）排版样式：即将CSS代码直接插入每个页面的HTML的区，就象上一节看到的。使用...标签。

使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。

可以以三种不同的方式在你的页面中使用CSS：代码式（Inline）：写入到代码中的一次性的样式。内嵌式（Embedded）：可控制一个页面中所有元素的样式表外联式（External）：可控制许多页面中的元素的样式表事实上，许多站点都根据需要把这三种方式结合起来使用。

【答案】：在Dreamweaver中，可以使用多种方式来应用已经创建好的CSS样式。（1）在【属性】面板的【样式】下拉列表框中选择已经创建好的样式。（2）在菜单栏中选择【文本】/【CSS样式】命令，从列表中选择一种设置好的样式。

Html中引入css的主要方式有四种，分别是外部样式、内部样式、内联样式、导入式。外部样式 （一） 使用外部样式的好处 减少代码量 ，网站中相同部分的样式只需要编写一次，我们只需要把css文件引入到不同的html页面中即可实现展示效果。

举例：通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。然后在需要此样式的页面中将其链接进来。内嵌式：（1）用法：当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。