【web页面制作】html+css网页制作明星主题-国际影星娜塔莉·波特曼(附效果代码下载)

50 阅读5分钟

明星主题网页制作

  • 涉及知识
  • 写在前面
  • 一、网页主题
  • 二、网页效果
  • 三、网页架构与技术
    • 3.1 脑海构思
    • 3.2 整体布局
    • 3.3 技术说明书
  • 四、获取完整效果代码
    • 4.1 获取方式
  • 作者寄语

涉及知识

国际影星html+css网页制作,html+css制作明星网站,期末网页大作业,网页作业成品,web前端源码实例,如何制作网页,网页设计思路,如何从零开始制作web页面。


专栏:web前端大作业网页制作
关于我:一个持续输出型博主,爱分享,喜技术,期待关注与交流!
公众号:《IT黄大大》更多分享抢先看;
研究主题:影视,明星,家乡,旅游,个人,美食,校园,商城,运动,特效等
技术涉猎:HTML+CSS,HTML+CSS+JS,Java+数据库,vue项目等
开发软件:vscode,dreamweaver,hbuilder,sublime text,eclipse,idea等;


写在前面

新的一年开始了,博主这不开始准备一些全新的2024年的新款网页制作效果分享给大家,这次我主要分享的是明星主题的,关于娜塔莉·波特曼主题的网页制作,主要是通过html+css来实现的静态页面,说道这个明星大家可能陌生,但是要是说《这个杀手不太冷》大家估计耳熟能详,对,她就是这个电影的女主。这次的分享也是主要希望能给大家带来一些作业上的灵感,也希望大家能够从中得到启发,解决自己眼前的作业窘境,当然能够学到知识是最好的,废话也不多说了,我尽量做到定期更新哈,希望大家能持续关注我哈!
声明:原创于博主《IT黄大大》,如有转载请注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

一、网页主题

本次主要研究的方向是一个和明星相关的,,之前一直都是浅色系的,这次我采用深色系的主题,希望给您一个全新的认识,基于html+css开发的明星主题网页,满满的高级,完整源码可以-微v信x公g众z号《IT黄大大》私信,希望大家能谅解,创作不易。
人物主题网页主要从这四个方面出发:
Banner图片:采用一个大气的图片来做的。
菜单列表:主要采用ul li来实现的,复用模式;
主体内容:针对不同页面的展示不同内容;
底部声明:主要声明著作
看下面的效果图,是不是满满的高级感,希望大家能够喜欢这类风格的哈。

二、网页效果

Page1、首页
在这里插入图片描述
Page2、个人介绍
在这里插入图片描述
Page3、成长经历
在这里插入图片描述
Page4、留下脚印
在这里插入图片描述

三、网页架构与技术

3.1 脑海构思

要想做好一个页面,首先脑子里面得去有个架构,就好比是庖丁解牛,将架构了然于胸,什么困难都会迎刃而解,在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的,因为这类静态页面的兼容性要求不高,所以我们要想好大致的框架。
此次主要设置了4个页面,分别是首页,介绍,作品,留言四个方向去拓展的

3.2 整体布局

在我的页面制作过程中,我主要采用的是浮动式布局,从左往右,从上至下的顺序来进行设计制作的,当然在制作之前我会先给页面框架做一个布局,首先我会设计下面几部分:
头部:banner(主要包括导航图和logo之类的)
菜单:menu(主要是采用a标签进行跳转的)
主体:main(核心内容展示)
底部:foot(版权声明)
其中头部和菜单及底部三个模块都是公用的,针对每个页面的切换主要体现在中间的主体模块,这也是一个好的网页作品必要的四大元素,不然就是斜坡上盖房子了。

3.3 技术说明书

主要应用了web前端2个模块的技术HTML + CSS
HTML模块:主要针对页面的结构搭建,该网站整体采用的是div标签作为盒子,其中包含:
有关无序列表 ul li 、
段落标签 p、
图片标签 img 、
行内标签span、
字体标签 h2 h3.等
CSS模块:
主要采用的是浮动式布局的方式,页面搭建主要通过设置div的border属性来确定每个div的位置,然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置,设置文字颜色color属性等。

主要用到了font的文字基本属性,background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性,设置div的左边框的厚度和颜色。

四、获取完整效果代码

4.1 获取方式

A、关注微x信G公z众号:《IT黄大大
B、消息回复“明星系列
C、获取下载路径即可下载.

声明:原创于博主《IT黄大大》,如有转载请注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!当然如果这个文章对您带来不好的体验还希望能多多包涵,一起学习进步。

【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在g公z众h号<IT黄大大>里也会定期分享一些免费好看的html页面,期待您的关注哈」!

2024年我们一起加油,一起成长,感谢您的支持与谅解!