486 lines
14 KiB
HTML
486 lines
14 KiB
HTML
<!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>Document</title>
|
|
<style>
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "微软雅黑";
|
|
}
|
|
.tou{
|
|
width: 100%;
|
|
height: 177px;
|
|
|
|
}
|
|
/* 头1*/
|
|
.tou1{
|
|
margin-top: 10px;
|
|
width: 35.5%;
|
|
margin: auto;
|
|
color: gray;
|
|
font-size: 18px;
|
|
}
|
|
.tou1 div{
|
|
display: inline;
|
|
}
|
|
.tou1 div:nth-child(1){
|
|
color: #6ed13c;
|
|
}
|
|
.tou1 div:nth-child(2){
|
|
font-size: 12px;
|
|
padding: 1px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
border: 1px solid;
|
|
border-radius: 4px;
|
|
margin-left: 10px;
|
|
}
|
|
/* 搜索区域*/
|
|
.tou2{
|
|
width: 73%;
|
|
height: 45px;
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
}
|
|
.tou2 div{
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|
|
.img{
|
|
width: 16.5%;
|
|
background-image: url(https://st.douding.cn/images_cn/logo/logo_195_58.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tou2 div:nth-child(2){
|
|
width: 53%;
|
|
margin-left: 5%;
|
|
background-color: #e9e8e8cf;
|
|
border-radius: 7px;
|
|
height: 84%;
|
|
position: relative;
|
|
}
|
|
.img1{
|
|
width: 4%;
|
|
height: 5%;
|
|
margin: 0 auto;
|
|
background-image: url(https://st.douding.cn/images_cn/nav/ico_input_search.svg);
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 25%;
|
|
right: 2%;
|
|
}
|
|
.tou2 div:nth-child(3){
|
|
width: 10%;
|
|
position: absolute;
|
|
top: 34%;
|
|
margin-left: 15px;
|
|
font-size: 13px;
|
|
color: #5f5c5ccf;
|
|
}
|
|
.tou2 div:nth-child(4){
|
|
position: absolute;
|
|
right: 0%;
|
|
width: 12%;
|
|
}
|
|
.tou2 div:nth-child(4) ul{
|
|
margin-left: 25px;
|
|
list-style: none;
|
|
margin-top: 10%;
|
|
}
|
|
.tou2 div:nth-child(4) ul li{
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 45px;
|
|
}
|
|
/*导航*/
|
|
.tou3{
|
|
width: 100%;
|
|
height: 88.5px;
|
|
margin-top: 10px;
|
|
background-color: rgba(6, 83, 171, 0.914);
|
|
}
|
|
/*外边框*/
|
|
.tou3_q{
|
|
width: 75%;
|
|
height: 75%;
|
|
|
|
|
|
margin: auto;
|
|
margin-top: 12px;
|
|
margin-left: 12.5%;
|
|
display: inline-block;
|
|
color: #f3f0f0;
|
|
}
|
|
.tou3_q div{
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
}
|
|
.tou3_q1{
|
|
width: 23%;
|
|
border-right: 1px solid #f3f0f0;
|
|
}
|
|
.tou3_q1 ul{
|
|
margin-top: 5px;
|
|
}
|
|
.tou3_q1 ul li{
|
|
display: inline-block;
|
|
padding-left: 15px;
|
|
}
|
|
.qw{
|
|
width: 38%;
|
|
}
|
|
.tou3_q2{
|
|
width: 13%;
|
|
}
|
|
.tou3_q2 ul li{
|
|
display: inline-block;
|
|
}
|
|
.img2,.img3{
|
|
width: 40%;
|
|
text-align: center;
|
|
}
|
|
.img4{
|
|
font-size: 13px;
|
|
color: #e8f838;
|
|
}
|
|
.img4 li:nth-child(2){
|
|
padding-left: 18px;
|
|
}
|
|
.img4 li:nth-child(1){
|
|
padding-left: 6px;
|
|
}
|
|
/*内容*/
|
|
.ner{
|
|
width: 100%;
|
|
height: 550px;
|
|
}
|
|
.ner1{
|
|
width: 100%;
|
|
height: 180px;
|
|
background-color: #0e7bd5;
|
|
position: relative;
|
|
color: #f3f0f0;
|
|
}
|
|
.ner1 div p{
|
|
display: inline-block;
|
|
color: #e8f838;
|
|
}
|
|
.ner1 div h2{
|
|
display: inline-block;
|
|
font-size: 35px;
|
|
letter-spacing:5px;
|
|
}
|
|
.ner1 div .sc{
|
|
color: #f3f0f0;
|
|
font-size: 18px;
|
|
letter-spacing:4px;
|
|
}
|
|
.ner1 div:nth-child(2){
|
|
width: 47%;
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
}
|
|
.ner1 div:nth-child(3){
|
|
width: 27%;
|
|
margin: auto;
|
|
font-size: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
.ner1 div:nth-child(4){
|
|
width: 43%;
|
|
margin: auto;
|
|
font-size: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
.ner1 div:nth-child(1){
|
|
width: 3.4%;
|
|
margin-left: 80%;
|
|
font-size: 10px;
|
|
padding: 2px;
|
|
border: 1px solid #f3f0f0;
|
|
}
|
|
/*内容2*/
|
|
.ner2{
|
|
width: 75%;
|
|
height: 250px;
|
|
margin: auto;
|
|
margin-top: 15px;
|
|
position: relative;
|
|
}
|
|
/*左*/
|
|
.ner2_p{
|
|
width: 70%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
border-radius: 5px;
|
|
border: 1px solid #afb0aebe;
|
|
border-radius: 5px;
|
|
}
|
|
/*右*/
|
|
.ner2_p1{
|
|
width: 28.6%;
|
|
height: 100%;
|
|
margin-left: 10px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
border: 1px solid #afb0aebe;
|
|
border-radius: 5px;
|
|
}
|
|
.ner2_p-q{
|
|
width: 100%;
|
|
height: 18%;
|
|
background-color: #d4d6d3f6;
|
|
}
|
|
.ner2_p p{
|
|
display: inline-block;
|
|
}
|
|
.ner2_p p:nth-child(1){
|
|
font-size: 18px;
|
|
margin-left: 3px;
|
|
margin-left: 2%;
|
|
margin-top: 1%;
|
|
}
|
|
.ner2_p p:nth-child(2){
|
|
margin-left: 80%;
|
|
color: #1e76bf;
|
|
font-size: 10px;
|
|
}
|
|
.ner2_p-q1{
|
|
width: 100%;
|
|
height: 82%;
|
|
}
|
|
.ner2_p-q1 ul{
|
|
display: inline-block;
|
|
width: 23.5%;
|
|
margin-left: 1%;
|
|
list-style: none;
|
|
}
|
|
.ner2_p-q1 ul li{
|
|
font-size: 16px;
|
|
line-height: 205%;
|
|
color: #323235;
|
|
}
|
|
.ner2_p1-p{
|
|
width: 100%;
|
|
height: 18%;
|
|
}
|
|
.ner2_p1-p div{
|
|
width: 49.1%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 260%;
|
|
}
|
|
.ner2_p1-p div:nth-child(2){
|
|
background-color: rgb(188, 205, 220);
|
|
}
|
|
.ner2_p1-p1{
|
|
width: 100%;
|
|
height: 82%;
|
|
}
|
|
.ner2_p1-p1 input{
|
|
display: inline-block;
|
|
margin-top: 17px;
|
|
width: 82%;
|
|
height: 15%;
|
|
margin-left: 9%;
|
|
border-radius: 5px;
|
|
border: 1px solid rgb(100, 99, 99);
|
|
}
|
|
.ner2_p1-p1 button{
|
|
width: 35%;
|
|
height: 15%;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
color: #f3f0f0;
|
|
margin-top: 2%;
|
|
}
|
|
.but{
|
|
background-color: #0e7bd5;
|
|
margin-left: 10%;
|
|
}
|
|
.but1{
|
|
background-color: #1ded4e;
|
|
margin-left: 2%;
|
|
}
|
|
.ttt{
|
|
width: 100%;
|
|
height: 15%;
|
|
margin-top: 3%;
|
|
}
|
|
.ttt ul li{
|
|
display: inline-block;
|
|
width: 22%;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="tou">
|
|
<div class="tou1">常来豆丁浏览或分享文档吗？把豆丁<div>加入收藏夹</div>呗！<div>不在提示</div></div>
|
|
<div class="tou2">
|
|
<div class="img"></div>
|
|
<div><div class="img1"></div> </div>
|
|
<div>帮助</div>
|
|
<div>
|
|
<ul>
|
|
<li>登录</li>
|
|
<li>注册</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 导航-->
|
|
<div class="tou3">
|
|
<div class="tou3_q">
|
|
<div class="tou3_q1">
|
|
<ul>
|
|
<li>创业</li>
|
|
<li>案例</li>
|
|
<li>会议</li>
|
|
<li>企业工具</li>
|
|
</ul>
|
|
<ul>
|
|
<li>创业</li>
|
|
<li>案例</li>
|
|
<li>会议</li>
|
|
<li>企业工具</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tou3_q1">
|
|
<ul>
|
|
<li>建筑</li>
|
|
<li>资讯</li>
|
|
<li>资料</li>
|
|
<li>视频课堂</li>
|
|
</ul>
|
|
<ul>
|
|
<li>施组</li>
|
|
<li>方案</li>
|
|
<li>图纸</li>
|
|
<li>施工交底</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tou3_q1 qw">
|
|
<ul>
|
|
<li>考研</li>
|
|
<li>合同</li>
|
|
<li>报告</li>
|
|
<li>薪酬</li>
|
|
<li>素材</li>
|
|
<li>在家学习</li>
|
|
<li>vip会员</li>
|
|
</ul>
|
|
<ul>
|
|
<li>漫画</li>
|
|
<li>作文</li>
|
|
<li>总结</li>
|
|
<li>医疗</li>
|
|
<li>文档合伙人</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tou3_q2">
|
|
<ul>
|
|
<li class="img2">
|
|
<img src="https://st.douding.cn/images_cn/nav/ico_banner_upload.svg">
|
|
</li>
|
|
<span>|</span>
|
|
<li class="img3">
|
|
<img src="https://st.douding.cn/images_cn/nav/ico_banner_cloud.svg">
|
|
</li>
|
|
</ul>
|
|
<ul class="img4">
|
|
<li>我要上传</li>
|
|
<li>丁豆书房</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="ner">
|
|
<div class="ner1">
|
|
<div>不在展示</div>
|
|
<div><h2>欢迎来到豆丁网</h2><p class="sc">-----面向全球的C2C中文文档分享平台。</p></div>
|
|
<div>这里有超过八亿的<p>应用文档</p>和<p>书刊</p>，帮助你进行学习和实践；</div>
|
|
<div>快来体验”<p>豆丁书房</p>“，把你想的东西<p>同步到手机、ipad</p>上，随时随地，专注于你的个人成长！</div>
|
|
</div>
|
|
<div>
|
|
<div class="ner2">
|
|
<div class="ner2_p">
|
|
<div class="ner2_p-q">
|
|
<p>文档分类</p>
|
|
<p>更多></p>
|
|
</div>
|
|
<div class="ner2_p-q1">
|
|
<ul >
|
|
<li>+幼儿/小学教育</li>
|
|
<li>+外语学习</li>
|
|
<li>+经济/贸易/财会</li>
|
|
<li>+建筑/环境</li>
|
|
<li>+研究报告</li>
|
|
<li>+图书</li>
|
|
</ul>
|
|
<ul>
|
|
<li>+幼儿/小学教育</li>
|
|
<li>+外语学习</li>
|
|
<li>+经济/贸易/财会</li>
|
|
<li>+建筑/环境</li>
|
|
<li>+研究报告</li>
|
|
<li>+图书</li>
|
|
</ul>
|
|
<ul>
|
|
<li>+幼儿/小学教育</li>
|
|
<li>+外语学习</li>
|
|
<li>+经济/贸易/财会</li>
|
|
<li>+建筑/环境</li>
|
|
<li>+研究报告</li>
|
|
<li>+图书</li>
|
|
</ul>
|
|
<ul>
|
|
<li>+幼儿/小学教育</li>
|
|
<li>+外语学习</li>
|
|
<li>+经济/贸易/财会</li>
|
|
<li>+建筑/环境</li>
|
|
<li>+研究报告</li>
|
|
<li>+图书</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="ner2_p1">
|
|
<div class="ner2_p1-p">
|
|
<div>登录</div>
|
|
<div>注册</div>
|
|
</div>
|
|
<div class="ner2_p1-p1">
|
|
<input type="text" placeholder="用户名/邮箱/手机号" class="shur"><br>
|
|
|
|
<input type="password" placeholder="登录账号" class="shur1"><br>
|
|
<div style="width: 57%;display: inline-block;"></div>
|
|
<div style="display: inline-block">
|
|
<ul><li style="display: inline;">忘记密码</li>|<li style="display: inline;">注册</li></ul></div><br>
|
|
<button class="but">登录</button> <button class="but1"2>微信登录</button>
|
|
<div class="ttt">
|
|
<ul>
|
|
<li>qq</li>|
|
|
<li>微博</li>|
|
|
<li>支付宝</li>|
|
|
<li>更多>></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |