纯html+css设计腾讯云pc端网页

辰余先生

已于 2024-09-20 08:22:24 修改

阅读量238

点赞数 3

文章标签： html css 腾讯云

于 2024-09-18 15:16:02 首次发布

本文链接：https://blog.csdn.net/weixin_73348608/article/details/142333838

版权

本项目是通过纯html和css设计的网页，具体页面效果如下

具体代码如下

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯云</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部模块制作 -->
    <header>
        <div class="w">
            <div class="fl">
                <div class="logo">
                    <h1><a href="index.html" title="腾讯云">腾讯云</a></h1>
                </div>
            </div>
            <div class="fr">
                <ul>
                    <li>最新活动</li>
                    <li></li>
                    <li>产品</li>
                    <li></li>
                    <li>解决方案</li>
                    <li></li>
                    <li>定价</li>
                    <li></li>
                    <li>文档</li>
                    <li></li>
                    <li>企业中心</li>
                    <li></li>
                    <li>云市场</li>
                    <li></li>
                    <li>开发者支持</li>
                    <li></li>
                    <li>合作与生态</li>
                    <li></li>
                    <li>客户</li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 导航模块制作 -->
    <div class="nav">
        <div class="bg">
            <img src="images/banner.png" alt="">
        </div>
        <div class="tab">
            <ul>
                <li><a href="#">云服务器</a></li>
                <li> <a href="#">轻量应用服务器</a></li>
                <li><a href="#">域名注册</a></li>
                <li> <a href="#">网站备案</a></li>
                <li> <a href="#">对象存储</a></li>
                <li> <a href="#">云硬盘</a></li>
                <li> <a href="#">云数据库</a></li>
                <li> <a href="#">云数据库</a></li>
                <li><a href="#">批量计算</a></li>
                <li> <a href="#">容器服务</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容模块制作 -->
    <div class="content">
        <div class="w">
            <h3>云从业者培训及认证</h3>
            <h4>好好学习，天天向上</h4>
            <div class="box">
                <div class="fl">
                    <h2>在线课程</h2>
                    <p>本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，
                        购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频本课程专为
                        云计算初学者、学生、个人开发者打造，
                        购买云+校园任意套餐可免费观看课程视频本课程专为云计算初学者、学生、个人开发者打造，购买云+校园任意套餐可免费观看课程视频</p>
                    <button>开始学习</button>
                </div>
                <div class="fr">
                    <img src="images/right.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 底部模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="detail">
                <dl>
                    <dt>腾讯云计算</dt>
                    <dd>产品</dd>
                    <dd>云市场</dd>
                    <dd>客户案例</dd>
                    <dd>产品发布台</dd>
                    <dd>网站备案</dd>
                    <dd>认证信息</dd>
                    <dd>许可证说明</dd>
                    <dd>隐私声明</dd>
                    <dd>关于我们</dd>
                </dl>
                <dl>
                    <dt>解决方案</dt>
                    <dd>视频</dd>
                    <dd>游戏</dd>
                    <dd>金融</dd>
                    <dd>电商</dd>
                    <dd>网站</dd>
                    <dd>大数据</dd>
                    <dd>人脸核身</dd>
                    <dd>在线教育</dd>
                    <dd>微信小程序</dd>
                    <dd>微信小程序音视频</dd>
                </dl>
                <dl>
                    <dt>资源与社区</dt>
                    <dd>免费套餐</dd>
                    <dd>入门中心</dd>
                    <dd>定价中心</dd>
                    <dd>资源中心</dd>
                    <dd>腾讯云大学</dd>
                    <dd>云+社区</dd>
                    <dd>专栏</dd>
                    <dd>问答</dd>
                    <dd>沙龙</dd>
                </dl>
                <dl>
                    <dt>合作与生态</dt>
                    <dd>合作伙伴</dd>
                    <dd>合作伙伴学院</dd>
                    <dd>推广奖励</dd>
                    <dd>云+公益</dd>
                    <dd>云+校园</dd>
                    <dd>云+创业</dd>
                    <dd>Techo 开发者大会</dd>
                    <dd>腾讯数字生态大会</dd>
                    <dd>云启产业计划</dd>
                    <dd>腾讯云启创新基地</dd>
                </dl>
                <dl>
                    <dt>管理与支持</dt>
                    <dd>公告</dd>
                    <dd>控制台</dd>
                    <dd>续费管理</dd>
                    <dd>访问管理</dd>
                    <dd>安全中心</dd>
                    <dd>举报平台</dd>
                    <dd>工单管理</dd>
                    <dd>联系我们</dd>
                </dl>
            </div>
            <div class="copyright">
                <p>Copyright © 2013 - 2020
                    Tencent Cloud. All Rights Reserved.<br>
                    腾讯云 版权所有</p>
                <button>购买咨询</button>
            </div>
        </div>
    </div>
</body>

</html>

css

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

header {
    height: 40px;
    background-color: rgb(43, 48, 59);
    line-height: 40px;
}

.fl {
    float: left;
}

.logo a {
    display: block;
    position: absolute;
    top: 10px;
    left: 160px;
    height: 18px;
    width: 80px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -999px;
    overflow: hidden;
}

.fr {
    float: right;
}

.fr ul li {
    float: left;
    color: #fff;
    font-size: 12px;
}

.fr ul li:nth-child(even) {
    width: 0.5px;
    height: 12px;
    background-color: #fff;
    margin: 14px 7px;
}

.nav {
    position: relative;
    height: 480px;
    background-color: rgb(24, 28, 40);
}

.nav .bg {
    margin-left: 300px;
}

.nav .tab {
    position: absolute;
    top: 0;
    left: 160px;
    height: 480px;
    width: 247px;
    background-color: rgb(27, 42, 63);
}

.nav .tab ul {
    margin-top: 55px;
    margin-left: 20px;
}

.nav .tab ul li {
    padding-bottom: 25px;
}

.nav .tab ul li::after {
    content: '\e920';
    font-family: 'icomoon';
    color: #fff;
    float: right;
    margin-right: 20px;
}

.nav .tab ul li a {
    color: #fff;
    font-size: 14px;

}

.content h3 {
    text-align: center;
    margin-top: 40px;
    font-weight: 400;
}

.content h4 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 25px;
    font-weight: 400;

}

.content .box {
    height: 460px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 140px;
}

.box .fl {
    float: left;
    margin-top: 40px;
    margin-left: 50px;
    width: 440px;
}

.box .fl h2 {
    font-weight: 400;
    padding-bottom: 25px;
}

.box .fl p {
    line-height: 30px;
    font-size: 14px;
}

.box .fl button {
    margin-top: 29px;
    width: 161px;
    height: 45px;
    background-color: #fff;
    border: 2px solid rgb(255, 186, 59);
}

.box .fr {
    float: right;

    margin-top: 40px;
    margin-right: 50px;
}

.box .fr img {
    width: 580px;
    height: 345px;
}

.footer {
    height: 400px;
    background-color: rgb(46, 48, 51);

}

.detail {
    color: #fff;
    padding-top: 30px;
}

.detail dl {
    float: left;
}

.detail dl dt {
    font-size: 14px;
    margin-bottom: 15px;
    margin-right: 125px;
}

.detail dl dd {
    font-size: 12px;
    margin-bottom: 8px;
}

.copyright {
    float: right;
    width: 190px;
}

.copyright p {
    color: #fff;
    font-size: 12px;
    line-height: 20px;
}

.copyright button {
    width: 190px;
    height: 37px;
    background-color: rgb(0, 164, 255);
    color: #fff;
    margin-top: 25px;
}