关于轰隆隆网站单页的仿写实现

最新推荐文章于 2024-11-01 12:26:05 发布
最新推荐文章于 2024-11-01 12:26:05 发布
阅读量72 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jtnykx/article/details/124383348
版权

关于轰隆隆网站单页的仿写实现

在这里插入图片描述
实现的代码段如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .nav {
            height: 88px;
            min-width: 1356px;
            background-color: #234781;
        }

        .nav .wrap {
            height: 88px;
            width: 1356px;
            margin: 0 auto;
            overflow: hidden;
        }

        .nav .wrap .logo {
            height: 52px;
            margin-top: 18px;
            float: left;
            margin-left: 177px;
        }

        .nav .wrap a {
            float: right;
            font-size: 16px;
            width: 64px;
            color: #6c7ca4;
            line-height: 73px;
            height: 73px;
            border-bottom: 4px solid #234781;
            text-align: center;
            margin-left: 60px;
        }

        .nav .wrap .now {
            color: #9d8553;
            border-color: #deab39;
        }

        .img {
            height: 490px;
            background-image: url(./img/banner1.png);
            background-position: center center;
            background-size: cover;
            min-width: 1354px;
            margin: 0 auto;
        }

        .main {
            min-width: 1356px;
            background-color: #fff;
        }

        .main .wrap {
            width: 1000px;
            height: 716px;
            margin: 30px auto 0;
        }

        .main .wrap .img1 {
            height: 300px;
            background-image: url(./img/c1.png);
            background-position: center center;
            background-size: cover;
        }

        .main .wrap .center {
            margin-top: 15px;
        }

        .main .wrap .center img {
            width: 300px;
            height: 400px;
            float: left;
        }

        .jieshao {
            height: 195px;
            text-align: center;
            margin: 0 auto;
        }

        .jieshao img {
            margin-top: 70px;
            height: 22px;
        }

        .jieshao .top {
            height: 38px;
            line-height: 38px;
            font-size: 26px;
            font-weight: 700;
            color: black;
            letter-spacing: 5px;
        }

        .product {
            min-width: 1356px;
            height: 640px;
            background-color: #f3f6fc;
        }

        .product .wrap {
            width: 1000px;
            margin: 0 auto;
        }

        .product .wrap .item {
            height: 320px;
            width: 300px;
            float: left;
            text-align: center;
        }

        .product .wrap .item p {
            margin-top: 30px;
            height: 40px;
            width: 300px;
            font-size: 18px;
            line-height: 40px;
        }

        .product .wrap .item div {
            height: 170px;
            border-top: 1px solid #ddd;
        }

        .product .wrap .item .c1 {
            margin-top: 20px;
            height: 150px;
            width: 300px;
        }

        .product .wrap .item .bottom1 {
            width: 80px;
            font-weight: 700;
            margin: 30px auto 0;
            height: 22px;
            line-height: 22px;
            font-size: 18px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .bottom {
            min-width: 1000px;
            background-color: #fff;
        }

        .bottom .wrap {
            width: 1000px;
            height: 530px;
            margin: 0 auto;
        }

        .bottom .wrap .wrap1 .left {
            width: 426px;
            height: 530px;
            float: left;
        }

        .bottom .wrap .wrap1 .left .big {
            width: 426px;
            height: 530px;
            margin: 0;
        }

        .bottom .wrap .wrap1 .little {
            height: 250px;
            width: 215px;
            margin-top: 30px;
            margin-left: 30px;
            float: left;
        }

        .zixun {
            min-width: 1000px;
            background-color: #fff;
        }

        .zixun .wrap {
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }

        .zixun .wrap .left {
            width: 500px;
            float: left;
        }

        .zixun .wrap .left img {
            height: 250px;
            width: 500px;
        }

        .zixun .wrap .left .title {
            height: 76px;
            font-size: 22px;
            line-height: 76px;
            font-weight: 900;
            color: black;
        }

        .zixun .wrap .left .words {
            height: 60px;
            line-height: 30px;
            font-size: 18px;
            color: gray;
        }

        .zixun .wrap .left .botton {
            height: 24px;
            margin-top: 20px;
            line-height: 24px;
            width: 80px;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid lightgray;
            text-align: center;
            color: black;
        }

        .zixun .wrap .right {
            width: 484px;
            margin-left: 16px;
            float: left;
        }

        .zixun .wrap .right .content {
            width: 484px;
            height: 120px;
            float: left;
            border-bottom: 2px;
        }

        .zixun .wrap .right .content .left {
            width: 144px;
            height: 120px;
            float: left;
            text-align: center;
            color: black;
        }

        .zixun .wrap .right .content .left .top {
            margin-top: 30px;
            height: 40px;
            width: 144px;
            line-height: 40px;
            font-size: 40px;
        }

        .zixun .wrap .right .content .left .bottom2 {
            margin-top: 12px;
            width: 144px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
        }

        .zixun .wrap .right .content .title1 {
            margin-top: 30px;
            height: 22px;
            font-size: 22px;
        }

        .zixun .wrap .right .content .words1 {
            height: 44px;
            margin-top: 20px;
            line-height: 22px;
            font-size: 16px;
            color: gray;
        }

        .hz {
            min-width: 1356px;
            height: 400px;
            background-color: #f3f6fc;
        }

        .hz .wrap {
            width: 1356px;
            overflow: hidden;
            margin: 0 auto;
        }

        .hz .wrap .item {
            width: 950px;
            height: 340px;
            margin: 60px auto 0;
        }

        .hz .wrap .item .pic {
            height: 128px;
            width: 138px;
            float: left;
            text-align: center;
            margin-left: 20px;
            margin-bottom: 20px;
            border: 1px solid lightgray;
        }

        .hz .wrap .item .pic img {
            height: 60px;
            margin-top: 34px;
        }

        .bottom4 {
            height: 206px;
            min-width: 1356px;
            background-color: #233059;
        }

        .bottom4 .wrap {
            width: 1356px;
            height: 206px;
            margin: 100px auto 0;
            /* overflow: hidden; */
        }

        .bottom4 .wrap .logo {
            height: 46px;
            margin-top: 80px;
            margin-left: 180px;
            margin-right: 90px;
            float: left;
        }

        .bottom4 .wrap .khd {
            height: 206px;
            float: left;
            margin-left: 40px;
            width: 150px;
        }

        .bottom4 .wrap .khd .name {
            height: 76px;
            line-height: 76px;
            font-size: 18px;
            color: #fff;
            font-weight: 900;
        }

        .bottom4 .wrap .khd .xz {
            height: 40px;
            border: 2px solid #fff;
            line-height: 40px;
            width: 154px;
            text-align: center;
            margin-bottom: 20px;
            background-color: #233059;
        }

        .bottom4 .wrap .khd .xz a {
            color: #fff;
            font-size: 16px;
        }

        .bottom4 .wrap .erweima {
            height: 220px;
            width: 200px;
            margin-top: -40px;
            background-color: #171e2e;
            margin-right: 180px;
            text-align: center;
            float: right;
        }

        .bottom4 .wrap .erweima img {
            height: 124px;
            width: 124px;
            margin-top: 38px;
        }

        .bottom4 .wrap .erweima .saoma {
            font-size: 14px;
            margin-top: 14px;
            color: #fff;
        }

        .bottom5 {
            min-width: 1356px;
            height: 80px;
            background-color: #171e2e;
        }

        .bottom5 .wrap {
            width: 1356px;
            margin: 0 auto;
            height: 80px;
        }

        .bottom5 .wrap p {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            margin-top: 30px;
            float: left;
        }
    </style>

<body>
    <div class="nav">
        <div class="wrap">
            <img class="logo" src="/00public img/logo.png" alt="">
            <a href="###" style="margin-right: 177px;">加入我们</a>
            <a href="###">行业资讯</a>
            <a href="###">机械加盟</a>
            <a href="###">招投标</a>
            <a class="now" href="###">首页</a>
        </div>
    </div>
    <div class="img">
    </div>
    <div class="main">
        <div class="wrap">
            <div class="img1"></div>
            <div class="center">
                <img src="./img/c2.png" alt="">
                <img style="margin: 0 50px;" src="./img/c3.png" alt="">
                <img src="./img/c4.png" alt="">
            </div>
        </div>
    </div>
    <div class="jieshao">
        <img src="./img/p1.png" alt="">
        <p class="top">主要产品</p>
        <p style="font-size: 12px;font-weight: 100;">ABABABABABABABAB</p>
    </div>
    <div class="product">
        <div class="wrap">
            <div class="item">
                <p>风力发电</p>
                <div class="center"><img class="c1" src="./img/c1-1.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
            <div class="item" style="margin: 0 50px;">
                <p>起重设备</p>
                <div class="center"><img class="c1" src="./img/c1-2.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
            <div class="item">
                <p>超级吊塔</p>
                <div class="center"><img class="c1" src="./img/c1-3.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
            <div class="item">
                <p>风力发电</p>
                <div class="center"><img class="c1" src="./img/c1-1.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
            <div class="item" style="margin: 0 50px;">
                <p>起重设备</p>
                <div class="center"><img class="c1" src="./img/c1-2.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
            <div class="item">
                <p>超级吊塔</p>
                <div class="center"><img class="c1" src="./img/c1-3.png" alt=""></div>
                <div class="bottom1">
                    <a href="###">查看详情</a>
                </div>
            </div>
        </div>
    </div>
    <div class="jieshao">
        <img src="./img/p2.png" alt="">
        <p class="top">实时监察</p>
        <p style="font-size: 12px;font-weight: 100;">ABABABABABABABAB</p>
    </div>
    <div class="bottom">
        <div class="wrap">
            <div class="wrap1">
                <div class="left">
                    <img class="big" src="./img/c2-1.png" alt="">
                </div>
                <img style="margin-top: 0;" class="little" src="./img/c2-2.png" alt=""><img style="margin-top: 0;"
                    class="little" src="./img/c2-3.png" alt=""><img class="little" src="./img/c2-4.png" alt=""><img
                    class="little" src="./img/c2-5.png" alt="">
            </div>
        </div>
    </div>
    <div class="jieshao">
        <img src="./img/p3.png" alt="">
        <p class="top">实时监察</p>
        <p style="font-size: 12px;font-weight: 100;">ABABABABABABABAB</p>
    </div>
    <div class="zixun">
        <div class="wrap">
            <div class="left">
                <img src="./img/c3-1.png" alt="">
                <p class="title">科技出手，功力双收</p>
                <p class="words">拿到集中电弧深度市场拿到集中电弧深度市场拿到集中电弧深度市场拿到集中电弧深度市场vv拿到集中电弧深度市场</p>
                <p class="botton">查看更多</p>
            </div>
            <div class="right">
                <div class="content">
                    <div class="left">
                        <p class="top">01</p>
                        <p class="bottom2">2015-06</p>
                    </div>
                    <p class="title1">科技出手，功力双收</p>
                    <p class="words1">集中电弧深度市场拿到集中电弧vvv集中电弧深度市场拿到集集中电弧深度市场拿到集电弧深</p>
                </div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="left">
                        <p class="top">01</p>
                        <p class="bottom2">2015-06</p>
                    </div>
                    <p class="title1">科技出手，功力双收</p>
                    <p class="words1">集中电弧深度市场拿到集中电弧vvv集中电弧深度市场拿到集集中电弧深度市场拿到集电弧深</p>
                </div>
            </div>
            <div class="right">
                <div class="content">
                    <div class="left">
                        <p class="top">01</p>
                        <p class="bottom2">2015-06</p>
                    </div>
                    <p class="title1">科技出手，功力双收</p>
                    <p class="words1">集中电弧深度市场拿到集中电弧vvv集中电弧深度市场拿到集集中电弧深度市场拿到集电弧深</p>
                </div>
            </div>
        </div>
    </div>
    <div class="jieshao">
        <img src="./img/p4.png" alt="">
        <p class="top">实时监察</p>
        <p style="font-size: 12px;font-weight: 100;">ABABABABABABABAB</p>
    </div>
    <div class="hz">
        <div class="wrap">
            <div class="item">
                <div style="margin-left: 0;" class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div style="margin-left: 0;" class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
                <div class="pic">
                    <img src="./img/f1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom4">
        <div class="wrap">
            <img class="logo" src="/00public img/logo.png" alt="">
            <div class="khd">
                <a class="name" href="###">工程客户端</a>
                <div class="xz"><a href="###">AppStore下载</a></div>
                <div class="xz"><a href="###">android下载</a></div>
            </div>
            <div class="khd">
                <a class="name" href="###">工程客户端</a>
                <div class="xz"><a href="###">AppStore下载</a></div>
                <div class="xz"><a href="###">android下载</a></div>
            </div>
            <div class="erweima">
                <img src="/00public img/code.png" alt="">
                <p class="saoma">扫码下载</p>
            </div>
        </div>
    </div>
    <div class="bottom5">
        <div class="wrap">
            <p style="margin-left: 422px;">Copyright &copy; 2015-2018 轰隆隆honglonglong.ALL Rights Reserverd</p>
            <p style="margin-left: 30px;">京ICP备15045098号</p>
        </div>
    </div>
</body>

</html>
郭临腾
关注
display:table-cell实现兼容性的两栏自适应布局实现代码
12-13
微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，...
轰隆隆-小站 链接目录
龙在天涯 - 轰隆隆
12-15 573
轰隆隆-小站 链接目录http://www.honglonglong.com- 分页 第一页 http://www.honglonglong.com?page1 第二页 http://www.honglonglong.com?page2 第三页 http://www.honglonglong.com?page3 第四页 http://www.honglonglong.com?page4 第
轰隆隆网页
m0_69422950的博客
04-22 90
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
关于计算机的知识作文,计算机想象作文
weixin_28836989的博客
06-18 284
什么是想象作文300字。科学知识，同时还要对某一方面的科学现象感兴趣，再加入自己的想象来写，这样会使文章较好地体现未来世界的高科技水平。二、什么是想象作文。这类想象作文是目前小学高年级经常会遇到的，也是比较好写的一类想象作文，这类作文主要有现实的素材可以参考，所以写起来比较容易。这类作文的要求是：它们均属于以现实为基础来加以想象：a．发挥想象，运用童趣，编写童话。3)结合现实生活，配以自己的想象，...
省计算机软件评审活动网站,2012年广东省计算机教育软件评审活动.doc
weixin_39527879的博客
07-09 303
附件12012年广东省计算机教育软件评审活动获奖作品名单(排名不分先后)一、幼儿教育组：多媒体课件( 48件)一等奖( 8 件)作品名称学科制作单位作者姓名兔子和乌龟的故事科学广州市越秀区黄花实验幼儿园廖晓梅轰隆隆科学广州市越秀区黄花实验幼儿园刘曼丽好玩的纸科学广州市越秀区黄花实验幼儿园许迎琨金鱼科学广州市越秀区黄花实验幼儿园王晓军、刘安安认识中国春节其他佛山市顺德区北滘镇中心幼儿园周绣峰有趣的...
关于我喜欢计算机的作文600字,我喜欢用的家用电器作文600字
weixin_30295121的博客
07-22 125
“轰隆隆、轰隆隆”，你们猜这是什么声音？是我的伙伴——榨汁机在唱歌呀！我们家有一台榨汁机，它可漂亮了。全身呈黄色，上面类似杯子只是多了一个盖。下面为长方体，约有600cm3。榨汁机里还有搅拌器，螺旋机。它们可以让里面的水果变成果渣与果冻。自从家里买了榨汁机，我一直手痒痒的，不知妈妈说了多少次：“不行，会有危险。”终于有一天，趁爸妈不在家，我偷偷地做了一次果汁。首先，我将苹果放进榨汁机，关上盖子。接...
轰隆隆-小站地址原理整理分析
小小王的专栏
02-11 542
整站貌似只有一个页面，其实是通过请求参数控制的！ 首页：http://www.honglonglong.com/ 感悟：http://www.honglonglong.com?page1 游戏：http://www.honglonglong.com?page2 美图：http://www.honglonglong.com?page3 分享：http://www.honglongl
HTML+JAVASCRIPT+CSS模拟实现模拟书本
m0_46981340的博客
08-01 577
HTML+JAVASCRIPT+CSS模拟实现模拟书本
恶搞轰隆隆能力受到广泛
qwe570101995的专栏
04-27 242
http://i.sodao.com/u9109960/photo-20140427699966e112917893.html#p1 http://i.sodao.com/u9109960/photo-20140427fb61d1a512918074.html#p1 http://i.sodao.com/u9109960/photo-2014042730a9b09a12918073.html#
题解 | #统计字符#C++ unordered_map实现
华鑫的专栏
06-25 1014
接到一个小公司的软测offer，后续发展目标是后端或者测开，不知道值不值得去 #不给转正的实习，你还。现在就业环境太恶劣了，尤其是计算机，java开发，好多小公司直接不给一金，甚至只有一险，这样的公司值。一路磕磕绊绊到面试，做笔试的时候，这家公司的网站出问题了，几个小时后才完成，第二天就收到面试邀请，约。昨天刚在牛客许愿，今天就收到offer了，面经都在我的动态的文章，等我有时间把自己的八股整理一下回馈。有没有去过景嘉微日常的伙伴，我是硬件的，说六个月，可以干两个月跑路嘛，9月准备秋招#引流 字节 美团。
语言轰隆隆来了PPT课件.pptx
10-15
这篇PPT课件的故事以一个名为“轰隆隆”的大恐龙为主角，通过生动的叙述方式，展现了语言的力量以及友谊和互助的重要性。虽然这个标题和描述看起来像是针对儿童的教育材料，但其中蕴含的教育理念和知识内容适用于...
鄂教版三年级大自然的声音仿写.doc
11-07
3. **声音的描绘**：教学如何生动描绘声音，如用拟声词（轰隆隆、沙沙沙、哗哗哗、呼呼呼）来表现不同自然现象的声音特点，增强文字的表现力。 4. **对比与变化**：通过对比急促和轻柔的海浪声，展示声音的多样性，...
大班语言优秀公开课教案《轰隆隆来了》润新教育.txt
05-29
大班语言优秀公开课教案《轰隆隆来了》润新教育.txt
大班美术公开课教案《轰隆隆的小火车》润新教育.txt
05-29
大班美术公开课教案《轰隆隆的小火车》润新教育.txt
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 888
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 653
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS浮雕效果
p_s_p的博客
10-30 282
【代码】CSS浮雕效果。
css 元素高度从0过度到auto的两种方案
qq_31683775的博客
10-30 296
1.使用display: grid;和 grid-template-rows: 0fr;2.使用vue的 <transition>
css实现antd丝带效果
m0_62323931的博客
11-01 361
【代码】css实现antd丝带效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值