`

Html的DIV,CSS基础

 
阅读更多

div全称是divsion,意为区分。如果单独使用div,那么其效果和使用<p></p>是一样的。一般div都会加上css来使用。

div本身就相当于一个容器,里面照样可以嵌套使用。

 

Css全称Cascading style Sheets,中文为 层叠样式表,使用css可以对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。

 

在本文中,图片都是这一张:



 

到底如何使用css和div呢?

 

 

首先,写好html标准的基本格式:

 

<html>
<head>
<meta  http-equiv = "content-type" content = "text/html;charset = utf-8">
<title>DIV</title>
</head>
<body >
</body>
</html>

 

 

div当然是作为内容写在body里面。css作为style写在head里面。

在这里我们使用外部连接css的方法:
在我们的html文件同目录下有一个style.css文件,专门用来写css。

 

<link href = "style.css" type = "text/css" rel = "stylesheet"/>

 这一句话写在head里面。

 

在body中,加入一个div标签。首先来测试一下框框和背景图片

 

<body >
<div class = "ta">test</div>
<div class = "bg"></div>
</body>

 在body中加入了两个div标签,并且都加入了类选择器,一个指向style.css的ta,一个指向style.css的bg。

 

在style.css中,我们的代码是:

 

.ta{border:1 #ff0000 solid;width:100;height:100}
.bg{width : 200;height : 200;
background:  url('pic.jpg') no-repeat -400 -100 #ff0000}

 其中ta为style名字,里面定义了边框样式,粗细为1,颜色为红,实线。宽度和高度都是100。

 

bg意为背景,宽高都是200,其中背景图片为pic.jpg也是放在同一目录的图片。不平铺,图片的位置放在这个div的-400,-100的位置,也就是说div显示出来的是图片的400,100开始的某一部分。如果图片无法正常显示,就显示背景色红色。

效果如图:


 

可以看到,图片是显示了其中的一部分。

 

以上就是background部分了

接下来看text部分

text属性中有以下几个字段:

text-indent 缩进元素文本的首行,如值为2em,则缩进两个汉字的宽度

text-align 对其元素中的文本

word-spacing设置字间距,按空格区分英文单词和汉字词语

letter-spacing设置字符间距,每个字母或者汉字中间的间距

line-height设置行高,一般用来调整字显示在div中的哪个位置

color设置文字颜色

 

 

在style.css中添加两个:

#eng {
	text-indent:2em;
	word-spacing:10em;
	letter-spacing:1em;
	line-height:20px;
	color:#ff0000;
}

#cn{
	text-indent:2em;
	word-spacing:10em;
	letter-spacing:1em;
	line-height:20px;
	color:#00ff00;
}

 在html中添加两个div

 

 

<div id = "eng">this is a div test programe.</div>
<div id = "cn">这是一个 div 测试 程序。</div>

 可以看到现在的效果:

 



 

关于文字,还有另一个属性:font

也就是字体的风格:

#font{
	font-family:"黑体";
	font-size:20;
	font-weight:bold;
	font-style:italic;
}

<div id = "font">这是一个 div 测试 程序。</div>

 

 



 

列表:list

list-style-type:none:无标记;disc:默认,实心圆;circle:空心圆;square:实心方块

list-style-image:将图象设置为列表项标志

list-style-position:inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

#list ul li{
	border:1px #00ff00 solid ;
	list-style:square outside ;
}

<div id = "list">
<ul>
	<li>长沙</li>
	<li>株洲</li>
	<li>湘潭</li>
</ul></div>

 


 
 CSS框模型

padding 内边距

padding :10px;表示所有方向都是10 ,但是优先满足左和上的内边距是10像素。

padding :10px 20px;表示上下边距10,左右20像素。

padding :10px 20px 30px;表示上10px,左右20px 下30px像素。

padding :10px 20px 30px 40px;表示上10px,右20px 下30px 左40px像素(顺时针)。

 

 

border 边框

 

magin外边距

magin:10px;表示所有方向都是10 ,但是优先满足左和上的外边距是10像素。

magin:10px 20px;表示上下边距10,左右20像素。

magin:10px 20px 30px;表示上10px,左右20px 下30px像素。

magin:10px 20px 30px 40px;表示上10px,右20px 下30px 左40px像素(顺时针)。

 

#model{
	border:1 #0000ff solid;
	width:100px;
	margin:10px 50px 20px;
	padding:100px;
}

#superModel{
	border:2px #00ffff solid;
	width:30%;
}

 

<div id = "superModel" ><div id = "model">
框模型</div></div>
</body>

 运行效果:


 

 

 

Css浮动:float属性

float可以有left,right,none三个值,即向左浮动,向右浮动,不浮动。

其实与流式布局非常类似

一旦某个div浮动了,就不会受到原来的约束,和其余的就不处于同一层了。

使用浮动,可以使div并排放置。



 

 

如此图,

Second和First是都向右浮动了的(float:right;),在Third上清除了右浮动(clear:right;),所以第三个框显示在了第二行。

第四个第五个向左浮动,第五个在第三行显示不下了,所以自动换了行。第六个向右浮动了。第七个清除了所有的浮动(clear:both;)。

之后是一个嵌套div,先是让他们向左右浮动了,之后在红色线的div中清除了right浮动。

其完整代码:

<html>
<head>
<meta http-equiv="content-type" content = "text/html; charset="gbk">
<title>浮动窗口</title>
<style>
#First{
	border:2px #00ff00 solid;
	width : 200;
	float:right;
}

#Second{
	border:2px #ccff00 solid;
	width : 200;
	float:right;
}

#Third{
	border:2px #00ffcc solid;
	width : 200;
	clear:right;
}

#Fourth{
	border:2px #000000 solid;
	width : 200;
	float:left;
}

#Fifth{
	border:2px #00ff00 solid;
	width : 900;
	float:left;
}

#Sixth{
	border:2px #00ff00 solid;
	width : 300;
	float:right;
}

#Seventh{
	border:2px #00ff00 solid;
	width : 900;
	clear:both;
}

#Eighth{
	border:10px solid;
	float:left;
}

#Nineth{
float:left;
}

#Tenth{
float:right;
}

#c{
	height:2px;
	background:#ff0000;
	
	clear:right;
}
</style>
</head>
<body>
<div id = "First">First</div>
<div id = "Second">Second</div>
<div id = "Third">Third</div>
<div id = "Fourth">Fourth</div>

<div id = "Fifth">Fifth</div>
<div id = "Sixth">Sixth</div>
<div id = "Seventh">Seventh</div>

<div id = "Eighth">
<img src="pic.jpg" height = 40/>

<div id = "Nineth">我是里面的div</div>
<div id = "Tenth">我也是里面的div<br/>我也是里面的div<br/>我也是里面的div<br/></div>
<div id="c"></div>
</div>

</body>
</html>

 

 

  • 大小: 196.8 KB
  • 大小: 86.4 KB
  • 大小: 101.1 KB
  • 大小: 159.5 KB
  • 大小: 160.8 KB
  • 大小: 68.7 KB
  • 大小: 221.7 KB
0
0
分享到:
评论

相关推荐

    div css 基础教材

    **CSS与Div的基础教程** 在网页设计中,`Div`(Division)和`CSS`(Cascading Style Sheets)是构建网页布局的核心元素。本文将深入讲解这两个概念,以及它们如何协同工作,帮助新手快速入门网页制作。 1. **Div...

    div+css基础

    ### div+css基础知识点 #### CSS简介 - **定义**:CSS全称为Cascading Style Sheets,即级联样式表,是一种用来描述HTML文档外观和格式的语言。 - **作用**:CSS主要用于控制网页布局和样式设计,使得网页更加美观...

    DivCSS.rar_ divcss_divcss

    一、DivCSS基础 Div(Division)在HTML中是一个用于分隔内容的区块元素,常用于构建网页布局。CSS(Cascading Style Sheets)则负责控制网页的样式和布局。DivCSS结合两者,使得我们可以精确地控制页面元素的位置和...

    HTML DIV-CSS网站模板

    HTML和CSS是构建网页设计的基础技术,而"HTML DIV-CSS网站模板"是基于这两种语言构建的预制网页结构。在Web开发中,使用这样的模板可以快速地创建出具有专业外观和响应式布局的网站,无需从零开始编写大量的代码。 ...

    div+css布局大全

    "div+css布局大全"的主题聚焦于Web前端开发中的基础但至关重要的部分,即如何利用HTML的div元素和CSS来构建灵活、响应式的网页布局。这个主题不仅关乎网页的美观,更关乎其功能性和可维护性。下面,我们将深入探讨...

    divcss布局入门教程

    资源名称:div css布局入门教程内容简介:在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了...

    divcss布局模板

    `divcss布局`的核心在于使用CSS来控制网页元素的位置,实现流式、网格、定位等多种布局方式。常见的布局模式包括: 1. **流式布局**:元素从左到右排列,适用于单列布局。当屏幕尺寸变化时,内容会自动调整适应。 ...

    div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS

    HTML中的`&lt;div&gt;`元素作为布局容器,是CSS布局中常用的基础元素,可以承载各种内容并进行样式控制。 - 通过`class`或`id`属性,HTML元素可以与CSS规则关联,实现精确的样式定位和应用。 3. **CSS布局技巧**: - `...

    10天精通DIV+CSS

    DIV+CSS 基础知识点 在本节课中,我们将学习 XHTML 和 CSS 的基础知识,包括文档类型、语言编码、HTML 标签、CSS 样式、CSS 优先级和 CSS 盒模型组成。 一、文档类型 文档类型是指 HTML 文档的类型,包括过渡类型...

    Html手册div+css设计器

    通过“Html手册div+css设计器”,开发者不仅可以学习到HTML和CSS的基础知识,还可以实践使用这些知识来设计和布局网页。这样的工具对于初学者来说极其有用,能够帮助他们快速掌握网页设计的核心技能,并通过实践提升...

    div+css案例,网页设计

    本文将深入探讨Div+CSS的基础概念,以及如何通过它们来构建网页。 Div(层)是HTML中的一个块级元素,全称为“division”,用于对网页内容进行分组和布局。它可以包含其他HTML元素,并可以通过CSS(层叠样式表)...

    DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

    这表明压缩包内容不仅涵盖 `div` 和 `CSS` 的结合使用,还可能涉及 `HTML`(超文本标记语言)的基础知识,以及这两者在现代web前端开发中的实际应用。`HTML` 是创建网页内容的基础,与 `CSS` 结合使用,可以实现结构...

    DivCss代码

    二、CSS基础知识 1. 选择器:CSS选择器用于定位HTML元素,如标签选择器(`&lt;p&gt;`)、类选择器(`.myClass`)、ID选择器(`#myID`)和伪类选择器(`:hover`)等。 2. 属性和值:CSS属性定义了元素的样式,如`color`、`...

    DIVCSS.rar_DIV CSS

    **正文** ...综上所述,"DIVCSS.rar_DIV CSS"提供的资源可能涵盖了以上所有知识点,通过学习这些内容,可以深入理解并掌握使用DIV+CSS进行网页布局和设计的技能,为成为一名优秀的前端开发者打下坚实基础。

    DIV CSS基础教程全攻略

    **HTML初始高度与DIV+CSS高度** 在HTML中,传统做法是直接在标签内设置`height`属性,如`&lt;td height="100"&gt;`,这默认以像素为单位。而在使用DIV+CSS布局时,我们可以将这些样式移到外部CSS文件中,以更灵活地控制...

    中文网站div+css

    这句话表明,这个压缩包可能包含了一些关于Div+CSS的基础教程或实例,适合那些之前可能专注于Flash动画制作,现在希望学习如何用Div+CSS进行网页布局的初学者。Flash虽然曾经是创建动态网页的主流工具,但随着移动...

    适合政府的html+div css前台模版

    HTML+Div CSS是网页设计中常见的技术组合,用于构建网页的结构和样式。"适合政府的html+div css前台模版"是指专为政府机构设计的网页模板,它结合了HTML(超文本标记语言)的语义化标签和CSS(层叠样式表)的布局与...

    divcss.rar_divcss

    本资料“divcss.rar”全面涵盖了Div+CSS布局的基础与高级应用,对于网页设计的初学者来说,是一份极富价值的学习资源。 Div,全称为“Division”,在HTML中是一种用于分组内容的容器元素,通过它可以实现页面的区域...

    DIV CSS基础教程-15页word资料.pdf

    【标题】:“DIV CSS基础教程-15页word资料.pdf” 【描述】:“这份文档是关于DIV CSS的基础教程,详细介绍了DIV元素和CSS的概念、作用以及它们在网页设计中的优势和潜在问题。” 【标签】:“cs” 【内容】: 1...

    DIV+CSS.rar_DIV_aspnet div css _css_css div_css div asp p

    2. “DIV+CSS布局大全.pdf”可能是一本全面的PDF电子书,涵盖了从基础到高级的DIV+CSS布局策略。 3. “Cssjc.rar”可能是一个关于CSS进阶话题的压缩文件,可能包含案例研究、示例代码或其他高级教程。 4. “DIV+CSS...

Global site tag (gtag.js) - Google Analytics