12.3周报
除去前面发的一些小的知识点，这周最重要的就是静态网页项目的练习啦，话不多说，直接上代码，代码上应该会有一些对应的注解，不过写多少就不好说了（毕竟懒是这样的）
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣（假）</title>
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<div class="xiaotou">
<a href="https://www.douban.com/">
<img src="./pictures/logo_db.png" alt="豆瓣logo" class="logo">
</a>
</div>
<div class="datou clearfix">
<div class="name"><img src="./pictures/sitename.png" alt="sitename"></div>
<div class="input"><input type="text" placeholder="书籍、电影、音乐、小组、小站、成员"><button type="submit"><i class="iconfont icon-shiliangzhinengduixiang"></i></button></div>
<div class="lie"><img src="./pictures/anony_nav_logo@2x.png" alt="一列" usemap="#a"></div>
<!-- 这里我用了图片，然后用map对应相关的链接，但是实际上豆瓣的网站不是这么写的，他用的是ul & li 再加上背景图，所以每一个模块是可以改动的，而用图片的话想要改动就只能去换图片了 -->
</div>
<!-- 这里的datou应当是居中的，所以可以直接设置dadou的宽度然后居中，我的做法是将里面的元素浮动起来然后逐一设置margin来调整位置，这样做网页的整体结构就会很凌乱，所以在写HTML的时候要多注意整体的结构 -->
<map name="a">
<area shape="rect" coords="0,0,30,20" href="https://book.douban.com/" alt="链接" target="_blank">
<area shape="rect" coords="50,0,80,20" href="https://movie.douban.com/" alt="链接" target="_blank">
<area shape="rect" coords="100,0,130,20" href="https://music.douban.com/" alt="链接" target="_blank">
<area shape="rect" coords="150,0,180,20" href="https://www.douban.com/group/explore" alt="链接" target="_blank">
<area shape="rect" coords="200,0,230,20" href="http://doubanfm.kuwo.cn/" alt="链接" target="_blank">
<area shape="rect" coords="250,0,280,20" href="https://www.douban.com/location/xian/" alt="链接" target="_blank">
<area shape="rect" coords="300,0,330,20" href="https://m.douban.com/time/?dt_time_source=douban-web_anonymous_index_top_nav" alt="链接" target="_blank">
<area shape="rect" coords="350,0,380,20" href="https://market.douban.com/?utm_campaign=anonymous_top_nav&utm_source=douban&utm_medium=pc_web" alt="链接" target="_blank">
</map>
</header>
<div class="hengfu">
<div class="ruanjian">
<div class="banbeng">
<p>豆瓣7.0</p>
</div>
<div class="xiazai">
<a href="https://www.douban.com/doubanapp/frodo?channel=nimingye&referer=https%3A%2F%2Fwww.douban.com%2F&wechat=0&os=Windows">下载豆瓣 App</a>
</div>
<div class="qrcode iconfont icon-erweima">
<div class="hover"><img src="./pictures/doubanapp_qrcode.png" alt=""><p>iOS / Android 扫码直接下载</p></div>
</div>
</div>
<div class="denglu">
<div class="tou iconfont icon-erweima clearfix">
<div class="zhuce">
短信登录／注册
</div>
<div class="mimadenglu">
密码登录
</div>
<div class="readme">
请仔细阅读 <a href="https://accounts.douban.com/passport/agreement?hide_accept=1" class="xieyi">豆瓣使用协议、豆瓣个人信息保护政策</a>
</div>
<div class="san"></div>
</div>
<div class="main">
<div class="shouji">
<input type="text" placeholder="手机号">
<div class="code">
<span>+86</span>
</div>
</div>
<div class="yan">
<input type="text" placeholder="验证码">
<a href="javascript:;" class="huoqu">获取验证码</a>
<a href="https://help.douban.com/account?app=1#t1-q5" class="shoubudao">收不到验证码</a>
</div>
<div class="button">
<button>登录豆瓣</button>
</div>
<div class="xian"></div>
</div>
<div class="tail">
<p>第三方登录：</p>
<a href="" class="wechat iconfont icon-weixin"></a>
<a href="" class="weibo iconfont icon-weibo"></a>
</div>
</div>
</div>
<div class="main">
<div class="dad"><div class="contianer clearfix">
<div class="content redian">
<div class="tou"><h2>热点内容 · · · · · ·</h2><a href="">（<span>更多</span>）</a></div>
<div class="imgs">
<img src="./pictures/p2396530441.webp" alt=""><a href="" class="a"><span>升居落论他一。</span></a>
<img src="./pictures/p2396530441.webp" alt=""><a href="" class="b"><span>升居落论他一。</span></a>
<img src="./pictures/p2396530441.webp" alt=""><a href="" class="c"><span>升居落论他一。</span></a>
<img src="./pictures/p2396530441.webp" alt=""><a href="" class="d"><span>升居落论他一。</span></a>
</div>
<div class="paragraph">
<a href=""><span>升居落论他一。</span></a>
<p class="gaiyao"><span>然绪如知。</span></p>
<p class="jianjie"><span>毒弟京耳那不着才，清不畴变尘时满，说游家光千皇人，作见张，脱希身，争终韩气木人的变百自感降韩人人，卡说一得临冇，责是法斯，皇撒故才人而派光被人，你秦这花找仇虑快天以个生回仆，大投的也啊不在用，通其将。</span></p>
<a href=""><span>真志穿章中无，帝尘。</span></a>
<a href=""><span>事么者何关承。</span></a>
<a href=""><span>与非对一关若，夫。</span</a>
<a href=""><span>言陀生，云了二。</span></a>
</div>
</div>
<div class="content huati">
<div class="tou"><h2>热门话题 · · · · · ·</h2><a href="">（<span>去话题广场</span>）</a></div>
<div class="paragraph">
<a href=""><span>身同行。</span></a><p class="gaiyao">的知着</p>
<a href=""><span>以样宋洪派。</span></a><p class="gaiyao">事有满法，报败。</p>
<a href=""><span>看对感绛。</span></a><p class="gaiyao">非解设。</p>
<a href=""><span>王责拆。</span></a><p class="gaiyao">又会一唯是。</p>
<a href=""><span>活人嗣，里。</span></a><p class="gaiyao">韩巴与圣专一韩上。</p>
<a href=""><span>又洪互。</span></a><p class="gaiyao">知手巴韩爱。</p>
</div>
</div>
</div></div>
<div class="dad"><div class="contianer clearfix time">
<div class="content">
<h1><a href=""><span>豆瓣时间</span></a></h1>
</div>
<div class="content">
<h2>热门专栏 · · · · · ·</h2><a href="">（<span>更多</span>）</a>
<div class="imgs">
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
<div class="img"><a href=""><img src="./pictures/p2396530441.webp" alt=""><span>盲的预是秦，惊斯领貂欲血中关低刑谋他看法范，落保赏的快能了不洪高日从反，宋病作在切，入定设游连秦非。</span></a></div>
</div>
</div>
</div></div>
<div class="dad"><div class="contianer clearfix movie">
<div class="content left">
<h1><a href=""><span>电影</span></a></h1>
<a href=""><span>影讯&购票</span></a><a href=""><span>天老恼</span></a><a href=""><span>要家生</span></a><a href=""><span>以娟评</span></a><a href=""><span>迷病</span></a><a href=""><span>程使事</span></a><a href=""><span>并极</span></a>
<img src="./pictures/new_menu.gif" alt="new">
</div>
<div class="content hot">
<h2>正在热映 · · · · · ·</h2><a href="">（<span>更多</span>）</a>
<div class="movies clearfix">
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>纯沫十，盲洋。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>派绪劫</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>陈招妙，曾仅。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>国韩着井力。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>报谢感这不之里。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>到弟</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>不尤骂衣。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
<div class="img"><img src="./pictures/p2899530660.webp" alt="蜡笔小新大电影"><h3><a href="" class="title"><span>定不丈。</span></a></h3><div class="score"></div><a href="">选座购票</a></div>
</div><a href=""><span></span></a>
</div>
<div class="content">
<h2>近期热门 · · · · · ·</h2><a href="">（<span>更多</span>）</a>
<div class="liebiao">
<ul>
<li>1.<a href=""><span> 先嗣道皇负备，主郭。</span></a></li>
<li>2.<a href=""><span> 联是俭。</span></a></li>
<li>3.<a href=""><span> 意说人他惜求。</span></a></li>
<li>4.<a href=""><span> 大老疾鼓。</span></a></li>
<li>5.<a href=""><span> 少太投主可韩。</span></a></li>
<li>6.<a href=""><span> 商的订。</span></a></li>
<li>7.<a href=""><span> 起此白尺力无。</span></a></li>
<li>8.<a href=""><span> 二切之，后评。</span></a></li>
<li>9.<a href=""><span> 互呼后。</span></a></li>
<li>10.<a href=""><span> 之日韦</span></a></li>
</ul>
</div>
</div>
</div></div>
</div>
<footer>
<div class="proofs">
<p>© 2005-2023 douban.com, all rights reserved 北京豆网科技有限公司</p>
<p><a href=""><span>恼得惜。</span></a><a href=""><span>的县一，身法有。</span></a><a href=""><span>有若自。</span></a><a href=""><span>韩后光出法，是尝胜。</span></a><a href=""><span>张此满</span></a></p>
<p><a href=""><span>县欲慧觉德求，了的。</span></a><a href=""><span>生承着，同有者。</span></a><a href=""><span>一即秦越可句，大斯的太。</span></a></p>
<p>违法和不良信息/涉未成年人/生活服务类专项有害信息投诉：</p>
<p>违法和不良信息投诉电话：4008353331-9</p>
<p>网络从业者不良行为举报：</p>
<p><img src="./pictures/jubao.png" alt=""><a href=""><span>弟讨毒疾，起人。</span></a><span>电话：12377</span><img src="./pictures/biaoshi.gif" alt=""><a href=""><span>下人郭人订准。</span></a></p>
<div class="relative">
<p><a href=""><span>关于豆瓣</span></a>·<a href=""><span>在豆瓣工作</span></a>·<a href=""><span>联系我们</span></a>·<a href=""><span>法律申明</span></a>·<a href=""><span>帮助中心</span></a>·<a href=""><span>移动应用</span></a>·<a href=""><span>豆瓣广告</span></a></p>
</div>
</div>
</footer>
</body>
</html>
@import "//at.alicdn.com/t/c/font_4353505_m7a0u6s7rys.css";
body{
min-width: 1600px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.xiaotou{
background: #EDF4EC;
font-family: Helvetica;
font-size: 12px;
height: 30px;
}
.xiaotou a .logo{
margin: 5px 15px ;
height: 20px;
}
.datou{
margin: 40px 0;
}
.datou .input input[type="text"]{
border: 1px solid #ccc;
height: 25px;
width: 260px;
border-radius: 4px;
}
.datou .name,.input,.lie{
float: left;
height: 25px;
}
.datou .name img,.lie img{
height: 25px;
}
.datou .lie img{
width: 400px;
height: 20px;
}
.datou .lie{
float: right;
margin-right: 300px;
}
.datou .name{
margin-left: 300px;
margin-right: 30px;
}
.datou .input{
position: relative;
}
.datou .input .iconfont{
position: absolute;
right: 15px;
top: 5px;
color: #ccc;
}
.datou .input ::placeholder{
color: #ccc;
}
.datou .input button{
cursor: pointer;
}
.hengfu{
background: url("../pictures/1771365ca98ig9er706.jpg") no-repeat 140px 10px/700px #edf4ed;
height: 300px;
position: relative;
}
.hengfu .ruanjian{
font-size: 25px;
color: #111;
position: absolute;
top: 100px;
left: 800px;
}
.hengfu .ruanjian .xiazai{
background: #00B51D;
font-size: 12px;
color: #fff;
margin: 30px 0;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
border-radius: 3px;
}
.hengfu .ruanjian .qrcode{
color: #48aa0d;
font-size: 30px;
position: absolute;
top: 55px;
right: -35px;
}
.hengfu .ruanjian .qrcode .hover{
display: none;
}
.hengfu .ruanjian .qrcode .hover img{
width: 150px;
height: 150px;
}
.hengfu .ruanjian .qrcode:hover .hover{
display: block;
width: 150px;
height: 150px;
font-size: 11px;
color: #000;
position: absolute;
right: -160px;
border: 20px solid #fff;
}
.hengfu .ruanjian .qrcode:hover.icon-erweima::before{
content: "";
}
.hengfu .denglu{
position: absolute;
top: 30px;
right: 220px;
width: 268px;
}
.hengfu .denglu .tou .zhuce,.mimadenglu{
float: left;
margin-right: 10px;
text-align: center;
border-bottom: 1px solid #000;
font-size: 12px;
margin-bottom: 10px;
width: 124px;
}
.hengfu .denglu .tou{
position: relative;
font-size: 12px;
}
.hengfu .denglu .tou.icon-erweima::before{
position: absolute;
right: 0;
color: #48aa0d;
font-size: 35px;
top: -30px;
}
.hengfu .denglu .tou .readme{
clear: both;
color: #ccc;
}
.hengfu .denglu .tou .readme a{
color: #41ac52;
}
.hengfu .denglu .tou .san{
border: 17px solid #edf4ed;
border-right: 17px solid transparent;
border-top: 17px solid transparent;
width: 0;
height: 0;
position: absolute;
top: -28px;
right: 0px;
}
.hengfu .denglu .main{
color: #41ac52;
font-size: 12px;
}
.hengfu .denglu .main input{
width: 100%;
height: 30px;
margin: 10px 0;
border-radius: 4px;
text-indent: 10px;
}
.hengfu .denglu .main .shouji{
position: relative;
}
.hengfu .denglu .main .shouji input{
text-indent: 40px;
}
.hengfu .denglu .main .shouji .code{
position: absolute;
top: 14px;
left: 0px;
font-size: 15px;
font-weight: bold;
color: #333;
border-right: 1px solid #ccc;
height: 24px;
line-height: 24px;
cursor: pointer;
}
.hengfu .denglu .main .button{
text-align: center;
margin-bottom: 30px;
}
.hengfu .denglu .main .button button{
background: #00B51D;
width: 100%;
height: 30px;
margin: 10px 0;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
.hengfu .denglu .main .yan{
position: relative;
}
.hengfu .denglu .main .yan .huoqu{
position: absolute;
color: #41ac52;
right: 0px;
top: 20px;
}
.hengfu .denglu .main .yan .shoubudao{
position: absolute;
right: 0px;
bottom: -70px;
}
.hengfu .denglu .main .xian{
height: 1px;
background: #ddd;
}
.hengfu .denglu .tail{
margin: 20px 0px;
color: #9b9b9b;
font-size: 11px;
height: 40px;
margin: 0px;
position: relative;
}
.hengfu .denglu .tail p{
display: inline-block;
line-height: 45px;
}
.hengfu .denglu .tail a{
font-size: 25px;
position: absolute;
}
.hengfu .denglu .tail .wechat{
top: 10px;
left: 70px;
color: #48aa0d;
}
.hengfu .denglu .tail .weibo{
top: 10px;
left: 110px;
color: red;
}
/* main区域的统一样式 */
.main .contianer{
width: 1000px;
margin: 50px auto;
}
.main .contianer .content{
float: left;
margin-left: 20px;
margin: 30px 0;
}
.main .contianer .content h1{
font-size: 24px;
margin: 20px;
margin-top: 0px;
margin-left: 0px;
}
.main .contianer .content h2{
font-size: 20px;
color: #072;
display: inline-block;
}
.main .contianer .content a{
font: 16px;
cursor: pointer;
}
.main .contianer .content a span{
color: #37a;
}
.main .contianer .content a span:hover{
background: #37a;
color: #fff;
}
.gaiyao{
font-size: 12px;
color: #aaa;
margin: 10px 0px;
}
.jianjie{
height: 50px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 统一样式结束 */
.main .contianer .content.redian .imgs{
width: 380px;
float: left;
position: relative;
}
.main .contianer .content.redian .imgs img{
width: 150px;
margin: 10px;
}
.main .contianer .content.redian .imgs a{
position: absolute;
font-size: 12px;
}
.main .contianer .content.redian .imgs a.a{
left: 10px;
top: 165px;
}
.main .contianer .content.redian .imgs a.b{
left: 180px;
top: 165px;
}
.main .contianer .content.redian .imgs a.c{
left: 10px;
bottom: 0px;
}
.main .contianer .content.redian .imgs a.d{
left: 180px;
bottom: 0px;
}
.main .contianer .content.redian .paragraph{
float: left;
width: 200px;
}
.main .contianer .content.redian .paragraph a{
display: block;
margin: 20px 0px;
}
.main .contianer .content.huati .paragraph a{
display: block;
margin: 20px 0px;
}
.main .contianer.time .content .imgs{
width: 800px;
}
.main .contianer.time .content .imgs .img{
float: left;
width: 100px;
margin-right: 60px;
}
.main .contianer.time .content .imgs img{
width: 100px;
height: 150px;
}
.main .contianer.time .content .imgs .img span{
color: #000;
font-size: 12px;
line-height: 20px;
}
.main .contianer.time .content .imgs .img span:hover{
color: #fff;
}
.main .contianer.movie .content{
position: relative;
}
.main .contianer.movie .content.left a{
display: block;
margin: 10px 20px;
}
.main .contianer.movie .content.hot a{
display: inline;
}
.main .contianer.movie .content h1 a{
margin: 0px;
}
.main .contianer.movie .content.left img{
position: absolute;
top: 75px;
left: 70px;
}
.main .contianer.movie .content.hot .movies{
width: 540px;
}
.main .contianer.movie .content.hot .movies .img{
float: left;
margin: 20px;
width: 100px;
}
.main .contianer.movie .content.hot .movies .img:nth-child(4n){
margin-right: 0px;
}
.main .contianer.movie .content.hot .movies .img img{
width: 100px;
height: 150px;
}
.main .contianer.movie .content.hot .movies .img h3{
font-size: 12px;
text-align: center;
}
.main .contianer.movie .content.hot .movies .img{
text-align: center;
}
.main .contianer.movie .content.hot .movies .img a{
font-size: 12px;
display: inline-block;
background: #1c8bd0;
color: #fff;
border-radius: 2px;
height: 20px;
width: 70px;
line-height: 20px;
}
.main .contianer.movie .content.hot .movies .img a.title{
background: none;
width: auto;
}
.main .contianer.movie .content.hot .movies .img a.title span{
color: #000;
}
.main .contianer.movie .content.hot{
margin-right: 30px;
}
.main .contianer.movie .content.left h1 a{
margin: 0px;
margin-left: 20px;
}
.main .contianer.movie .content .liebiao ul{
margin-top: 20px;
}
.main .contianer.movie .content .liebiao li{
margin: 10px 0px;
font-size: 12px;
height: 20px;
border-bottom: 1px solid #ccc;
}
.main .dad:nth-child(2n){
background: #eee;
}
footer .proofs{
border-top: 1px solid #ccc;
width: 1000px;
margin: 20px auto;
font-size: 12px;
color: #aaa;
}
footer .proofs p{
margin: 10px 0px;
}
footer .proofs p:first-child{
margin-top: 10px;
}
footer a span{
color: #37a;
}
footer a span:hover{
background: #37a;
color: #fff;
}
footer .proofs a{
border-right: 1px solid #ccc;
padding: 0 10px;
}
footer .proofs a:first-child{
padding-left: 0px;
}
footer .proofs a:last-child{
border: none;
}
footer .proofs p:nth-child(7) a{
border: none;
padding: 0;
}
footer .proofs p:nth-child(7) img{
width: 15px;
display: inline-block;
}
footer .relative{
font-size: 12px;
float: right;
}
footer .proofs .relative a{
border: none;
padding: 0;
margin: 0 10px;
}
对了，中间的一些重复性比较高的内容这里只写了三个，是没有时间啦（绝对不是懒），个人感觉最难的还是登录那一块，别看只有小小小不点那么大，但是要实现的功能不是一般的多，而且细节也很麻烦。
另外，如何构建网页的整体结构还是有不少的困难的，尤其是对于没有经验的小菜（没有说你哦），非常容易踩各种各样的坑，然后又要回去改改改，真的是对心态的暴击。
话又说回来，就是因为菜，所以就要多练嘛，快去练习吧（没说有说你菜的意思嘞）
9220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
