HTML个人网页制作

最新推荐文章于 2024-05-27 08:58:30 发布
最新推荐文章于 2024-05-27 08:58:30 发布
阅读量826 收藏 12
点赞数 10
分类专栏： html网页制作 文章标签： html css css3 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71752625/article/details/134636712
版权

文章目录

1.案例需求

HTML个人网页项目制作

2.编程思路

第一步：对div盒子进行布局。
第二步：插入图片、视频，填充文字。
第三步：设置图片文字视频的样式。
第四步：通过CSS样式美化页面。

3.案例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <base target="_blank" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: #f3f8fb;
      }
      .title {
        height: 60px;
        background: url(images/sz.png) no-repeat center center;
      }
      h1 {
        text-align: center;
        color: #666666;
        font-size: 18px;
        margin: 8px 0 15px 0;
      }
      .nav ul {
        width: 1200px;
        background-color: #012883;
        margin: 0 auto;
        text-align: center;
        border-radius: 15px;
        list-style: none;
        margin-bottom: 20px;
      }
      .nav li {
        display: inline-block;
        width: 70px;
        height: 50px;
        line-height: 50px;
        margin: 0 40px;
      }
      .nav a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        display: block;
      }
      .nav li:hover {
        background-color: #4e69a9;
      }
      .tv {
        width: 1280px;
        height: 400px;
        overflow: hidden;
        margin: 0 auto;
        border-radius: 10px;
      }
      .screen {
        width: 5120px;
        animation: switch 8s ease-out infinite;
      }
      .screen > img {
        width: 1280px;
        height: 400px;
        float: left;
      }
      @keyframes switch {
        0%,
        20% {
          margin-left: 0;
        }
        25%,
        45% {
          margin-left: -1280px;
        }
        50%,
        70% {
          margin-left: -2560px;
        }
        75%,
        100% {
          margin-left: -3840px;
        }
      }
      .content {
        width: 1050px;
        height: 330px;
        margin: 15px auto;
      }
      .contentleft {
        width: 750px;
        height: 300px;
        float: left;
      }
      .contentleft h4 {
        margin-bottom: 10px;
      }
      .content .box1 {
        width: 520px;
        height: 300px;
        float: left;
      }

      .box1 .box1top {
        width: 500px;
        height: 120px;
        background-color: #fff;
        padding: 10px;
      }
      .box1 .box1bottom {
        width: 500px;
        height: 120px;
        background-color: #fff;
        margin-top: 10px;
        padding: 10px;
      }
      .photo {
        width: 200px;
        height: 120px;
        float: left;
        margin-right: 15px;
      }
      .photo > img {
        width: 200px;
        height: 120px;
        border-radius: 10px;
      }
      .box1 p {
        font-size: 14px;
      }
      .riqi {
        font-size: 12px;
        color: gray;
        margin-top: 20px;
      }
      .box2 {
        width: 180px;
        height: 270px;
        float: right;
        padding: 10px;
        background-color: #fff;
      }
      .box2 > img {
        width: 180px;
        height: 270px;
        border-radius: 10px;
      }
      .contentright {
        width: 260px;
        height: 320px;
        float: right;
        background-color: #fff;
        text-align: center;
      }
      .contentright h4 {
        margin: 10px 0;
        text-align: left;
        margin-left: 15px;
      }
      .contentright > img {
        width: 230px;
        height: 130px;
      }
      .contentright table {
        width: 160px;
        height: 120px;
        text-align: left;
        margin-left: 15px;
        font-size: 12px;
      }
      span {
        color: #012883;
      }
      .footer {
        width: 1060px;
        margin: 0 auto;
      }
      .footer h4 {
        margin-bottom: 20px;
      }
      .footer img {
        width: 250px;
        height: 200px;
        border-radius: 10px;
        transition: transform 0.3s ease;
      }
      .footer img:hover {
        transform: translateY(-10px);
      }
      .zp {
        width: 250px;
        display: inline-block;
        margin: 0 5px;
        background-color: #fff;
        border-radius: 10px;
      }
      .zp p {
        font-size: 14px;
        margin-left: 10px;
        margin-bottom: 5px;
      }
      .donman {
        width: 1050px;
        margin: 10px auto;
      }
      .donman h4 {
        margin: 20px 0;
      }
      .nav2 {
        width: 1520px;
        margin: 0 auto;
        background-color: #111111;
      }
      .nav2 ul {
        margin: 0 auto;
        text-align: center;
        list-style: none;
      }
      .nav2 li {
        display: inline-block;
        width: 60px;
        height: 50px;
        line-height: 50px;
        margin: 0 13px;
      }
      .nav2 a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        display: block;
      }
      .nav2 ~ p {
        width: 1520px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: gray;
        font-size: 12px;
        background-color: black;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="title"></div>
    <h1>个 人 网 页</h1>
    <div class="nav">
      <ul>
        <li><a href="首页.html">首页</a></li>
        <li><a href="关于我.html">关于我</a></li>
        <li><a href="心情随笔.html">心情随笔</a></li>
        <li><a href="个人作品.html">个人作品</a></li>
        <li><a href="留言板.html">留言板</a></li>
      </ul>
    </div>
    <div class="tv">
      <div class="screen">
        <img src="images/bo1.jpg" alt="" />
        <img src="images/bo2.jpg" alt="" />
        <img src="images/bo3.jpg" alt="" />
        <img src="images/bo4.jpg" alt="" />
      </div>
    </div>
    <div class="content">
      <div class="contentleft">
        <h4>最新随笔</h4>
        <div class="box1">
          <div class="box1top">
            <div class="photo">
              <img src="images/b1.jpg" alt="" />
            </div>
            <p>人生就是越努力越幸运！</p>
            <p class="riqi">2021-12-19</p>
          </div>
          <div class="box1bottom">
            <div class="photo">
              <img src="images/b2.jpg" alt="" />
            </div>
            <p>"只有跑起来，才会有风"</p>
            <p class="riqi">2021-12-19</p>
          </div>
        </div>
        <div class="box2">
          <img src="images/b3.jpg" alt="" />
        </div>
      </div>
      <div class="contentright">
        <h4>个人介绍</h4>
        <img src="images/hnwlxy.jpg" alt="" />
        <table>
          <tr>
            <td><span>姓名：</span></td>
            <td>曹升权</td>
          </tr>
          <tr>
            <td><span>学号：</span></td>
            <td>21310102</td>
          </tr>
          <tr>
            <td><span>班级：</span></td>
            <td>软件工程2101班</td>
          </tr>
          <tr>
            <td><span>学校：</span></td>
            <td>湖南文理学院</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="footer">
      <h4>个人作品</h4>
      <div class="zp">
        <img src="images/shuilian.jpg" alt="" />
        <p>睡莲</p>
      </div>
      <div class="zp">
        <img src="images/srxh.jpg" alt="" />
        <p>生如夏花</p>
      </div>
      <div class="zp">
        <img src="images/p3.jpg" alt="" />
        <p>稻城亚丁</p>
      </div>
      <div class="zp">
        <img src="images/p4.jpg" alt="" />
        <p>落日和渔船</p>
      </div>
    </div>

    <div class="donman">
      <h4>喜爱动漫</h4>
      <video
        src="video/吞噬星空.mp4"
        controls
        poster="images/luofen.jpg"
        muted
        width="1050px"
      ></video>
    </div>
    <div class="nav2">
      <ul>
        <li><a href="#">关于我</a></li>
        <li><a href="#">心情随笔</a></li>
        <li><a href="#">个人作品</a></li>
        <li><a href="#">留言板</a></li>
      </ul>
    </div>
    <p>设计制作：个人网页</p>
  </body>
</html>

3.首页效果图

首页

4.技术细节

1、在导航栏的下方写了一个简单的轮播图。
2、给部分图片设置了圆角。
3、给个人作品中的图片实现了鼠标触碰向上跳动的效果。
4、使用占位给视频一个好看的封面。

5.小结

制作网页时首先要制定整体框架,确定将网页分为几个部分,再在各个部分中添加所需要的添加的内容.

打会游戏睡会觉
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单html个人网站
07-04
一份最简单的html制作模板，HTML 网页编程 主页模板 本人学习过程中索积累下的部分资料，特此上传共享。
个人网页模板HTML
12-08
个人网页模板HTML
HTML学生个人网站作业设计：HTML做一个公司官网首页页面（纯html代码）
网页设计与制作
03-26 1018
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
个人网页介绍家乡纯html
10-26
设计工具用Dreamweaver8.0、Flash8.0、Photoshop CS 网站基本栏目（至少就包含以下5个栏目） 1）个人网站首页（） 2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言表的框架
前端----HTML 百度首页制作
nO0b
09-24 1万+
效果图: 用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如 底部的小图标懒得搞上去 这个小警徽和小图标 右上角的标题颜色没有细致修改 登陆和设置的浅色没有设置   但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容 分析百度搜索url设置相应表单项 https://www.baidu.com/s?wd=搜索内容&amp;ok=提交 ...
html个人网页设计
11-24
简单的网页设计，有音乐，有照片，有排版，欢迎下载。
html+css网站模板网页设计源码-html个人网页设计模板.zip
05-10
html+css网站模板网页设计源码-html个人网页设计模板
个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 个人博客
07-10
临近期末, 你是否还在为HTML网页设计期末作业而发愁，是否为还在为老师的网页制作作业要求感到头大？是否觉得HTML网页作业无从下手？，网页要求的总数量太多？是否找不到合适的模板？等等一系列问题。本资源就可以为...
简单个人网页制作 大学生网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品代码
07-28
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的个人网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 临近期末，大一新生的各种考试和专业结课作业纷至沓来。...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
HTML设计网站首页
qq_43711394的博客
11-26 1万+
【HTML实验】 采用CSS+DIV技术如图所示的设计网站首页 1、画出页面布局结构图； 2、定义各图层样式，以及 body、段落、文字等其他样式； 3、用无序列表实现水平导航菜单，关键有两点：消除无序列表前面的符号、将默认垂直排列的列表转换成水平排列，并均匀显示； 4、设置导航菜单的超链接样式； 5、如用 span 实现水平导航菜单？请写出代码。 6、给出程序...
使用HTML制作影城首页 #web开发
nzx383的博客
03-10 1057
该部分主要是由4个下拉列表和一个可单击的按钮，为使结构更清晰，将这些内容都放置到ul列表中，这就需要将整体结构中该模块的div标签换成ul标签。该区域包含了标题和影片列表，标题可使用span标签引入，影片列表可通过3个ul+li列表来引入，在每一个li中再嵌套影片和片名。对于轮播图部分，它是3张图片依次来轮播的，完整的实现需要应到的CSS来布局，所以对于html部分来说，这里我们先暂时放一张图片来代表banner区。其实如果我们要设计这样一个网页，就需要将此弄成我们知道的模式，以便我们的设计和究！
HTML如何制作公司网站首页（web前端期末大作业）
qq3200628753的博客
01-09 710
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
使用HTML制作一个简单的个人主页
m0_67394360的博客
03-06 9568
此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落的细节处理、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版
HTML制作菜鸟教程网站首页
热门推荐
qq_36470686的博客
09-21 2万+
这是我们要制作的网站首页  我们接下来将分块进行解析: 顶端模块: 我们将顶端模块分为两个div,分别通过float属性和margin属性达到我们想要的布局效果. 此处我试用的高和宽皆为像素定值,实际很多地方高都不需为定值,使其根据内容自适应大小即可.因为是像素设置的原因,所以当浏览器窗口缩小,浏览器窗口像素相应减小.此时div的宽又无法自适应调整,如果浏览器一行无法放下的话,di...
html网页主页制作,网页主页制作过程
weixin_42632434的博客
06-17 4261
网页主页制作过程发布时间:2008-10-29 发布者:新锐传媒 查阅 [3749] 评论 [0]一、准备材料你首先做一个小计划,准备在主页上告诉人家什么？比如介绍三个方面：自我介绍,我的爱好,我的工作,那你就先起一个总目录(文件夹,比如d:\html),来放你的所有文件，然后再在这个目录建立三个子目录：myself,interest，job。文件名你可以任意，但最好全部小写，因为有的主机要认大小...
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
最新发布
weixin_42283461的博客
05-27 332
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
仿制CSDN首页（html+css+js）+ 个性化登录注册页
游小北的博客
11-06 1334
技术栈：HTML+CSS+JavaScript 特点、注意点：轮播图、导航条下拉显示更多 list、头像图案大小变化显示登录与注册、搜索框样式的变化、广告关闭显示其他内容、注册页面的两个盒子动画处理。 适用对象：适合初学完 Javascript 制作简单动效，掌握基本布局和样式处理，难度不大但是代码量较大，适合练手巩固基础。可私信我提供源码。
6个页面的HTML个人网页设计，
05-10
以下是一个简单的6个页面的HTML个人网页设计的示例： 第一页：主页 ```html <!DOCTYPE html> <html> 个人网页 <li><a href="index.html">主页</a></li> <li><a href="about.html">关于我</a>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值