静态网页制作

总结下工作。问,为什么开始看到这个作业的时候不知道如何下手呢?

现在完成了,知道该怎么去分解这个网页,以图中的分割线为准,可以这样细分:

这样,再根据每个模块去细分,首先看header这个模块,可以看到有个logo大图标,然后紧跟着是导航条。

刚开始想把这两部分作为两个平级div嵌套在div header里面,不过后面因为,哪个黄色的背景图要嵌套在logo字下面,所以最后的布局是这样的。

这里调试ul中的float:left,不是很清楚为啥会出现这种情况。这里让ul,li设置为float:left,然后注意下标签a设置其为块级元素display:block;并设置其高度和宽度,这是为了背景图片能完整的显示,当鼠标移到相应的标签时显示图片,我是这样设置的:

#headernav ul li a:hover{
    color: #000000;
    background-image:url(image/nav_btn.png);
}

OK,接着看中间的设置,首先看大概布局。

picture 图片div的布局算是比较简单的,就是开始想为什么当图片的宽度没有那么宽时,它是如何自动居中的,这是个问题,当宽度足够长时,它是填充的,这个当然明了。

接着分析下面的内容:

contentleft里面就是一个左侧导航栏,这个也花了一点时间去琢磨。

本来哪个框框我都不知道怎么出来呢? 然后问别人才知道要怎么设计,首先是一个列表的形式因此想到ul和li的使用,ul中给它一个这样的属性 list-style-type: none;就可清除每个列表前的圆点。

看下具体列表里面的内容要怎么去设计,首先每个列表前面有一个导航的图标,这个图标刚开始是用了img标签,每个li里面都放一个:

<li><a href="#"><img src="image/liicon2.png"/>&nbsp;&nbsp;公司咨询</a></li> 。

不过当鼠标移到标签上时,不知道如何更改img的src属性了,因此这种方式导致功能不完善,所以后面就改成给li一个背景图。这样设置:

#contentleft ul li{
width:170px;
height:33px;
line-height:30px;
float:left;
border:1px solid #D0D0D0;
margin-bottom:-1px;
background-image:url(image/liicon2.png);
background-repeat:no-repeat;
background-position:38px 12px;
}

注意这两个属性:

background-repeat:no-repeat;
background-position:38px 12px;

这是图标正确呈现出原图样子的关键。

OK,这样设置好后,注意最后一个li框,它里面是没有任何东西的,你这样添加背景图,会把最后一个li框也加一张图,所以又出现问题了,我要怎样使最后一个li跟前面的不一样,刚开始想的是用last-child属性,也就是这样设置:

#contentleft ul li:last-child{
background:none;}

不过这样在IE8中是不识别的,所以,最后选了这种方案

#contentleft ul li.lastchild{
background:none;}

<li class="lastchild"></li>

给最后一个li加个lastchild类。这样的话,最后一个li框中就没有背景图了。

然后再看下,鼠标移到标签上,背景图换了的效果怎么写的:

#contentleft ul li:hover{
    background-image:url(image/liicon.png);
    background-repeat:no-repeat;
    background-position:38px 12px;}

#contentleft ul li.lastchild:hover{
background:none;
}

//由于没有将图片放在a标签里,所以要分开控制其颜色,这其实是不太合理的。。。

#contentleft ul li a:hover{
    color: #2C8AC9;    
}

主要是对图片的处理,刚刚想了下,为什么不把图片放在a的背景图中,这样可以更好地控制效果,照理来说,应该放在一起的,不过刚刚反复折腾,没做到,暂时还是以这种方法算了。

由于关于绿化这一栏跟其它的不一样,所以我用了个div,这种处理方式其实不太好,正常情况下,应该是跟最后一个li的处理方式一样的,这里再折腾下试试。

试了下,结果还是重新分出个div好点,有很多地方不一样,不太好控制。

看看内容的右边,这块比较好控制,没什么难点。

最后看下底部的控制:

一根横线,一个底部导航条。

横线是这样设计的:

#line {
    background-color: #B2D00F;
    border: 1px solid #B2D00F;
    height: 3px;
    margin-top: 8px;}

底部导航条就是几个a标签然后让他们居中text-align: center;就OK了。

OK,页面完成:

对了,注意有个背景图抠出来了。PS抠图,切图会了点了。

静态网页制作

时间: 2024-10-16 13:01:57

静态网页制作的相关文章

大学生代制作静态网页制作

+2425691680 模板介绍 该模板为纯html5模板,主题为周末·黑色调,此模板采用黑色为主色,不包含任何服务器端code,只包含index.html一个页面,PC端和手持端自适应,即响应式布局,网页的目录结构为:css.images.fonts和js,网页采用div+css布局, h5标签开发和扁平化设计. 三.目录结构 四.浏览器兼容 大学生静态网页,喜欢的可以了解一下~~ 五.关键代码解析 1.jquery.fullPage.min.js 简介 技能 案例作品 联系方式 (funct

html/css静态网页制作

任务要求:   简单对网页进行分割布局,基本思路上中下三部分,然后在每一部分细分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="qiyecss/qiye.css" type="text/css" rel="stylesheet"

HTML 静态网页制作12月3日 格式与布局

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relative):那么div相对于浏览器定位. 2.外层有position:absolute(或relative):那么div相对于外层边框定位 三.position:relative 相对位置. 如下图,相对于把此div包含住的div的某个位置进行固定.如果外层没有包含他的,那就相对于浏览器进行相对位置的

HTML 静态网页制作12月2日表单样式

HTML 表单的应用源代码: <body> <center> 账号:<input type="text" name="first"/> <br /> 密码:<input type="password" name="seconds"/> <br /> 备注:<textarea name="third" cols="50&q

动态网页和静态网页的特点

静态网页的基本概述静态网页的网址形式通常是以.htm..html..shtml..xml等为后后缀的.静态网页,一般来说是最简单的HTML网页,服务器端和客户端是一样的,而且没有脚本和小程序,所以它不能动.在HTML格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画.FLASH.滚动字母等,这些"动态效果"只是视觉上的,与下面将要介绍的动态网页是不同的概念. 静态网页的特点(1)静态网页每个网页都有一个固定的URL,且网页URL以.htm..html..shtml等常见形式为

静态网页与动态网页的区别

1. 什么是静态网页?什么是动态网页?两者的区别是什么?试举例说明. 答:在网站设计中,纯粹 HTML 格式的网页通常被称为 " 静态网页 " ,早期的网站一般都是 由静态网页制作的.静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和 不可交互的网页.你编的是什么它显示的就是什么.不会有任何改变.静态网页相对更新 起来比较麻烦,适用于一般更新较少的展示型网站.静态网页的网址形式通常为 : www.exa mple.com/eg/eg.htm ,也就是以 .htm . .htm

静态网页与动态网页区别(转)

静态网页,动态网页主要根据网页制作的语言来区分: 静态网页使用语言:HTML(超文本标记语言) 动态网页使用语言:HTML+ASP 或 HTML+PHP 或 HTML+JSP 等. 静态网页与动态的区别 程序是否在服务器端运行,是重要标志.在服务器端运行的程序.网页.组件,属于动态网页,它们会随不同客户.不同时间,返回不同的网页,例如ASP.PHP.JSP.ASP.net.CGI等.运行于客户端的程序.网页.插件.组件,属于静态网页,例如html页.Flash.JavaScript.VBScri

Java Web学习(2):静态网页与动态网页

一静态网页 (1)静态网页概述 在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是 标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像.声音.FLASH动画.客户端脚本和ActiveX 控件及JAVA小程序等.静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的. 静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.静态网页相对更新起来比 较麻烦,适用于一般更新较少的展示型网站

怎么区分静态网页和动态网页

在建设网站时,会经常听到静态网页和动态网页,但是他们真正的区别是什么?接下来仔细分析下二者的区别.静态网页是网站建设的基础,静态网页和动态网页之间也并不矛盾,为了网站适应搜索引擎检索的需要,即使采用动态网站技术,也可以将网页内容转化为静态网页发布. 一.静态web页面,一般指html: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需要得到哪个页面,所有的请求交给W