CSS描述了网页的布局

1.CSS格式

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明;CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

.style{color:red;text-align:center;}

2.CSS 注释:/**/

3.CSS 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

#terminal
{
text-align:center;
color:red;
}

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示

.center {text-align:center;}

指定特定的HTML元素使用class

p {text-align:center;}

4.CSS 创建
插入样式表的方法有三种:内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

外部样式表(External style sheet)

<head>
<link rel="stylesheet" href="../css/box.css">
</head>

内部样式表(Internal style sheet)

<head>
<style>
.bigBox{overflow:hidden;left: 0px; right: 0px;width: 100%;}
.LeftBox { float: left;width: 63%; height:98%; margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;}
.RightBox { float: left;width: 33%; height:98%; margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;}
.box {
position: relative;
background: #003;
border-top: 1px solid #d2d6de;
border-top-color: #383838;
}
</style>
</head>

内联样式(Inline style)

<div id="full" class="bigBox" style="height:1000px;">
时间: 2024-11-13 13:49:37

CSS描述了网页的布局的相关文章

运用CSS对静态网页进行布局和效果设置

CSS中对静态网页的布局和定位已经较为成熟  现在运用CSS(层叠样式表)已经可以对静态网页的色彩搭配 .图片点击效果.列表外观进行设置 较使用时间较长的JS有了很大提升  而HTML5在图片和基本的点击事件以及动画上面也有了很多提升   使HTML5超前完成了JS可以完成的工作任务 以下列出CSS中静态网页布局需要使用到的一些元素 要使网页页面美观  我们需要对网页进行大小 .背景图片(或背景颜色).以及网页内的文字和网页的所属小的版块位置的设置 1.网页基本属性的构成 border:延用HT

DIV+CSS网页标准化布局(二)之浮动布局

盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 先上图: 上图清晰的表明了盒模型的具体表现样式: margin外边距+border边框+padding内边距+content内容: 既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包

DIV+CSS网页标准布局入门到精通视频教程

DIV+CSS网页标准布局入门到精通视频教程,一共28讲完整的教程,有齐学网整理免费提供下载. 下载地址:http://bbs.it1717.com/thread-77-1-1.html

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获得了一

如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可

网页整体布局完全剖析—剖完你不进来看一下么?

作为前端小白,最基本的就是写网页了(虽然前端现在基本上可包揽全宇宙的事了),排网页更是基本生存技能了.本文总结了几乎所有的网页总体布局.               一.单列布局 1.单列固宽 思路:设置div的左右margin为auto <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1-1-1 布局固定宽度</title> <st

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版?

html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记--同时介绍了目前流行的web标准与css网页布局实例,以及基于语言的网页特效制作.需要的朋友们可以下载看看! HTML\CSS\JavaScript网页制作从入门到精通共分为18章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作.为了便于读者学习,附录中

Web全栈-网页的布局方式、浮动流基本概念

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页的布局方式</title> <style> /* div,h1,p{ border: 1px solid #000; } span,strong,b{ border: 1px solid #000; } */ *{ margin: 0; pa