3.1 DIV+CSS页面布局_HTML视频教程

- 灬无言 - 阅 4,771

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

3.1.1 CSS基本格式

在创建好文件后,我们首先需要更改一些HTML标签的默认设置,比如无序列表(ul)前的样式(黑色实心小圆点)。

下面这段就是我们经常在CSS里首先加入的,最后一个 .auto是什么呢?这个类选择器是让块级元素居中的方法。margin-left:auto;margin-right:auto;即可实现此功能

/*CSS基本格式开始*/

body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,li,dl,dt,dd,form,input,textarea{

margin:0px;

padding:0px;

font-size:14px;

}

a:hover{

text-decoration:underline;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

img,a img{

border:none;

}

.auto{

width:1000px;

margin:0 auto;

}

/*CSS基本格式结束*/

3.1.2 HTML文档最初布局

一般网页由头部、主体和底部组成。head、main和footer标识。

这里,我们首先创建三个DIV模块分别用ID选择器标识,然后用<!—->用注释来分割开。

<!DOCTYPE html>

<html>

<head>

<title>3.1 DIV+CSS页面布局</title>

<meta charset=”gb2312″/>

</head>

<body>

<!–头部开始–>

<div id=”head”>

</div>

<!–头部结束–>

<!–主体开始–>

<div id=”main”>

</div>

<!–主体结束–>

<!–底部开始–>

<div id=”footer”>

</div>

<!–底部结束–>

</body>

</html>

3.1.3 step by step

  1. 在CSS文件中设置头部、主体和底部的高度并添加其背景颜色(方便布局,后面删除)

当然主体这里的高度可以不设置,浏览器直接按内容量来计算其高度即可。

/*head开始*/

#head{

height:160px;

background-color:red;

}

/*head结束*/

/*main开始*/

#main{

height:800px;

background-color:green;

}

/*main结束*/

/*footer开始*/

#footer{

height:150px;

background-color:blue;

}

/*footer结束*/

  1. 引入CSS文件,如果设计较为复杂,可以分别创建并引入css、main.css及footer.css

这里仅引入一个即可。

<link rel=”stylesheet” type=”text/css” href=”css/index.css”>

若引入多个则:

<link rel=”stylesheet” type=”text/css” href=”css/head.css”>

<link rel=”stylesheet” type=”text/css” href=”css/main.css”>

<link rel=”stylesheet” type=”text/css” href=”css/footer.css”>

  1. 头部一般包括:顶部、logo区和导航栏。top、logo和menu。

html部分:

<!–头部开始–>

<div id=”head”>

<div id=”top”></div>

<div id=”logo”></div>

<div id=”menu”></div>

</div>

<!–头部结束–>

CSS部分:

/*head开始*/

#head{

height:160px;

background-color:red;

}

#head #top{

height:30px;

background-color:#f1f1f1;

}

#head #logo{

height:100px;

background-color:pink;

}

#head #menu{

height:30px;

background-color:blue;

}

/*head结束*/

  1. 以上设置的这些DIV可以更换好看的背景达到美观的效果。但是,考虑到很多用户的屏幕分辨率还在1024*768的阶段,所以,控制内容区的宽度。我们的宽度限制在1000px。

html部分:

<!–头部开始–>

<div id=”head”>

<div id=”top”>

<div id=”top_content” class=”auto”></div>

</div>

<div id=”logo”>

<div id=”logo_content” class=”auto”></div>

</div>

<div id=”menu”>

         <div id=”menu_content” class=”auto”></div>

</div>

</div>

<!–头部结束–>

<!–主体开始–>

<div id=”main”>

<div id=”main_content” class=”auto”></div>

</div>

<!–主体结束–>

<!–底部开始–>

<div id=”footer”>

         <div id=”footer_content” class=”auto”></div>

</div>

<!–底部结束–>

CSS部分:

/*head开始*/

#head{

height:160px;

background-color:red;

}

#head #top{

height:30px;

background-color:#f1f1f1;

}

#head #top #top_content{

         height:30px;

         background-color:blue;

}

#head #logo{

height:100px;

background-color:pink;

}

#head #logo #logo_content{

         height:100px;

         background-color:#f1f1f1;

}

#head #menu{

height:30px;

background-color:blue;

}

#head #menu #menu_content{

         height:30px;

         background-color:pink;

}

/*head结束*/

/*main开始*/

#main{

height:800px;

background-color:green;

}

#main #main_content{

         height:800px;

         background-color:red;

}

/*main结束*/

/*footer开始*/

#footer{

height:150px;

background-color:blue;

}

#footer #footer_content{

         height:150px;

         background-color:#cff61b;

}

/*footer结束*/

  1. 设置top中的div块,左右各一个。

<div id=”top_content” class=”auto”>

<div id=”top_content_left”>网站简要说明</div>

                                     <div id=”top_content_right”>微信、微博等求关注</div>

</div>

#head #top #top_content #top_content_left{

height:30px;

width:200px;

background-color:gray;

float:left;

}

#head #top #top_content #top_content_right{

height:30px;

width:200px;

background-color:gray;

float:right;

}

  1. logo区域,一般由logo图片和搜索框构成。menu区域,导航栏即可。

<div id=”logo_content” class=”auto”>

<div id=”logo_content_left”>网站logo</div>

<div id=”logo_content_right”>搜索框</div>

</div>

<div id=”menu”>

<div id=”menu_content” class=”auto”>导航栏</div>

</div>

#head #logo #logo_content_left{

height:100px;

background-color:#eaf84e;

width:250px;

float:left;

}

#head #logo #logo_content_right{

height:100px;

background-color:#eaf84e;

width:500px;

float:left;

margin-left:100px;

}

  1. 主体区域main,使用flash(或轮翻图)和iframe搭配

 

<div id=”main_content” class=”auto”>

<div id=”main_content_flash”>flash或轮翻图</div>

<div id=”main_content_iframe”>商品iframe窗口,图片库的方式来完成剩余工作即可。</div>

</div>

#main #main_content #main_content_flash{

height:150px;

width:1000px;

background-color:#ca2ef7;

}

#main #main_content #main_content_iframe{

height:650px;

width:1000px;

background-color:#f61bbb;

}

  1. 底部区域footer。一般为友情链接、版权所有和ICP备案号(证)构成。

<div id=”footer”>

<div id=”footer_content” class=”auto”>

<div id=”footer_content_friend_link”>友情链接</div>

<div id=”footer_content_friend_links”>友情链接们</div>

<div id=”footer_content_powered” class=”auto”>版权+站长统计</div>

<div id=”footer_content_icp” class=”auto”>ICP备案</div>

</div>

</div>

#footer #footer_content #footer_content_friend_link{

height:30px;

width:100px;

background-color:#45aaf8;

}

#footer #footer_content #footer_content_friend_links{

height:50px;

width:1000px;

background-color:#bb88fb;

}

#footer #footer_content #footer_content_powered{

height:30px;

width:100px;

background-color:#45aaf8;

}

#footer #footer_content #footer_content_icp{

height:30px;

width:100px;

background-color:#bb88fb;

}

图文不够清楚?小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

12

本文转载 " https://www.xxkt.org/1627 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注