您现在的位置是:首页 > 前端学习 > Web前端Web前端
制作主流网站界面(第十九章)(图文)
第十三双眼睛2020-03-17【Web前端】人已围观
简介本章中,将综合一些基本的知识技能,详细介绍一下一个页面是如何从构思到计划,最终展示在互联网上的,本章的知识点如下:
1构思页面的布局
2制作页面的顺序
3理解制作页面的基本思路
构思基础的布局
从前面的知识中,已经了解到设计一个页面。首先设计师心中需要明确摆放哪些内容的时候,接着就是去构思如何去布局这样的页面。可以把页面分成4部分,页面的顶部,底部,中间部分。中间部分又可以分成侧边栏和主要部分。所以在写代码的时候,它的结构看上去应该是这样的。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面布局</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#container{
width: 100%;
height: 700px;
background-color: red;
}
#header{
width: 100%;
height: 120px;
background-color: blue;
}
#aside{
width: 20%;
height: 500px;
background-color: green;
}
#footer{
width: 100%;
height: 80px;
background-color: #f90;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
完善网站的子模块
接下来的工作,基于已经创建好的页面结构,之后的任务就是一点一点的细化完成各个部分,如头部,底部,侧栏和页面主题部分。只要按部就班,这些都不难。
导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
li{
float: left;
display: inline-block;
width: 100px;
border: 1px solid red;
margin: 0 50px;
text-align: center;
background-color: #ccc;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</div>
</body>
</html>
页面的侧边栏
页面的侧边栏是一个浮动层,它的中间可以放入任何页面对象,通常,一些简单的条目适合放在这里,作为目录使用,而页面中的主题部分,放入一些具体对象的问题本描述,最好再添加一些图像,这样页面就会更加生动,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aside</title>
<style type="text/css">
#container{
width: 100%;
height: 600px;
background-color: red;
}
#aside{
width: 20%;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<aside id="aside"></aside>
</div>
</body>
</html>
从前面的知识中,已经了解到设计一个页面。首先设计师心中需要明确摆放哪些内容的时候,接着就是去构思如何去布局这样的页面。可以把页面分成4部分,页面的顶部,底部,中间部分。中间部分又可以分成侧边栏和主要部分。所以在写代码的时候,它的结构看上去应该是这样的。如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面布局</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#container{
width: 100%;
height: 700px;
background-color: red;
}
#header{
width: 100%;
height: 120px;
background-color: blue;
}
#aside{
width: 20%;
height: 500px;
background-color: green;
}
#footer{
width: 100%;
height: 80px;
background-color: #f90;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
完善网站的子模块
接下来的工作,基于已经创建好的页面结构,之后的任务就是一点一点的细化完成各个部分,如头部,底部,侧栏和页面主题部分。只要按部就班,这些都不难。
导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
li{
float: left;
display: inline-block;
width: 100px;
border: 1px solid red;
margin: 0 50px;
text-align: center;
background-color: #ccc;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</div>
</body>
</html>
页面的侧边栏
页面的侧边栏是一个浮动层,它的中间可以放入任何页面对象,通常,一些简单的条目适合放在这里,作为目录使用,而页面中的主题部分,放入一些具体对象的问题本描述,最好再添加一些图像,这样页面就会更加生动,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aside</title>
<style type="text/css">
#container{
width: 100%;
height: 600px;
background-color: red;
}
#aside{
width: 20%;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<aside id="aside"></aside>
</div>
</body>
</html>
很赞哦! ()
下一篇:返回列表
相关文章
随机图文
-
网页的文本设计(第三节)(图文)
静态页面中的绝大部分内容由4类属性的物质组成,文本,图像,视频音频等多媒体文件和超链接。本章的知识点如下: 1了解HTML语言,区分清楚旧的使用规则和新规则CSS之间的联系和不同。 2文本排版格式,学会如何使用标签实现在页面中规范写作格式 3文本样式学会如何改变页面中文本的基本属性和如何使用一些特殊的符号。 4文本列表,学会在页面中使用无序列表和有序列表来罗列条目 5通过实例,学会在页面中编写文本,项目列表 -
动画和渐变(第十七章)(图文)
在网页设计中,适当的使用动画和渐变,可以把网页设计的更加生动和友好,在传统的设计中,会借助Flash或者javascrip实现动画,借助图片实现渐变,而CSS仅仅是静态的表现元素的效果,不过,CSS3将改变我们的思维方式,因动画和渐变也可以直接用CSS来实现了,这些革命性的改变,使得CSS具有更加强大的可能性 本章知识点如下: 1CSS3变形基础 2CSS3过度效果 3CSS3动画效果 4CSS3变形设计 -
CSS规则(第十二章)(图文)
对于设计者来说,总式希望能够在页面中自由发挥创意,实现自己得想法,然而,HTML语言中的很多标签都存在很大的局限性,如h1这样的标签,始终是定义较大的字体,所以,在没有CSS之前,设计者不得不借助其他标签补充标签的属性。 从本章开始,读者要尽量忘记原来标签的定式,CSS样式如同一种上乘的武学,类似于一种无招胜有招的境界,比如,虽然h1常用来定义标题,但这是因为人们习惯于这样使用,而h1表现出来的样式并非一成不变的,当设计者使用CSS时,他们可以令h1标签内的文本变成自己想要的样子。 -
音频和视频(第七节)
在HTML5之前,在线的视频和音频都是节主FLASH或者第三方工具实现的,现在的HTML5也支持了这方面的功能,在一个支持HTML5的浏览器中,不需要安装任何插件就能播放视频和音频,原生的支持视频和音频,为HTML5注入了巨大的发展潜力,本章将介绍两个重要的元素,audio,video,分别用于实现音频和视频,又称为多媒体,对于这两个元素,HTML5为开发者提供了标准的,集成的API 本章的重要知识点如下: 1AUDTIO和VIDEO的基础知识 2HTML5中的AUDIO和VIDEO 3网页中的音