网站开发之DIV+CSS简单布局网站入门篇(五)

简介: 这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案例的方式进行介绍的,希望对你有所帮助。运行结果如下图所示:main.html主页面代码:主要通过di

        这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案例的方式进行介绍的,希望对你有所帮助。运行结果如下图所示:



main.html主页面代码

        主要通过div进行布局的,同时<h2><a></a></h2>用户设置导航条,鼠标悬停时背景颜色切换。

<html>
<head>
	<title>
		网站主页
	</title>
	<link rel="stylesheet" href="css/main.css" >
</head>
<!-- 首页 -->
<body>
		<div id="bg">
			<img src="images/bg.jpg" width="100%" height="100%" />
		</div>
		<div id="bt">
			<h2 class="xz"><a href="#">学校概况</a></h2>
			<h2><a href="jsjj.html">教师简介</a></h2>
			<h2><a href="#">校园生活</a></h2>
			<h2><a href="#">校园文化</a></h2>
			<h2><a href="#">联系我们</a></h2>
		</div>

		<div id="main">
			<div id="left">
			</div>
			<div id="right">
			</div>
		</div>

		<div id="footer">

		</div>

</body>
</html>


css/main.css代码:

        该部分代码主要是CSS文件,用于布局和设置主页面。

#bg {
	text-align: center;
	margin:0 auto;
	width: 80%;
	height: 100px;
	/* background-image: url("../images/bg.jpg"); */
}

#bt {
	margin:0 auto;         /* 水平居中 */
	margin-top: 10px;
	width: 80%;
	height: 40px;
	background-color: yellow;

}

h2 {
	float: left;           /* 水平显示,否则竖直显示 */
	margin-top: 0px;       /* 置顶 */
	margin-left: 10px;
	width: 18%;
	background-color: red;
	height: 34px;
	font-size: 24px;
	text-align: center;
	padding-top: 6px;
}

a {
	text-decoration: none;  
}

a:hover {
	color: black;
}

h2:hover {
	background-color: #0F0;
}

#main {
	margin:0 auto;         /* 水平居中 */
	margin-top: 10px;
	width: 80%;
	height: 60%;	
	background-color: #E6E6FA;

}

#left {
	float: left;
	margin-left: 20px;
	margin-top: 5px;
	width: 40%;
	height: 90%;
	background-color: #9ACD32;
}

#right {
	float: left;
	margin-left: 20px;
	margin-top: 5px;
	width: 50%;
	height: 90%;
	background-color: #BFEFFF;
}

#footer {
	margin:0 auto;         /* 水平居中 */
	margin-top: 10px;
	width: 80%;
	height: 50px;
	background-color: #8B2500;
}

#main2 {
	margin:0 auto;         /* 水平居中 */
	margin-top: 10px;
	width: 80%;
	height: 60%;	
	background-color: #F00;

}

.xz {
	float: left;           /* 水平显示,否则竖直显示 */
	margin-top: 0px;       /* 置顶 */
	margin-left: 10px;
	width: 18%;
	background-color: #0F0;
	height: 34px;
	font-size: 24px;
	text-align: center;
	padding-top: 6px;

}

        下面讲解几个重点:
        1、在<div class="bg">布局过程中,需要在CSS中设置"margin:0 auto;",才能让它居中显示,这段代码的含义是:第一个值就是元素的上下边距0,第二个值就是左右边距。当元素的定义了width属性时,auto还能实现居中的效果。

        2、在CSS中设置h2,需要添加"float: left;",使其水平显示,不增加该句的效果如下所示:


    

        3、整个DIV布局代码如下所示,h2会向下移动一段距离,这时CSS中通过"margin-top: 4px;"进行微调。

        4、悬停的核心代码如下所示,其中"text-decoration: none;"设置超链接无下划线,然后是悬停在超链接a和字体h2的变换效果。注意冒号(:)和hover之间不能有空格,否则效果消失。



        简单补充CSS内容,更多的是希望你从课本中学习,这篇文章我以案例为主。

        什么是CSS
        CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的方式设置网页格式。它是将样式信息与网页内容分离的一种标记性语言。

        样式定义的语法
        样式表项的组成:
        Selector{property1:value1;property2:value2;property3:value3;……}
        Selector定义样式作用的对象,property为CSS属性,value为属性对应的值。


        CSS直接在标记符中嵌套
        HTML 标记符的 style 属性。
        例如: <P style=“text-align:center” >,其中,style属性的取值形式为“CSS属性:CSS属性值”,使用多个属性用分号分隔。
        在STYLE 标记符定义样式
        <STYLE>样式定义 </STYLE>
        样式定义的方式为:
        Selector{property1:value1;property2:value2;property3:value3;……}

<HTML>
<HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE>
<STYLE>

P{ font-size:24px; text-align:center }
H1{ font-family:楷体_gb2312; text-align:center }

</STYLE>
</HEAD>
<BODY>
  <H1>一代人</H1>
  <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P>
</BODY>
</HTML>

        运行结果如下所示:


        链接外部样式表文件
        使用LINK 标记符:
        <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
        样式表文件可以用文本编辑器编辑,也可以用FP或DW编辑,内容为样式定义。

<HTML>
<HEAD><TITLE>链接式样式示例</TITLE>
<LINK rel="stylesheet" type="text/css" href="mycss.css">
</HEAD>
<BODY>
  <H1>一代人</H1>
  <P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P>
</BODY>
</HTML>

        其中CSS的代码如下所示:

P{ font-size:12px; text-align:center }
H1{ font-family:黑体; text-align:center;background-color:green }

        运行结果如下所示:



        希望文章对你有所帮助,上课内容还需要继续探索。
        (By:Eastmount 2016-11-08 中午12点  )

目录
相关文章
|
2月前
|
前端开发
文字显示在div 最下面,css怎么写
文字显示在div 最下面,css怎么写
186 0
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
302 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
168 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
85 1
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
3月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
3月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示