南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

网站制作及网页制作之视频&电影网站(HTML+CSS)

发布时间:2024-08-30

来源:

HTML视频&电影网站实例网页代码,该实例里面有设置了css的样式设置,有div的样式格局,这里会介绍如何设计个人网站及web网页制作。(如需源码,可以私信回复“电影”并留下邮箱,或关注GZ号“IT黄大大”)

实例视频&电影网站效果图:

首页
内容1
内容2
留言板

  • 其他
  • 代表作品


    作品名:超人
    创刊号:1938年6月
    所属团队:正义联盟、超级英雄军团

    故事简介


        漫画史上第一位超级英雄。本名卡尔-艾尔(Kal-El),出生于氪星(Krypton)。在氪星面临毁灭之际,他的父母为其找到了浩瀚宇宙中的新家园——地球,用飞船送走了尚在襁褓中的爱子。飞船坠落在美国堪萨斯州的斯莫维尔(Smallville),卡尔被农场主肯特夫妇捡到,并以克拉克·肯特(Clark Kent)的地球名字抚养成人。

    长大后,克拉克成为大都会(Metropolis)《星球日报》 的一名新闻记者。他有着与生俱来的超能力和极强的正义感与同情心,每次在危机时刻,便穿上蓝色紧身衣,披上红色斗蓬,化身超人行侠仗义,拯救人类。

    首页Css代码

    body,

    html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    background-color: #D3D3D3;

    }

    .main {

    width: 63%;

    height: 700px;

    margin: 60px auto;

    }

    .head {

    width: 100%;

    height: 50px;

    border-bottom: 2px solid #999;

    }

    .menu {

    float: left;

    }

    .self_intr {

    width: 100%;

    margin: 30px 0;

    height: 650px;

    float: left;

    background-color: #EEEEEE;

    }

    hr {

    width: 80%;

    margin: 0 auto;

    }

    h2 {

    width: 80%;

    margin-left: 10%;

    }

    .img_text {

    width: 80%;

    margin-left: 10%;

    }

    .img_left {

    float: left;

    width: 350px;

    height: 600px;

    margin: 30px 20px;

    }

    .img_left img {

    margin-bottom: 20px;

    }

    .aihao_li {

    width: 250px;

    height: 300px;

    margin-top: 20px;

    }

    .aihao_li ul li {

    height: 30px;

    list-style: none;

    color: blue;

    }

    .text_intr {

    width: 500px;

    height: 340px;

    float: left;

    margin-top: 30px;

    }

    table {

    width: 80%;

    background-color: #ddd;

    height: 100px;

    margin: 0 auto;

    }

    .t_right {

    text-align: right;

    }

    tr td {

    height: 25px;

    line-height: 20px;

    }

    h3 {

    margin-left: 40px;

    }

    .intr {

    margin: 10px 40px;

    line-height: 35px;

    color: #666;

    font-size: 13px;

    }

    .menu img {

    float: left;

    }

    .h1 {

    float: left;

    font-size: 24px;

    }

    .head ul {

    list-style: none;

    float: left;

    margin-left: 120px;

    }

    .head ul li {

    float: left;

    width: 120px;

    text-align: center;

    }

    .active {

    color: rgb(101, 197, 165);

    }

    ul a {

    float: left;

    }

    由于格式问题,只展示了《首页》的代码,《超人栏目》《海王栏目》《留言栏目》就上截图了,需要的小伙伴关注公众号“IT黄大大”获取源码直接下载。

    超人html代码

    超人Css代码

    海王html代码

    海王Css代码

    留言html代码

    留言Css代码

    注:可能里面的一些图片没有显示,想要完整包的同学们可以留言或关注公众号,这边有时间第一时间给你们发哦。


    上一篇:

    制作一个简单HTML电影网页设计(HTML+CSS)

    返回列表

    下一篇:网页制作的源代码是什么意思

    随机文章

    联系安优网络

    定制您的专属网站建设方案吧

    策略思维与细节的完美结合,有效帮您减少试错成本

    策略思维与细节的完美结合,有效帮您减少试错成本

    立即与安优联系,开启网站设计全新体验

    立即与安优联系,开启网站设计全新体验

    立即与安优联系
    开启网站设计全新体验

    立即与安优联系
    开启网站设计全新体验

    在线咨询

    在线咨询

    拨打电话

    返回顶部

    品质设计 用心服务

    • 12年+定制经验

    • 600+客户选择

    • 高效售后保障

    7*24小时服务热线