console
<!doctype html>
<html>
<head>
<title>个人博客</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<header>
<h1> <img id="header" src="http://www.zhideedu.com/UploadFiles/img_2_1048931_2238482073_26.jpg"width="100px" height="100px" />
<span class="blue"> 我的博客 </span>
</h1>
</header>
<nav>
<ul>
<li><a href="http://jsrun.net/WTvKp" class="selected">博客首页 </a></li>
<li><a href="https://go.hao123.com/">兴趣爱好 </a></li>
<li><a href="http://video.ty-ke.com/">课程项目 </a></li>
<li><a href="https://www.douban.com/">社区 </a></li>
<li><a href="https://mail.qq.com/">我的信箱 </a></li>
<li><a href="#">关于我 </a></li>
</ul>
</nav>
<div id="content">
<section>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593317284449&di=bebc4d1a16bb32f6281909ab22644b0c&imgtype=0&src=http%3A%2F%2Fwww.dmju.com%2Fwp-content%2Fuploads%2F2018%2F07%2Fjingyuchahuatupian-1.jpg" width="675px" height="400px">
</section>
<aside>
<ul>
<li><a href="https://mail.qq.com/" class="selected">给我留言 </a></li>
<li><a href="https://www.meishichina.com/">分享 </a></li>
<li><a href="https://y.qq.com/">音乐 </a></li>
<li><a href="https://www.bilibili.com/">视频 </a></li>
<li><a href="https://movie.douban.com/">电影影评 </a> </li>
<li><a href="http://game.nga.cn/all?platform=7">游戏评论 </a></li>
<li><a href="https://www.douban.com/gallery/">有趣见闻 </a></li>
<li><a href="#">更多 </a></li>
</ul>
</aside>
</div>
<div class="mod">
<h2>
热门话题
· · · · · ·
<span class="pl"> (
<a href="https://www.douban.com/gallery/">去话题广场</a>
) </span>
</h2>
<ul>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/150732/?from=gallery_trend" class="rec_topics_name">少年时代的烦恼</a>
<span class="rec_topics_subtitle">62.3万次浏览</span>
</li>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/150376/?from=gallery_trend" class="rec_topics_name">文学作品中的奇葩比喻</a>
<span class="rec_topics_subtitle">233.4万次浏览</span>
</li>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/78823/?from=hot_topic_anony_sns" class="rec_topics_name">乡野里的野食</a>
<span class="rec_topics_subtitle">6.3万次浏览</span>
</li>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/135454/?from=hot_topic_anony_sns" class="rec_topics_name">电影名里的诗意</a>
<span class="rec_topics_subtitle">55.6万次浏览</span>
</li>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/134813/?from=hot_topic_anony_sns" class="rec_topics_name">我的奇特观影习惯</a>
<span class="rec_topics_subtitle">36.7万次浏览</span>
</li>
<li class="rec_topics">
<a href="https://www.douban.com/gallery/topic/135380/?from=hot_topic_anony_sns" class="rec_topics_name">作家关于读书体验的描写</a>
<span class="rec_topics_subtitle">16.5万次浏览</span>
</li>
</ul>
</div>
<li>
<div id="dale_homepage_online_activity_promo_1"></div>
</li>
<li>
<div id="dale_anonymous_homepage_doublemint"></div>
</li>
</ul>
</div>
</div>
<div class="main">
<h2>
热点内容
· · · · · ·
<span class="pl"> (
<a href="https://www.douban.com/explore/" target="_self">更多</a>
) </span>
</h2>
<div class="albums">
<ul>
<li>
<div class="pic">
<a href="https://www.douban.com/note/769183659/"><img src="https://img3.doubanio.com/view/note/l/public/p73905422.webp"width="550px" height="300px" ></a>
</div>
<a href="https://www.douban.com/note/769183659/">用一场“书上的旅行”安慰被关在家里的你吧！</a>
<li>
<div class="pic">
<a href="https://www.douban.com/note/768769174/"><img src="https://img3.doubanio.com/view/note/l/public/p73806370.webp" width="550px" height="300px"></a>
</div>
<a href="https://www.douban.com/note/768769174/">只有24小时记忆的侦探 | 科幻小说</a>
<li>
<div class="pic">
<a href="https://www.douban.com/photos/album/1690398143/"><img src="https://img1.doubanio.com/view/photo/l/public/p2561870128.webp" width="550px" height="300px"></a>
</div>
<a href="https://www.douban.com/photos/album/1690398143/">孤独宇航员</a>
<li>
<div class="pic">
<a href="https://www.douban.com/note/768245171/"><img src="https://img1.doubanio.com/view/note/l/public/p73684148.webp" width="550px" height="300px"></a>
</div>
<a href="https://www.douban.com/note/768245171/">雨湖之美</a>
</ul>
</div>
<div class="mod">
<h2>
近期热门电影
· · · · · ·
<span class="pl"> (
<a href="https://movie.douban.com/chart" target="_self">更多</a>
) </span>
</h2>
<div class="list1 movie-charts">
<ol>
<li>
<a href="https://movie.douban.com/subject/34805219/">饥饿站台</a>
</li>
<li>
<a href="https://movie.douban.com/subject/2364086/">隐形人</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30211998/">绅士们</a>
</li>
<li>
<a href="https://movie.douban.com/subject/34670218/">大赢家</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30182726/">狩猎</a>
</li>
<li>
<a href="https://movie.douban.com/subject/27046758/">逃离比勒陀利亚</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30176393/">误杀</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30401849/">1/2的魔法</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30371819/">热带雨</a>
</li>
<li>
<a href="https://movie.douban.com/subject/30405087/">火口的两人</a>
</li>
</ol>
</div>
<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593362433052&di=88be332845acc5e91950ea0db11d0fe6&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161020%2F1383755f87cb4a259c2810fc7876b1ad_th.jpg"width="900px" height="200px">
</p>
<hr />
<p>关于我的博客</p>
<p>到此结束<p>
</body>
</html>
@charset "utf-8";
*{margin:0px;padding:0px}
/* h5*/
body{
margin: 0px;
padding: 0px;
background-color:#d7edf7;
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif;
text-align: center;
color: #333333;
}
header{
background: d7edf7;
width: 902px;
height: 203px;
padding-top: 0px;
margin: 0px auto;
color: #000000;
}
header h1 {
float:left;
font-size:2.9em;
padding-top:60px;
padding-left:37px;
font-family:Arial,verdana, sans-serif;
color:#37210c;
font-weight:bolder;
letter-spacing:-1px;
}
#header {
border-radius: 50%;
}
.blue{
color:#94d8ff;
}
nav{
list-style-type:none;
margin:0px auto;
width:902px;
background-color:#303;
clear:both;
}
nav ul{
list-style:none;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
width:902px;
}
nav ul li{
text-align:center;
float:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
width:150px;
}
nav ul li a{
display:block;
background-color:#bff5ff;
border-right:1px solid rgb(248, 248, 253);
line-height:2.5em;
margin-right:0px;
padding:8px 14px 8px 14px;
color: #0d0d0e;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
}
nav li a:hover{
color: #000;
background-color:#ecf9ff;
}
nav ul li .selected{
color: #0a0a0a;
background-color:#a4f1fc;
}
aside{
float:left;
list-style:none;
margin-left:10px;
height:50%;
}
aside ul{
list-style:none;
margin-bottom:20px;
margin-top:20px;
margin-left:0px;
}
aside li{
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
border-bottom:1px solid #c5e5f8;
}
aside ul li a{
background-image: url(Img/bullet.gif);
background-repeat:no-repeat;
background-position:left center;
display:block;
background-color:#ffffff;
line-height:1.7em;
margin-right:0px;
padding-top:6px;
padding-bottom:6px;
padding-left:22px;
color: #666666;
font-weight:normal;
font-size: 0.8em;
text-decoration: none;
width:165px;
}
aside li a:hover{
color: #37210c;
background-color:#c1f6fa;
}
aside .selected{
color: #37210c;
background-color:#7af9fd;
}
#content{
margin:0 auto;
width:902px;
background-color:#daf8fd;
height:430px;
clear:both;
}
section{
float:left;
width:75%;
margin-right:0px;
margin-top:15px;
background-color:#FFF;
text-align:left;
font-size:0.9em;
padding:5px;
}
section h1{
display:block;
font-size:0.9em;
width:50px;
font-family: arial;
text-align:left;
font-weight:bold;
color:#403f3b;
font-family:arial;
font-weight:bold;
padding:5px;
margin-top:5px;
margin-left:12px;
}
section p{
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #000000;
padding:10px;
text-align:left;
}
footer {
width:902px;
height: 85px;
clear:both;
margin-top: 10px;
background-color:#dfeef9;
color:#666666;;
margin-left:auto;
margin-right:auto;
margin-bottom: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
footer p{
font-size:0.7em;
font-family:arial;
font-weight:normal;
line-height: 1.4em;
color:#555555;
padding:25px 0 0 10px;
text-align:center;
}
footer a {
font-size:1em;
text-decration:none;
font-weight:normal;
color:#467AA7;
text-align:center;
}
footer a:hover{
text-decoration:underline;
font-weight:normal;
color:#467AA7;
text-align:center;
}