web期末网站设计大作业 HTML+CSS+JS仿爱奇艺官网影视网站

最新推荐文章于 2023-08-14 19:49:22 发布

VIP文章我是学长霸霸

最新推荐文章于 2023-08-14 19:49:22 发布

阅读量238

点赞数

文章标签： css dreamweaver html 静态网页作业 javascript大作业

本文链接：https://blog.csdn.net/qq_38512792/article/details/130354910

版权

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>爱奇艺-中国领先的视频门户，高清影视剧，网络视频在线观看</title>
    <link rel="shortcut icon" href="http://www.qiyipic.com/common/images/logo.ico" type="image/icon">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>

<body>
    <div class="warp" id="banner">
        <div class="layer"></div>
        <div class="header">
            <div class="text clearfix">
                <input type="text" class="fl" id="text" placeholder="爱情保卫战" />

                <div class="fl">
                    <div class="fl sou">搜全网</div>
                </div>

                <ul class="menu clearfix">
                    <li class="fl login1"><a href="javascript:;">登录</a></li>
                    <li class="fl enroll1"><a href="javascript:;">注册</a></li>
                    <li class="fl"><a href="javascript:;">开通VIP</a></li>
                    <li class="fl upload" id="upload">
                        <a href="javascript:;">上传</a>
                        <div class="upload1" id="Upload1">
                            <a href="javascript:;" style="color:#000;margin-top:5px;">上传视频</a>
                            <a href="javascript:;" style="color:#000">制作视频</a>
                            <a href="javascript:;" style="color:#000">我的空间</a>
                            <a href="javascript:;" style="color:#000">视频管理</a>
                            <a href="javascript:;" style="color:#000">流量分析</a>
                            <a href="javascript:;" style="color:#000">申请分成</a>
                            <div class="jiao"></div>
                        </div>
                        <i></i>
                    </li>
                    <li class="fl">
                        <a href="javascript:;">下载客户端</a>
                    </li>
                    <li class="fl message" id="message">
                        <a href="javascript:;">消息</a>
                        <div id="message1" class="message1">
                            <div class="jiao jiao1"></div>
                            <span class="active">更新提示</span>
                            <span>用户推荐</span>
                            <span style="margin-right:0;">系统通知</span>
                            <div class="tab">
                                <div class="active">您还没有收到新的更新消息</div>
                                <div>暂时还没有新的推荐</div>
                                <div>您还没有登录，<a href="javascript:;" class="loginline login1">登录</a>后可以可以查看完整的通知列表</div>
                            </div>
                            <a href="javascript:;" class="andmore">查看更多</a>
                        </div>
                        <i></i>
                    </li>
                    <li class="fl" id="pr">
                        <a href="javascript:;">播放记录</a>
                        <div id="pr1" class="message1">
                            <div class="jiao jiao2"></div>
                            <div class="pr_text">
                                <p>暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，<b>查看全部</b></p>
                            </div>
                        </div>
                        <i></i>
                    </li>
                </ul>
                <div class="login login_y">
                    <div class="baby"></div>
                    <div class="close"></div>
                    <div class="account">
                        <div class="clearfix">
                            <p class="fl">账 号 ：</p>
                            <input type="text" placeholder="请输入手机/邮箱" class="fl">
                        </div>
                        <div class="clearfix" style="margin-top:24px">
                            <p class="fl">密 码 ：</p>
                            <input type="text" placeholder="请输入密码" class="fl">
                        </div>
                    </div>
                    <div class="memory clearfix">
                        <input type="checkbox" checked="true" class="fl">
                        <p class="fl">记住我</p>
                        <a href="javascript:;" class="fl" style="padding-left:85px;">找回密码</a>
                        <div class="fl" style="padding-left:11px;padding-right:11px;">|</div>
                        <a href="javascript:;" class="fl">立即注册</a>
                    </div>
                    <div class="loginto"><a href="javascript:;">登录</a></div>
                    <div class="other"></div>
                </div>
                <div class="enroll enroll_y">
                    <div class="baby"></div>
                    <div class="close"></div>
                    <div class="account">
                        <div class="clearfix">
                            <p class="f

最低0.47元/天解锁文章

我是学长霸霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web期末网站设计大作业 HTML+CSS+JS仿爱奇艺官网影视网站

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
复制链接

扫一扫