dreamweaver网页设计作业制作学生个人网页猫眼电影 WEB静态网页作业模板大学生个人主页博客网页代码 dw个人网页作业成品

最新推荐文章于 2024-06-13 10:08:20 发布

我的大学生活

最新推荐文章于 2024-06-13 10:08:20 发布

阅读量836

点赞数

分类专栏： web前端期末大作业文章标签： dreamweaver 前端课程设计

本文链接：https://blog.csdn.net/qq_38512570/article/details/129868316

版权

这篇博客介绍了如何使用Dreamweaver设计并制作一个以猫眼电影为主题的个人网页，适用于前端课程设计和学生作业。网页采用HTML和CSS布局，包含导航栏、Banner、表单等元素，适合初学者学习。此外，还分享了代码展示和个人设计总结，推荐对前端开发感兴趣的人阅读。

摘要由CSDN通过智能技术生成

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/clear.css">
    <title>首页</title>
    <link rel="icon" href="images/title-lolg.png">

</head>

<body>
    <header>
        <div class="header-body">
            <a href="index.html?123" class="logo">猫眼电影</a>
            <div class="city">成都
                <span class="caret"></span>
            </div>
            <div class="city-list">
                <div class="now-city">
                    定位城市: 定位失败
                </div>
                <div class="citys">
                    <span class="icon"></span> 定位失败
                </div>
            </div>
            <div class="nav">
                <ul class="nav-list">
                    <li><a href="index.html?123" class="nav-model active">首页</a></li>
                    <li><a href="movies.html" class="nav-model">电影</a></li>
                    <li><a href="cinemas.html" class="nav-model">影院</a></li>
                    <li class="nav-model">演出</li>
                    <li class="nav-model">榜单</li>
                    <li class="nav-model">热点</li>
                    <li class="nav-model">商城</li>
                </ul>
            </div>
            <div class="app-download">
                <a href="#">
                    <span class="phone"></span> APP下载
                    <span class="caret"></span>

                    <div class="appcode">
                        <img src="images/phonecode.png" class="app-code"></img>
                        <p class="down-tip">扫码下载APP</p>
                        <p class="down-text">选座更优惠</p>
                    </div>
                </a>
            </div>
            <div class="search">
                <div type="text" class="searchinput">
                    <input type="text" class="input" placeholder="找影视剧、影人、影院">
                    <input class="submit" type="submit" value="">
                </div>
            </div>
            <div class="userimg">
                <img src="images/user.png" alt="">
                <span class="caret"></span>
            </div>
            <div class="userlogin">
                <a href="login.html" class=" notlogin">登录</a>
                <div class="islogin nologin">
                    <a href="personal.html">个人中心</a>
                    <a href="index.html">退出</a>
                </div>
            </div>
    </header>
    <!-- 轮播图 -->
    <div class="wrap" id="wrap">
        <ul class="content"></ul>
        <a href="javascript:;" class="prev">&#60;</a>
        <a href="javascript:;" class="next">&#62;</a>
    </div>
    <!-- 页面主体 -->
    <div class="container">
        <div class="main">
            <!-- 正在热映 -->
            <div class="hot-movie">
                <h2>正在热映（4部）</h2>
                <div class="movies" id="hotmovies">
                </div>
            </div>
            <!-- 即将上映 -->
            <div class="movie-box">
                <div class="movie-header">
                    <h2>即将上映（115部）</h2>
                    <a href="#">
                        <span>全部></span>
                    </a>
                </div>

最低0.47元/天解锁文章

我的大学生活

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
dreamweaver网页设计作业制作学生个人网页猫眼电影 WEB静态网页作业模板大学生个人主页博客网页代码 dw个人网页作业成品

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

扫一扫