大一自学前端时做的，当时太水了，还有很多不足，后面也懒得改了。
部分展示：
一、代码：
<!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>腾讯</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="初始化.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部 -->
<div class="top">
<div class="logo"><img src="../image/7.png" alt=""></div>
<div class="big">
<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>
</ul>
</div>
<div class="small">
<a href="#">简</a> /
<a href="#">繁</a> /
<a href="#">EN</a>
</div>
</div>
<!-- 第二行 -->
<div class="sec">
<div class="big">
<h2>连接责任与信任</h2>
<p>聚合微小善行，以科技让世界更美好</p>
</div>
</div>
<!-- 版心 -->
<div class="banxin">
<!-- 第三行 -->
<div class="thi">
<div class="big">
<h2>全球战疫，一起行动</h2>
<p>在新冠肺炎疫情之战中，腾讯秉持科技向善，</p>
<p>以互联网科技的力量，通过我们的技术和产品为全球战疫提供支持。</p>
<img src="../image/2.png" alt="">
</div>
</div>
<!-- 第四行 -->
<h3 class="four">践行承诺</h3>
<!-- 第五行 -->
<div class="five">
<div><img src="../image/15.jpg" alt="">
<p>用户隐私与数据保护</p>
</div>
<div><img src="../image/16.jpg" alt="">
<p>守护者计划</p>
</div>
<div><img src="../image/17.jpg" alt="">
<p>未成年健康上网保护体系</p>
</div>
<div><img src="../image/18.jpg" alt="">
<p>知识产权</p>
</div>
</div>
</div>
<!-- 版心中止 -->
<!-- 大大大大大盒子 -->
<div class="biiiiig">
<!-- 大大大盒子 -->
<div class="biiig">
<!-- 第六行 -->
<h3>支持善举</h3>
<!-- 第七行 -->
<div class="big1"><img src="../image/9.jpg" alt="">
<h4>腾讯基金会</h4>
<p>腾讯公益慈善基金会（腾讯基金会）于2007年6月成立，推动互联网与公益慈善事业的深度融合与发展。我们每年向腾讯基金会捐出部分利润，以支持慈善工作。</p>
</div>
<div class="big1"><img src="../image/10.jpg" alt="">
<h4>网络捐款平台</h4>
<p>网络捐款平台是腾讯基金会推出的首个网上公开募捐平台，开放给合资格的慈善机构免费使用。个人用户可通过“乐捐”、“一起捐”等方式，选择自己信任的公益慈善项目，自主选择捐款，让人人可公益成为现实。</p>
</div>
<!-- 第八行 -->
<div class="big2">
<div class="small"><img src="../image/11.jpg" alt="">
<h4>99 公益日</h4>
<p>腾讯基金会慈善工作的重头戏是每年一度于9月举行的“99公益日”活动，透过网上平台将大众在活动期间网上作出的捐款进行匹配。</p>
</div>
<div class="small"><img src="../image/12.jpg" alt="">
<h4>腾讯长城保护项目</h4>
<p>腾讯长城保护项目起始于2016年9月，由腾讯公益慈善基金会与中国文物保护基金会共同合作，并成立长城保护公益专项基金。</p>
</div>
<div class="small"><img src="../image/13.jpg" alt="">
<h4>腾讯为村</h4>
<p>腾讯为村，是一个用互联网助力精准脱贫、振兴乡村的工作平台。</p>
</div>
</div>
</div>
</div>
<!-- 版心 -->
<div class="banxin">
<!-- 第九行 -->
<h3 class="nine">鼓励创新</h3>
<!-- 第十行 -->
<div class="ten">
<div><img src="../image/19.jpg" alt="">
<p>激励科学创新</p>
</div>
<div><img src="../image/20.jpg" alt="">
<p>青少年培养</p>
</div>
<div><img src="../image/21.jpg" alt="">
<p>阻力创业者</p>
</div>
<div><img src="../image/22.jpg" alt="">
<p>企业家成长</p>
</div>
</div>
<!-- 第十一行 -->
<div class="ele">
<div class="big">
<h2>数字领航 科技向善</h2>
<p>腾讯企业社会责任报告</p>
<a href="#"> 查看PDF<img src="../image/01.png" alt=""></a>
</div>
</div>
</div>
<!-- 版心终止 -->
<!-- 尾部 -->
<div class="late">
<img src="../image/8.jpg" class="erweima">
<!-- 第十二行 -->
<div class="l12">
<h3>关注我们</h3>
<a href="#" id="a1"><img src="../image/5.png" id="i1"></a>
<a href="#" id="a2"><img src="../image/6.png" id="i2"></a>
<a href="#" id="a3"><img src="../image/4.png" id="i3"></a>
<a href="#" id="a4"><img src="../image/3.png" id="i4"></a>
</div>
<!-- 第十三行 -->
<div class="l13">
<h3>加入我们
</h3>
<a href="#">社会招聘</a>
<a href="#">校园招聘</a>
<a href="#">国际招聘</a>
</div>
<div class="l13">
<h3>联系我们
</h3>
<a href="#">客户服务</a>
<a href="#">合作洽谈</a>
<a href="#">腾讯采购</a>
<a href="#">媒体及投资者</a>
</div>
<div class="l13">
<h3>法律信息
</h3>
<a href="#">服务协议</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
</div>
<div class="logo">
<img src="../image/7.png" alt="">
</div>
<div class="thelast">
<p>
<a href="#">法律声明</a>
<a href="#">阳光准则</a>
<a href="#">网站地图</a>
<a href="#">粤文网【2017】6138-1456号</a>
<a href="#">粤B2-20090059-1</a>
</p>
<p>
<a href="#"> Copyright @ 1998 - 2021 Tencent.All Rights Reserved. 腾讯公司 版权所有</a>
</p>
</div>
</div>
</body>
<script src="腾讯.js"></script>
</html>
/* 顶部 */
.top {
width: 1175px;
height: 72px;
display: block;
margin: auto;
text-align: center;
}
.top .logo {
float: left;
width: 168px;
height: 22px;
margin-top: 25px;
background-color: #fff;
}
.top .logo img {
width: 100%;
height: 100%;
cursor: pointer;
}
.top .big ul {
float: right;
width: 672px;
height: 72px;
margin-left: 100px;
}
.big ul li {
float: left;
height: 72px;
font-size: 16px;
font-weight: 700;
margin-left: 70px;
}
.big li a {
color: rgb(0, 0, 0);
line-height: 72px;
}
.big li a:hover {
padding-bottom: 2px;
border-bottom: 5px solid rgb(25, 74, 195);
}
.top .small {
float: right;
width: 93px;
height: 24px;
margin-top: 24px;
}
.top .small a {
color: rgb(107, 109, 109);
font-size: 16px;
}
/* 第二行 */
.sec {
width: 100%;
height: 482px;
background-image: url(../image/1.jpg);
background-size: 100% 482px;
background-repeat: no-repeat;
margin-bottom: 20px;
}
.sec .big {
margin-top: 220px;
margin-left: 40px;
}
.sec h2 {
width: 500px;
height: 66px;
font-size: 44px;
font-weight: 200;
color: rgb(255, 255, 255);
margin-bottom: 8px;
}
.sec p {
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
}
/* 版心 */
.banxin {
margin-left: 45px;
width: 1175px;
height: 1000px;
position: relative;
}
/* 第三行 */
.thi {
width: 100%;
height: 356px;
background-image: url(../image/23.png);
background-size: 100% 356px;
background-repeat: no-repeat;
margin-bottom: 20px;
cursor: pointer;
}
.thi .big {
width: 480px;
height: 156px;
margin-top: 100px;
margin-left: 60px;
}
.thi h2 {
font-size: 28px;
font-weight: 200;
margin-bottom: 8px;
cursor: pointer;
}
.thi p {
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
.thi img {
width: 40px;
height: 17px;
margin-top: 30px;
}
/* 第四行 */
.four {
width: 100%;
height: 45px;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-top: 100px;
}
/* 第五行 */
.five {
margin-top: 50px;
width: 1174px;
height: 626px;
}
.five div {
width: 587px;
height: 313px;
float: left;
position: relative;
}
.five img {
width: 587px;
height: 313px;
}
.five p {
font-size: 24px;
font-weight: 600;
color: rgb(255, 255, 255);
position: absolute;
top: 240px;
left: 30px;
}
/* 大大大大大盒子 */
.biiiiig {
width: 100%;
height: 1200px;
background-color: rgb(251, 251, 251);
margin-top: 100px;
padding: 80px 0;
}
/* 大大大大大盒子里的大大大盒子 */
.biiig {
margin-left: 45px;
width: 1175px;
position: relative;
}
.biiig h4 {
padding: 0 24px;
font-size: 20px;
margin-bottom: 12px;
margin-top: 20px;
}
.biiig p {
padding: 0 24px;
color: rgb(95, 100, 100);
letter-spacing: 0;
line-height: 25px;
margin-bottom: 16px;
}
/* 第六行 */
.biiig h3 {
width: 100%;
height: 45px;
font-weight: normal;
overflow: hidden;
text-align: center;
font-size: 30px;
margin-top: 100px;
}
/* 第七行 */
.biiig .big1 {
width: 575px;
float: left;
margin-top: 40px;
}
.biiig .big1:nth-child(3) {
float: right;
}
.big1 img {
width: 575px;
height: 387px;
}
/* 第八行 */
.biiig .big2 {
width: 100%;
margin-top: 44px;
}
.biiig .small {
width: 380px;
height: 100px;
float: left;
}
.biiig .small:nth-child(2) {
margin: 0 17px;
}
.small img {
width: 100%;
height: 288px;
}
/* 版心 */
/* 第九行 */
.nine {
width: 100%;
height: 45px;
text-align: center;
font-size: 30px;
font-weight: 600;
margin-top: 100px;
}
/* 第十行 */
.ten {
margin-top: 50px;
width: 1174px;
height: 626px;
}
.ten div {
width: 587px;
height: 313px;
float: left;
position: relative;
}
.ten img {
width: 587px;
height: 313px;
}
.ten p {
font-size: 24px;
font-weight: 600;
color: rgb(255, 255, 255);
position: absolute;
top: 240px;
left: 30px;
}
/* 第十一行 */
.ele {
width: 100%;
height: 356px;
background-image: url(../image/14.jpg);
background-size: 100% 356px;
background-repeat: no-repeat;
margin-top: 100px;
cursor: pointer;
}
.ele .big {
width: 480px;
height: 156px;
margin-top: 100px;
margin-left: 60px;
}
.ele h2 {
font-size: 30px;
font-weight: 600;
margin-bottom: 8px;
cursor: pointer;
}
.ele p {
font-size: 20px;
font-weight: 600;
cursor: pointer;
}
.ele a {
font-size: 20px;
color: rgb(0, 82, 217);
position: relative;
top: 40px;
}
.ele img {
width: 22px;
height: 22px;
position: relative;
left: 10px;
}
/* 版心终止 */
/* 尾部 */
.late {
width: 100%;
height: 480px;
background-color: rgb(251, 251, 251);
margin-top: 300px;
padding: 20px 0;
color: rgb(95, 100, 100);
position: relative;
}
.late h3 {
font-weight: normal;
float: left;
margin-left: 30px;
font-size: 20px;
padding-bottom: 20px;
}
.late .l12 {
width: 100%;
height: 55px;
padding-top: 33px;
margin-bottom: 40px;
}
.late .l12 a {
width: 28px;
height: 28px;
float: left;
margin-left: 30px;
}
.late .l12 img {
width: 28px;
height: 28px;
}
.erweima {
width: 194px;
height: 194px;
position: absolute;
top: -150px;
left: 140px;
display: none;
}
.late .l13 {
width: 135px;
left: 30px;
float: left;
padding-right: 100px;
}
.late .l13 a {
float: left;
margin-left: 30px;
padding-top: 20px;
color: rgb(95, 100, 100);
font-size: 16px;
}
.late .logo {
float: right;
width: 212px;
height: 30px;
position: relative;
right: 100px;
top: 100px;
}
.late .logo img {
width: 212px;
height: 30px;
}
.late .thelast {
width: 100%;
height: 58px;
margin-top: 50px;
}
.late .thelast p {
width: 100%;
height: 28px;
float: left;
margin-bottom: 10px;
}
.late .thelast a {
float: left;
margin-left: 30px;
padding-top: 20px;
color: rgb(95, 100, 100);
font-size: 16px;
}
/* 内外边距清零 */
* {
margin: 0;
padding: 0
}
/* 斜体取消 */
em,
i {
font-style: normal
}
/* 无圆点 */
li {
list-style: none
}
/* 无边框，底部不留白 */
img {
cursor: pointer;
border: 0;
vertical-align: middle;
}
/* 无下划线 */
a {
text-decoration: none
}
/* 行内块 */
div {
display: inline-block;
}
/* 鼠标小手 */
h2,
h4,
p {
cursor: pointer;
}
/* 抗锯齿性，字体，背景白色，大小，字体黑色 */
body {
-webkit-font-smoothing: antialiased;
background-color: rgb(255, 255, 255);
font: 14px/1.5 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
;
color: rgb(0, 0, 0);
}
图片
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
