静态页面布局
- 页面布局HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="sui-componentWrap">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="hd-header">
<a href="" class="header-logo"></a>
<form action="">
<input class="header-search" maxlength="60" size="12" placeholder="书籍、电影、音乐、小组、小站、成员" name="q" autocomplete="off" type="text">
<a href=""><p></p></a>
</form>
<ul>
<li><a href="" class="header-book"></a></li>
<li><a href="" class="header-movie"></a></li>
<li><a href="" class="header-music"></a></li>
<li><a href="" class="header-group"></a></li>
<li><a href="" class="header-local"></a></li>
<li><a href="" class="header-fm"></a></li>
<li><a href="" class="header-dong"></a></li>
<li><a href="" class="header-fair"></a></li>
</ul>
</div>
<div id="hd-reg-backgroud">
<div id="hd-reg">
<div>
<a href="" class="hd-join">加入我们<span>注册</span></a>
<p></p>
</div>
<div class="hd-app">
<p class="app-title">
豆瓣
<span>4.0</span>
</p>
<p class="app-slogan">
<span>我们的精神角落</span>
</p>
<a href="https://www.douban.com/doubanapp/app?channel=nimingye" class="lnk-app">下载豆瓣 App</a>
<div class="app-qr">
<a href="javascript: void 0;" class="lnk-qr" id="expand-qr"><img src="img/icon_qrcode_green.png" width="28" height="28"></a>
<div class="app-qr-expand">
<img src="https://img3.doubanio.com/f/sns/1cad523e614ec4ecb6bf91b054436bb79098a958/pics/sns/anony_home/doubanapp_qrcode.png" width="160" height="160">
<p>iOS / Android 扫码直接下载</p>
</div>
</div>
</div>
<div>
<form action="">
<input type="text" class="reg-username" value="邮箱/手机号" />
<input type="text" class="reg-password" value="密码" />
<div class="opt">
<a href="https://www.douban.com/accounts/resetpassword">帮助</a>
</div>
<a href="" class="reg-login">登录豆瓣</a>
<a href="" class="reg-zhuce">注册账号</a>
<p class="reg-p"><input type="checkbox" class="reg-rember" />记住我</p>
</form>
</div>
</div>
</div>
<div id="hd-guang1-backgroud"></div>
<div id="hd-con">
<div class="con-left">
<h2 class="title">热点内容 · · · · · · (<span><a href="more">更多</a></span>)</h2>
<ul>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" /></a>
<a href="">兔子好萌</a>
<span>129张照片</span>
</li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" /></a>
<a href="">兔子好萌</a>
<span>129张照片</span>
</li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" /></a>
<a href="">兔子好萌</a>
<span>129张照片</span>
</li>
<li>
<a href=""><img src="./img/p2453885372.jpg" alt="" /></a>
<a href="">兔子好萌</a>
<span>129张照片</span>
</li>
</ul>
</div>
<div class="con-mid">
<ul>
<li>
<a href="">仍然沉默和不再沉默的——王小波十五年忌日访王小波墓</a>
<h2>室内滂沱的日记 </h2>
<p>《仍然沉默和不再沉默的——王小波十五年忌日访王小波墓》 我只希望我们的灵魂可以...</p>
</li>
<li>
<a href="">鬼</a>
</li>
<li>
<a href="">无声狗</a>
</li>
<li>
<a href="">“我以为我们的感情经得起当面要钱” | 45个关于爱和钱的故事，最后谁赢了？</a>
</li>
<li>
<a href="">收了那么多官二代，全真派的事业还是失败了</a>
</li>
<li>
<a href="">いし橋——为何会把一顿寿喜烧吃成修行</a>
</li>
<li>
<a href="">信号#7：如果有一天我失忆，但愿能被照片唤醒</a>
</li>
<li>
<a href="">纪念王小波 | “我不要孤独，孤独是丑的，令人作呕的”</a>
</li>
<li>
<a href="">友邻来信 | 普利策戏剧奖是一个什么水平的奖？</a>
</li>
<li>
<a href="">情到深处自然萌</a>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>
<img src="./img/file-1431585796.jpg" width="268" height="112" alt="" />
</li>
</ul>
<h2 class="title">线上活动 · · · · · · (<span><a href="more">更多</a></span>)</h2>
<ul>
<li>
<a href="">来一句王家卫式的话</a>
<h2>时间：2月25日 - 5月24日</h2>
<h2>1360人参加</h2>
</li>
<li>
<a href="">给我你的照片，让我为你画张肖像。2017鸡年大吉有奖版吧</a>
<h2>时间：2月8日 - 5月7日</h2>
<h2>1463人参加</h2>
</li>
<li>
<a href="">分享至今你读过的最喜欢的书</a>
<h2>时间：2月13日 - 4月14日</h2>
<h2>1073人参加</h2>
</li>
</ul>
</div>
</div>
<div id="hd-movie-background">
<div id="hd-movie">
<div class="left">
<a href="" class="left-title">电影</a>
<ul class="left-up">
<li>
<a href="">影讯购票</a>
</li>
<li>
<a href="">选电影</a>
<img class="new" src="./img/new_menu.gif" height="7" width="17" alt="" />
</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>
<li>
<a href="">问答</a>
</li>
</ul>
<ul class="left-down">
<li>
<a href="" class="left-down-pic movie-pic"></a>
<a href="" class="left-down-des">豆瓣电影</a>
</li>
</ul>
</div>
<div class="mid">
<h2 class="title">正在热映 · · · · · · (<span><a href="more">更多</a></span>)</h2>
<ul class="hd-movie-list">
<li>
<a href=""><img src="./img/p2444256500.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name" ><a href="" class="abc">速度与激情8</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2455050536.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">大话西游之大圣...</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2362360950.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">指甲刀人魔</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2454150517.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">爱情冻住了</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2450440807.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">怨灵宿舍之人偶...</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2454730466.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">玩命试爱</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2453176400.jpg" height="150" width="100" alt="" /></a>
<p class="hd-movie-name"><a href="" class="abc">攻壳机动队</a></p>
<span class="hd-movie-point">7.1</span>
<a href="" class="movie-choose">选座购票</a>
</li>
<li>
<a href=""><img src="./img/p2448676053.jpg" height="
最低0.47元/天 解锁文章
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
