DIV+CSS入门案例

主要由两个文件组成,一个是.html,一个是.css。一个存数据,有一个用于布局

二话不说还是直接上代码:

test.html

<html>
<head>
	<title>CSS</title>
	<!-- 引入CSS -->
	<link rel="stylesheet" type="text/css" href="<span style="color:#ff0000;">my.css</span>"/>
</head>
<body>
	<div class="stylelOne">
		<img src="ok.PNG"/>
	</div>
</body>
</html>

my.css

.stylelOne{
	/* 宽度 */
	width: 1000px;
	height: 1000px;
	background-color: silver;
}

上述代码执行效果如下:

时间: 2024-10-02 03:52:36

DIV+CSS入门案例的相关文章

DIV+CSS 入门

前一阵玩csdn的时候,在网页上加上的qq和微博等,觉得很神奇.学完牛腩,也算开始了自己真正学习B/S之旅. 刚开始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的,敲完了回过头来再看,好像明白了一些.BS正在进门中 ,写的不对各位多多指正. CSS 整体来说css中包括各种各样的样式属性,用于控制字体,颜色,对齐方式和边距,这些只是网页样式 的一些方面.css的样式属性分为两大类. 布局属性:由影响网页上元素位置的属性(如边距 填充 对其等等)组成 . 格式化属性,由影响网站中元

看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记

一.盒子模型(box model) 一个盒子又4部分组成:content(内容).padding(填充).border(边框)和margin(外边界) 盒子模型有两种: (1)标准W3C盒子模型 (2)IE盒子模型(content包含padding和border) 为了统一标准,让网页能兼容各个浏览器,必须使用标准W3C盒子模型 如何才算使用?答:在网页的顶部加上DOCTYPE声明 二.盒子模型结构详解 1.CSS边框(border)属性 border有3个属性:border-width(宽度)

div css入门

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span style="font-size: 30px;color:blue">栏目一</span><br/> <span style="font-si

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

DIV CSS position绝对定位absolute relative教程篇

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对

div+css登陆界面案例2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873a

div+css登陆界面案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873aa; text-align: center; overflow: hid

(转)Div+CSS布局入门

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局