【web开发网页制作】Html+Css明星网页主题开发之邓超(5页面附源码)

HTML+CSS影视主题网页目录

  • 🍔涉及知识
  • 🥤写在前面
  • 🍧一、网页主题
  • 🌳二、网页效果
    • Page1、首页
    • Page2、个人经历
    • Page3、个人生活
    • Page4、个人作品
    • Page5、个人公益
  • 🐋三、网页架构与技术
    • 3.1 脑海构思
    • 3.2 整体布局
    • 3.3 技术说明书
  • 🌈四、网页源码
    • 4.1 首页模块
    • 4.2 源码获取方式
  • 🌅 作者寄语

🍔涉及知识

明星主题网页制作,html+css明星网页设计与制作,web网页开发明星,DIV+CSS网页制作,个人明星主题网页制作,期末网页大作业,网页作业成品,web前端源码实例,如何制作网页,网页设计思路,如何从零开始制作web页面。


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


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

🥤写在前面

之前分享了好几个明星,也有些人说没有看到自己喜欢的明星,当然也可以像之前粉丝一样留言给我,我慢慢整理制作出大家喜欢的明星,这次网页制作明星主题的主角我选了一个我比较喜欢的江西籍明星-邓超,搞笑的风格,敬业的精神,公益的心让我觉得挺有趣的,因此借助5月份中旬这个时间分享给大家,希望能给大家带来一些作业上的创意上的灵感,也希望大家能够从中得到启发,解决自己眼前的作业窘境,当然能够学到知识是最好的,废话也不多说了,我尽量做到定期更新哈,希望大家能持续关注我哈!

🍧一、网页主题

本次主要研究的方向是一个影视明星主题相关的,主要包括首页、个人经历、个人生活、个人作品、个人公益五个方向,采用图文结合的方式搭配,希望能入大家的法眼,这个也是基于html+css开发的明星主题邓超的网页,创作不易,有需要源码的可以关注z公z众z号《IT黄大大》回复“w022明星邓超”,即可获得获取源码的方式。
话不多说先看下面的效果图,是不是你们要的风格,希望大家能够喜欢这类风格的哈,有任何宝贵意见都可以留言。

🌳二、网页效果

Page1、首页

在这里插入图片描述

Page2、个人经历

在这里插入图片描述

Page3、个人生活

在这里插入图片描述

Page4、个人作品

在这里插入图片描述

Page5、个人公益

在这里插入图片描述

🐋三、网页架构与技术

3.1 脑海构思

要想做好一个页面,首先脑子里面得去有个架构,就好比是庖丁解牛,将架构了然于胸,什么困难都会迎刃而解,在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的,因为这类静态页面的兼容性要求不高,所以我们要想好大致的框架。
此次主要设置了5个页面,分别是首页、个人经历、个人生活、个人作品、个人公益
五个方向去拓展的,其中有菜单带有悬浮效果。

3.2 整体布局

在我的页面制作过程中,我主要采用的是浮动式布局,从左往右,从上至下的顺序来进行设计制作的,当然在制作之前我会先给页面框架做一个布局,首先我会设计下面几部分:
头部:banner(主要包括导航图)
菜单:menu(主要是采用a标签进行跳转的)
主体:main(核心内容展示)
底部:foot(版权声明)
其中头部和菜单及底部三个模块都是公用的,针对每个页面的切换主要体现在中间的主体模块,这也是一个好的网页作品必要的四大元素,不然就是斜坡上盖房子了。
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

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 首页模块

Html
在这里插入图片描述
Css
在这里插入图片描述

4.2 源码获取方式

A、关注G公G众号:《IT黄大大

B、消息回复【w022明星邓超

C、获取下载路径即可下载,解压即用.

在这里插入图片描述

🌅 作者寄语

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

【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在z公z众z号<IT黄大大>里也会定期分享一些免费好看的html页面,期待您的关注哈」!
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》
2024年我们一起加油,一起成长,感谢您的支持与谅解!
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/619459.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++––初识C++

目录 一.绪言 1.什么是C 2.C语言和C的关系 2.1数据类型 2.2数据类型的长度 2.3变量和常量 2.4字符串操作 2.5判断和选择语句&#xff0c;循环语句 2.6逻辑运算符 2.7函数的声明和调用 2.8数组 2.9操作符 二.C入门的基本知识 1.命名空间 2.输入&输出 3.缺省…

Node.js全栈:从一个简单的例子开始

第一章&#xff1a;从一个简单的例子开始第二章&#xff1a;看官方文档的艺术第三章&#xff1a;浏览器显示一个网页 首先&#xff0c;在VSCode编辑器中打开一个没有任何文件的空目录&#xff0c;然后创建一个package.json文件。 为了方便大家复制&#xff0c;我把文件内容放到…

【C语言项目】贪吃蛇(下)

个人主页~ 源码在Gitee仓库~ 上一篇贪吃蛇&#xff08;上&#xff09;~ 贪吃蛇 四、核心的实现游戏测试1、GameStart&#xff08;1&#xff09;控制台窗口大小和名字设置&#xff08;2&#xff09;光标隐藏&#xff08;3&#xff09;打印欢迎界面&#xff08;4&#xff09;创建…

加入全球少儿编程运动:Scratch让每个孩子都能成为创造者(Scratch最新版客户端和初/中/高级学习资料整理分享)

文章目录 &#x1f4d6; 介绍 &#x1f4d6;&#x1f3e1; 演示环境 &#x1f3e1;&#x1f4d2; 文章内容 &#x1f4d2;&#x1f4dd; 安装与使用&#x1f4dd; 社区与资源 &#x1f388; 获取方式 &#x1f388;⚓️ 相关链接 ⚓️ &#x1f4d6; 介绍 &#x1f4d6; 你知道…

没有公网ip,如何实现外网访问内网?

目前拨号上网是最广泛的上网方式&#xff0c;这种方式优点是价格便宜&#xff0c;缺点是没有固定公网ip&#xff0c;每次重新您拨号ip地址都会变。如果有一台服务器&#xff0c;需要实现外网访问&#xff0c;在没有固定公网ip的环境下&#xff0c;该如何实现呢&#xff1f;使用…

2.4 输入和显示

本节必须掌握的知识点&#xff1a; 示例五源代码 代码分析 汇编解析 2.4.1 示例五 ■格式化输入函数scanf scanf函数可以从键盘读取输入的信息。scanf函数同样可以像printf函数那样&#xff0c;通过转换说明“%d”来限制函数只能读取十进制数。scanf函数的参数为可变参数…

外网如何访问内网?快解析

由于公网IP资源短缺&#xff0c;我们的电脑大多处于内网环境&#xff0c;如何在外网访问内网电脑&#xff0c;成为一个令人头疼的问题&#xff0c;下面我给大家推荐一个非常实用的方法。 1&#xff1a;访问快解析下载安装快解析服务器 2&#xff1a;运行软件&#xff0c;点击“…

08.4.grafana自定义图形并直接数据库取值

grafana自定义图形并直接数据库取值 自定义添加油表图形 选择gauge图形&#xff0c;并且配置对应设定值&#xff0c;点击应用 如图所示&#xff0c;可以看到仪表盘上的值是zabbix上取得值 配置grafana直接数据库取值 添加mysql数据源 添加后进行配置&#xff0c;我这…

计算机毕业设计python+spark知识图谱音乐推荐系统 音乐数据分析可视化大屏 音乐爬虫 LSTM情感分析 大数据毕设 深度学习 机器学习

本科毕业设计&#xff08;论文&#xff09;开题报告 课题名称 基于Spark的音乐推荐与数据分析系统 的设计与实现 课题类型 系统设计 学院 大数据与人工智能学院 班级 专业 数据科学与大数据技术 指导教师 职称 学生姓名 学号 重庆工程学院教务处制 1.课…

函数模板底层本质

#include<iostream> using namespace std;template<typename T1> T1 ave(T1 a, T1 b) { return a b; }int main() {ave(100, 200);ave(short(100), short(200));return 0; }反汇编代码 模板本质是编译器帮忙生成了不同的函数 就算非类型参数值不一样编译器也重新…

开发一款相亲交友小程序

uni-app框架&#xff1a;使用Vue.js开发跨平台应用的前端框架&#xff0c;编写一套代码&#xff0c;可编译到Android、小程序等平台。 框架支持:springboot/Ssm/thinkphp/django/flask/express均支持 前端开发:vue.js 可选语言&#xff1a;pythonjavanode.jsphp均支持 运行软件…

STM32F407-驱动SHT41采集温湿度

STM32F407-驱动SHT41采集温湿度 SHT41 SHT41通过I2C方式进行驱动 从机地址&#xff1a; 0x44 获取数据方式 1&#xff09;先发送I2C写&#xff0c;写入特定指令 2&#xff09;延时一段时间&#xff0c;等待SHT41处理 3&#xff09;再进行I2C读&#xff0c;读数据即可 一些…

【谷粒商城】02安装和配置git

1.下载和安装git 地址&#xff1a;https://git-scm.com/download/win 傻瓜式安装 2.配置git DELLLJL MINGW64 ~/Desktop $ git config --global user.name "yufuabu"DELLLJL MINGW64 ~/Desktop $ git config --global user.email "463999534qq.com"DELL…

智慧管家物业管理系统(小组项目)

目录 前言 一、项目介绍 1、目的和背景 2、项目主要内容 3、技术介绍 二、功能模块 1、重要文件结构 2、功能实现&#xff08;部分个人负责模块功能&#xff09; 2.1 展示房源信息页面 2.2 房屋详情页面 2.3 房源信息管理 三、功能模块页面 1、前台模块 2、后台…

【Mac】Ghost Buster Pro(苹果电脑内存清理专家) v3.2.5安装教程

软件介绍 Ghost Buster pro是一款针对Mac系统的电脑清理和优化工具&#xff0c;可以帮助用户清理系统垃圾、修复注册表错误、卸载不需要的软件、管理启动项等&#xff0c;从而提高系统性能和稳定性。 安装教程 1.打开镜像包&#xff0c;拖动「Ghost Buster Pro」到应用程序中…

UnitTest / pytest 框架

文章目录 一、UnitTest框架1. TestCase使用2. TestSuite 和 TestRunner3. TestLoader4. Fixture装置5. UnitTest断言1. 登录案例 6. 参数化1. parameterized插件 7. unitTest 跳过 二、pytest 框架1. 运行方式3.读取配置文件(常用方式) 2. pytest执行用例的顺序1. 分组执行(冒烟…

华为数据之道第二部分导读

目录 导读 第二部分 第4章 面向“业务交易”的信息架构建设 信息架构的四个组件 数据资产目录 数据标准 数据模型 数据分布 信息架构原则&#xff1a;建立企业层面的共同行为准则 信息架构建设核心要素&#xff1a;基于业务对象进行设计和落地 按业务对象进行架构设…

vue3+ts--实际开发之--table表格打印或者保存

vue3实现指定区域打印&#xff08;导出&#xff09;功能-主要是解决分页内容分割问题 一、 问题页面效果二、 Print.js相关属性 和使用1. 介绍2. 安装引入3. PrintJS参数配置表 三 、解决关于分页文字或者表格被分割问题&#xff0c;解决后如下&#xff1a;1. 设置一个自定义ta…

20240512,函数对象,常用算法:遍历,查找

函数对象 函数对象基本使用 重载 函数调用操作符 的类&#xff0c;其对象被称为函数对象&#xff1b;函数对象使用重载的&#xff08;&#xff09;时&#xff0c;行为类似函数调用&#xff0c;也叫仿函数 函数对象&#xff08;仿函数&#xff09;本质是一个类&#xff0c;不是…

创新案例|为何农夫山泉创新战略升级为一家零售科技公司

农夫山泉上市的消息被公之于众后&#xff0c;几乎所有人都将目光投向了这家国内家喻户晓的饮料公司&#xff0c;谁都想第一时间内窥探它的庐山真面目。 当然&#xff0c;在此之前已经有多路消息通过旁敲侧击&#xff0c;从管窥中获取了一些农夫山泉的真实数据。 去年6月&…