前端入门实战练习之腾讯云页面实现

样例图

实现后的样子如图所示，ps：量的尺寸最开始肯定是没有的，都是写一步，测一步，最后就成这样啦

使用的工具是 PxCook，方便我们量取图片设计尺寸

实现效果

初步实现大致样式，明日进行细节优化，2022.4.3

图中标识位置尚未优化，下面是该部分实现源码

index.html

最新活动 | 产品 | 解决方案 | 定价 | 文档 | 企业中心 | 云市场 | 开发者支持 | 合作与生态 | 客户

style.css

* { margin: 0; padding: 0; } /* 导航 */ .nav { height: 40px; background-color: #2b303b; } .nav .container { padding-left: 240px; margin: 0 auto; width: 1680px; height: 40px; } .nav .container img { margin-top: 12px; } .nav .container a { text-decoration: none; /* 行高=上边距+文字高度+下边距 */ line-height: 40px; font-size: 16px; color: #ffffff; } .nav .container span { color: #ffffff; font-size: 16px; } /* 页面上部分 */ .top { width: 1680px; height: 480px; background-image: url(./images/banner.png); } /* 页面上部分 列表 */ .top .list { margin-left: 240px; width: 250px; height: 480px; background-color: #1b2a3f; font-size: 15px; color: #ffffff; } .top .list ul { padding-top: 54px; } .top .list li { list-style: none; padding-left: 20px; line-height: 40px; } .list a { color: #ffffff; text-decoration: none; } .arrows::after { content: '>'; /* padding-left: 138px; */ position: absolute; margin: 0 auto; } /* 页面中间部分内容 */ .middle { width: 1680px; height: 740px; background-color: #ffffff; } .middle h2 { text-align: center; padding-top: 45px; line-height: 23px; } .middle h4 { text-align: center; padding-top: 26px; line-height: 14px; } .middle .txt { margin: 31px auto 140px; border: 1px solid #cccccc; /* 圆角尺寸 */ border-radius: 15px; /* 自动内减 */ box-sizing: border-box; width: 1200px; height: 562px; } .box h1 { padding-left: 50px; padding-top: 46px; box-sizing: border-box; /* border-bottom: 2px solid #cccccc; */ /* 不再使用 border 控制,看做一个空 div 用伪元素控制 实现效果如下*/ } .box h1::after { content: ''; /* border 宽度 */ width: 128px; /* border 高度 */ height: 2px; background-color: #cccccc; /* border 位置 absolute(绝对定位) */ position: absolute; left: 295px; top: 745px; bottom: 918px; /* right: 0px; */ box-sizing: border-box; } .box p { line-height: 48px; padding-left: 50px; box-sizing: border-box; } .box img { float: right; margin-left: 76px; margin-right: 50px; } .txt .button { margin-left: 50px; margin-top: 30px; width: 164px; height: 49px; background-color: #ffffff; /* 自动内减 */ box-sizing: border-box; border: 2px solid #ffa50b; text-align: center; } .study a { /* a 标签 切换显示模式 */ display: block; line-height: 48px; text-decoration: none; color: #000000; } .footer { width: 1680px; height: 400px; background-color: #2e3033; box-sizing: border-box; } .footer-left { float: left; margin-left: 100px; margin-top: 34px; width: 1155px; height: 222px; /* background-color: peru; */ } .footer-right { float: right; margin-top: 34px; margin-right: 135px; width: 200px; height: 192px; /* background-color: pink; */ } .footer-right a { line-height: 27px; } .footer-left ul { list-style: none; } .footer-left li { float: left; margin-right: 126px; width: 130px; height: 230px; /* background-color: white; */ } /* 第五个列表右侧 margin 值为 0 */ .footer-left li:nth-child(5) { margin-right: 0; } .footer-left b { color: #eeeeee; line-height: 44px; } .footer-left ul li a { text-decoration: none; color: #cccccc; line-height: 29px; } .footer-right .buy { margin-top: 24px; width: 191px; height: 36px; background-color: #00a4ff; line-height: 35px; text-align: center; } .footer-right a { text-decoration: none; color: #cccccc; }

后期重点解释下过程中出现的问题及解决方案，源码相应位置均有注释。初次上手，恳请各位大佬斧正

注：以上练习题目来自黑马程序员，仅供学习交流使用，侵删致歉

参考资料：

WEB 前端视频课程

CSS HTML 小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。