100字范文 > HTML+CSS实现百度网盘首页

HTML+CSS实现百度网盘首页

时间：2024-07-30 08:51:02

相关推荐

HTML+CSS实现百度网盘首页

HTML+CSS实现百度云盘首页

HTML

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><div class="header clearfix"><div class="header-left pull-left"><a href="">百度云盘</a><span>客户端下载</span></div><div class="header-right pull-right"><a href="" id="first-a">Mac同步版更新说明</a><span>|</span><a href="">百度首页</a><span>|</span><a href="">百度贴吧</a><span>|</span><a href="">版本更新</a></div></div><div class="download-menu"><ul class="tab-menu clearfix"><li><a href=""><span>windows</span></a></li><li><a href=""><span>android</span></a></li><li><a href=""><span>iphone</span></a></li><li><a href=""><span>ipad</span></a></li><li><a href=""><span>wp</span></a></li><li><a href=""><span>mac</span></a></li></ul></div><div class="download-info"><div class="download-info-content"><div class="download-info-text"><p>大小：11.5M 版本：Mac版 V2.2.0</p><p>适应系统：Mac OS X 10.10+</p><p>更新时间：-05-24</p><a href="">下载MAC版</a></div></div></div><div class="download-method"><div class="download-method-content clearfix"><div class="download-method-left pull-left"><p class="text-title">免费发送短信下载移动客户端</p><input class="phone" type="text" placeholder="请输入手机号"/><input class="check_code" type="text" placeholder="验证码"/><img class="img-code" src="img/genimage.jpeg" ><button class="btn" type="button">发送短信</button></div><div class="download-method-right pull-left clearfix"><div class="code-left pull-left"><p class="code-left-title">扫描二维码下载</p><p>使用手机上的二维码扫面描软件扫描，直接下载百度网盘。</p></div><div class="code-right pull-left"><img src="img/baidu_app_link.png" ></div></div></div></div><div class="footer"><a href=""> Baidu 移动开发平台</a><span>|</span><a href="">服务协议</a><span>|</span><a href="">权力声明</a><span>|</span><a href="">版本更新</a><span>|</span><a href="">帮助中心和版权协议</a><span>|</span></div></body></html>

css

/* 样式重置：html元素会有一些样式，可能会影响我们布局 */body,p,ul,ui,input{margin: 0;padding: 0;}li{list-style: none;}a{text-decoration: none;}/* 浮动 */.pull-left{float:left}.pull-right{float: right;}.clear-fix{*zoom: 1;}.clearfix::after{content: ".";display: block;height: 0;visibility: hidden;clear: both;}/* 头部内容 */.header{height: 60px;border-bottom: 1px solid #dcdcdc;/* 最小宽度，如果浏览器小于960px，就会出现滚动条防止页面缩小时错乱 */min-width: 960px;}.header-left{height: 60px;width: 300px;/* border: 1px solid red; */}.header-left a, .header-left span{/* 让a链接和span里面的文字消失，通过背景图片来显示 */text-indent: -9999px;/* inline-block变成一行 */display: inline-block;}.header-left a{width: 170px;height: 44px;/* 把所有的小图标放到一个图片上的目的：性能优化减少请求次数*/background: url(../img/download-all.gif) no-repeat;background-position: -644px 0px;margin-top: 10px;}.header-left span{height: 38px;width: 86px;background: url(../img/download-all.gif) no-repeat;background-position: -691px -47px;}.header-right{width: 350px;/* border: 1px solid blue; */margin-right: 14px;font-size: 12px;margin-top: 38px;color: #2974b6;font-size: 14px;}.header-right a{color: #2974b6;}#first-a{color: red;}/* down-load-menu部分 */.download-menu{width: 978px;/* 让盒子居中 */margin: 0 auto;}.download-menu span{text-indent: -9999px;display: block;}.tab-menu li{width: 161px;height: 93px;/* border: 1px solid red; */float: left;}.tab-menu li a{display: block;width: 161px;margin-top: 30px;height: 40px;background: url(../img/download-all.gif) no-repeat;}/* 能够选中tab-menu下诉讼有li中的第一个li */.tab-menu li:nth-of-type(1) a{background-position: 8px -129px;}.tab-menu li:nth-of-type(1) a:hover{background-position: 8px -185px;}.tab-menu li:nth-of-type(2) a{background-position: -160px -129px;}.tab-menu li:nth-of-type(2) a:hover{background-position: -160px -185px;}.tab-menu li:nth-of-type(3) a{background-position: -340px -129px;}.tab-menu li:nth-of-type(3) a:hover{background-position: -340px -185px;}.tab-menu li:nth-of-type(4) a{background-position: -492px -129px;}.tab-menu li:nth-of-type(4) a:hover{background-position: -492px -185px;}.tab-menu li:nth-of-type(5) a{background-position: -622px -129px;}.tab-menu li:nth-of-type(5) a:hover{background-position: -622px -185px;}.tab-menu li:nth-of-type(6) a{background-position: -790px -185px;}/* 对应平台的信息 */.download-info{height: 439px;width: 100%;background: url(../img/download_bg.png) repeat-x;}.download-info-content{width: 960px;height: 439px;background: url(../img/mac.jpg);margin: 0 auto;position: relative;}.download-info-text{width: 275px;height: 146px;position: absolute;top: 210px;left: 590px;}.download-info-text p{line-height: 28px;color: white;font-size: 16px;}.download-info-text a{display: block;height: 59px;width: 187px;text-indent: -9999px;margin-top: 10px;background:url(../img/download-all.gif) no-repeat -694px -294px ;}/* 下载方式部分 */.download-method{/* 设置下边框 */border-bottom: 1px solid gray;margin-bottom: 20px;}.download-method-content{width: 960px;height: 200px;margin: 0 auto;}.download-method-left input, .download-method-left img, .download-method-left button{vertical-align: middle;height: 32px;}.download-method-left .text-title{font-size: 20px;margin-top: 40px;}.download-method-right{/* width: 300px; */}.download-method-right p{font-size: 12px;}.download-method-left .phone{margin-top: 20px;width: 190px;}.download-method-left .check_code{margin-left: 9px;margin-top: 20px;}.download-method-left .img-code{padding-left: 5px;margin-top: 11px;}.download-method-left .btn{background-color: #5197ff;margin-top: 17px;width: 100px;border: none;font-size: 14px;color: white;font-weight: bold;}.download-method-right .code-left{width: 160px;margin-left: 56px;}.download-method-right .code-left-title{font-size: 20px;margin-top: 40px;margin-bottom: 20px;}.code-right img{margin-left: 40px;margin-top: 40px;}/* 底部版权 */.footer{text-align: center;margin-bottom: 20px;}.footer a{font-size: 12px;color: #666;padding-bottom: 5px;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。