html和css静态网页制作,html和css静态网页制作报告

http://www.itjxue.com  2023-01-20 21:34  来源:未知  点击次数: 

如何用html+css做出这个静态网页 求大神解答

以前我也做过类似的这种静态页面,其实每一块的布局都差不多,做好一个其他的大同小异,下面提供我的思路以供参考(宏观角度):

第一:先把整体框架搭起来,通过绝对定位确定大的模块的位置。

第二:根据图中每一块的结构来选择table或者其他布局方式。

第三:需要精确的时候可以用div块来调试,出现细节问题可以查资料解决一下。

用html和css做一个这样的静态页面需要用到哪些标签或是具体步骤?

如果只是静态页面直接使用div+css就可以了,一个大盒子装所有内容,然后再分上下两个盒子

上面的盒子先分两个盒子,设置浮动,左边的盒子再分两个盒子,这样布局就完成了。然后再在每个区域上去写内容,至于标签没有限制,所有标签都可以通过属性设置它的样式的。

学完了html和css怎么做静态网页啊,没有头绪,初学者都是这样的么,感觉手拿筷子,不知道怎么用?

静态的网页其实就是2部分组成,一个我们的底层结构html,另外一个就是负责修饰结构的css,其实书写静态网页就像是我们小时候在过家家一个样子的,你首先得把你需要的过家家的家庭成员找齐了,而我们这个找家庭成员就像是我们书写页面网页的时候,那个最底层的结构html,你在玩过家家的时候脑海里肯定已经有了一个简单的家庭成员和故事情节了。

而我们在写页面的时候是有剧本的,这个剧本就是你看到的设计图,或者是你看到的某个网页,个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能,把整个页面完整的截取下来,QQ浏览器,360浏览器都可以做到的,这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为,并且做到了页面数据的精准度,而不是随意的给数据,或者是利用浏览器的F12功能查看原网页的数据。

首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看,其次利用浏览器的F12查看功能,这样子做你就会不小心的看到了原代码,你的思维跟原来的编程人员思路有些时候是不一样的,这样就限制了你的思路,最后你翻找的过程真的是很需要时间的,同时还会影响你的思路。

按照设计好的剧本然后我就可以对应这找人员了,比如说爸爸、妈妈、孩子、锅、饭碗、筷子,菜等等,我们写页面也是的。比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字,相对来说页面的整体布局是比较简单的,当然还有很多不同的类型的页面,布局上比这边要复杂一些,具体的可以看下面的图。

这个是我们看到一个图的时候,大致在脑海当中对页面进行一个简单的扫描,进行初步认识看看页面当中都有哪些,如果把页面当成一张纸,那么在一点点撕碎的过程中要怎么样从大到小一点点的分割,当我们有了初步的认识之后,就可以把这些东西转化成我们的html结构,所有画的这些不同颜色的框框我们在写的时候用的都是div。

从上往下,从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后,在往里面放一些小的东西,比如图片img、表单form input,文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积,不是把整个页面都堆积出来,而是一个模块一个模块的来,比如头部的、中间左边的、尾部的。

接下来我们需要做的就是把写好的结构进行美化,不然你就会看到如下图一样的场面。

难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮,妈妈要穿上高跟鞋呀,需要涂抹口红呀,爷爷是需要有胡子的而且还是要白色的才会更像一些,最好是要弯腰驼背的。

而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心,涉及到的东西很多,同时也会伴随着很多的问题,毕竟想要某个人形态外貌上和剧本人物一致,不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄,比如:

百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float:right;红色盒子里面的文字的字号大小,字体,字体颜色,水平间距,垂直间距这些都需要一点点的写,如果在写的过程中遇见了问题,我们可以借助Chrome浏览器的调试功能,哪里错了用箭头点哪里,结构看左边,css看右边,看看css属性有没有显示,有没有划掉,有没有黄色报错等等。

这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么,就好像你穿衣服的时候肯定是拿上衣,而不是拿裤子穿在上面,如果有人这么做你会告诉他这样是错的,这个裤子要穿在下面一样。

最后就是总结和举一反三了,一个页面写完之后,不是就是完了,更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题,是怎么解决的,为什么这样子解决,更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现,做到举一反三。

这些总结可以记录到网上一些博客上,比如博客园、CSDN、51CTO。这样既可以作为自己的一个整理也可以方便了其他人同样查看。

第一次编写html+css静态页面有哪里注意或者注重什么地方?

第一次,也就是新学了。

所以你可以不关注网页的兼容性,标签嵌套的合理性和css精简之类的。

但是仍然要注意以下几点:

1.写网页之前,请优先思考网页的结构和布局方式,最好先一步规划出来,学会自主用其它方式构建,不能一行一行死敲。

2.标签对有开头就马上补结尾,别写到后面记不清前面有几个开头,几个结尾,导致界面凌乱。

3.网页的风格配色,请尽量使用简约柔和的颜色代码,别做出一个有精神污染的页面。

求用CSS和html做静态网页~~~很急,大神支支招

?head

style?type="text/css"

?!--?A?{?text-decoration:?none}?--?

/style

meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/

title专题/title

style?type="text/css"

body,td,th?{?

font-size:?18px;?

color:?#990022;?

font-weight:?bold;

}

#sss?{

???float:?left?

}

li{

???float:?left;

??width:80px;?

}

body?{?

background-color:?#00ffee;?

background-image:?url(Image/bg.jpg);?

background-repeat:?repeat;}

/style

/head

body

div?id="sss"

ul

??lia?href=""?首页?/a??/li

??lia?href=""?简介?/a??/li

??lia?href=""?相册?/a??/li

??lia?href=""?与你分享?/a??/li

/ul

/div

/body

用html和css做一个网页?

1,打开记事本,并在其中输入必要信息,完整代码如下:

!DOCTYPE htmlhtmlhead meta charset="utf-8" title/title

bodyheaderimg src="molihua.jpg"width="412" height="291"/header article header h2茉莉花/h2 p作者:宋 · 刘克庄 /p /header hr/ p曾与瑶姬约。恍相逢、翠裳摇曳,珠韝联络。风露青冥非人世,揽结玉龙骖鹤。

爱万朵、千条纤弱。

祷祝花神怜惜取,问开时、晴雨须斟酌。枝上雪,莫消却。

恼人匹似中狂药。

凭危栏、烛光交映,乐声遥作。身上春衫香薰透,看到参横月落。

算茉莉、犹低一著。坐有缑山王郎子,倚玉箫、度曲难为酢。君不饮,铸成错。/ph3清平乐/h3p冰轮万里。云卷天如洗。先向海山生大士。却诞卯金之子。冰盆荔子堪尝。胆瓶茉莉尤香。震旦人人炎热,补陀夜夜清凉。/pdldt《浣溪沙》/dtdd南国幽花比并香。直从初夏到秋凉/dddt《鹧鸪天》/dtdd携靓侣,泛轻航。棹歌惊起野鸳鸯/dddt《真珠帘》/dtdd茉莉芰荷香,拍满笙箫院。/dd

/dl/article footer2019.9.6/footer /body/html

启动浏览器运行后,大家会发现界面并不美观,文字看着也比较乱。

为了解决这个问题,可以在界面添加css规则,让界面更好看,更标准化,将下面的代码块添加到记事本中,位置在head和head/也就是头部之间:

style type="text/css"body{ background:gray;} h2{ text-align:center;} header{ text-align:center; } article p{ text-indent:2em; } footer{ font-size:12px; font-align:center; } /style

(责任编辑:IT教学网)

更多

推荐CSS教程文章