欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

第31章 项目实战-PC端固定布局[1]_html/css_WEB-ITnose

程序员文章站 2022-04-06 18:57:09
...
学习要点:

1.准备工作

2.创建项目

3.网站结构

4.CSS选择器

5.完成导航

主讲教师:李炎恢

本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现。

一.准备工作

1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制;因为,1024根本无法容纳最低宽度的页面;页面采用1280的最低宽度设计,去掉滚动条为1263像素。

2.第一个项目是PC端的固定布局,会采用像素(px)单位。

3.项目素材图片,是课外独立设计好的,课程不会去设计,至于怎么设计的,我会简单的说明一下,让不懂美工的程序员,能设计出还能看的格调。

4.目前互联网大部分还是PC端页面为主,后面两个项目,会根据这个PC端改成流体移动端和响应式兼容模式。

二.创建项目

1.创建index.html文件,添加html5基本格式;

2.创建img和css两个目录;

3.创建style.css文件,存放在css目录,并在html5引入css;

三.网站结构

在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构。我们将要做的网站是一个旅行社的企业网站。经过大量参考,首页上,我们选择了最基本的四个模块。

//四个基本模块:nav导航、header头部、section首页主体、footer尾部

四.CSS选择器

当四个模块建立起来,我们首先考虑的是应该选用哪种选择器。选择器有很多种方式,

核心分为三种:1.元素选择器;2.id选择器;3.class选择器。我们分别具体分析一下。

1.元素选择器

元素选择器一般用于通用的CSS定义,在局部或某个单一样式不适用。除非你的网站 非常小,小到整个页面的元素标签不超过5个,那倒是可以使用的。

//元素定义型

body {}

2.id定义型

id定义型的特点,就是表明这个元素是唯一性的,不能再当前页面的其它元素再定义

相同的id。对于中小型网站,一般是单人设计制作,元素标签不太多,可以在布局元素上 使用id定义型。比如

//id定义型

#nav {}

3.class定义型

class定义型的特点,就是可以定义多个实现相同的效果。而实际应用中,比较适合大中型Web项目。首先在多人维护的项目中,使用class也避免定义冲突;其次在一个元素 需要多个样式切换或同时使用时,也只有class才能实现。再此项目偏大时,使用class 也避免多个模块切换的冲突。

//class定义型

.center {}

通过上面的简单分析:我们这个旅行社的网站属于中小型网站,通用样式采用元素定义 型;顶层的布局元素可以使用id定义型;其他标签一律class定义型。

五.完成导航

项目的第一节课,我们先完成如下的导航,LOGO已经提供。

//最终完成版本的html,期间可能会有几次转换过程

//最终版本的CSS部分,期间可能会有几次转换过程

body, h1, ul {    margin: 0;    padding: 0;}body {    background-color: #fff;}ul {    list-style: outsidenonenone;}a {    text-decoration: none;}#nav {    width: 100%;    height: 70px;    background: #333;}#nav .center {    width: 1263px;    margin: 0auto;}#nav .logo {    width: 240px;    height: 70px;    background-image: url(../img/logo.png);    text-indent: -9999px;    float: left;}#nav .link {    width: 650px;    height: 70px;    line-height: 70px;    font-size: 18px;    float: right;}#nav .link li {    width: 120px;    height: 70px;    text-align: center;    float: left;}#nav .link a {    display: block;    color: #eee;}#nav .active a, #nav .link a:hover {}

备注:LOGO采用的是h1标签,一般为了让搜索引擎更好的抓取关键字,我们建议一个 页面只有一个h1,而且是最重要的关键词放在里面。在首页上,最重要的关键词就是旅行 社的名称。当然,如果在其他页面,比如新闻网站的单个新闻,最重要的应该是新闻标题, 网站的名称就其次了。