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 style="width:200px;height:200px;border-radius:50%;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2515269870,2730305215&fm=26&gp=0.jpg"/>
<span class="gules"> 我的博客 </span>
</h1>
</header>
<nav>
<ul>
<li><a href="http://blog.sina.com.cn/" class="selected">博客首页 </a></li>
<li><a href="https://weibo.com/zhanjun?from=myfollow_all&is_all=1">我的关注 </a></li>
<li><a href="https://weibo.com/video/second?curr_tab=channel&type=icon&second_level_channel_id=4450189436715016&first_level_channel_id=4379157493161837&first_level_channel_name=%E4%BD%93%E8%82%B2&page_title=%E5%9B%BD%E9%99%85%E8%B6%B3%E7%90%83">我的兴趣 </a></li>
<li><a href="https://tiyu.baidu.com/player?id=ab9b33425df2fd8e8195c792ff2ca049&tab=%E5%8A%A8%E6%80%81">足球明星</a></li>
<li><a href="https://tieba.baidu.com/index.html">百度社区</a></li>
<li><a href="https://mail.qq.com/">给我留言 </a></li>
</ul>
</nav>
<div id="content">
<section>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593416940806&di=56e04e75c1587bec6011d8c6ebabf78b&imgtype=0&src=http%3A%2F%2Fimg3.redocn.com%2Ftupian%2F20150403%2Fzuqiushenglirenyingshouhui_4042868.jpg" width="680px" height="402px">
</section>
<aside>
<ul>
<li><a href="https://www.iqiyi.com/v_19rr7r6gls.html?vfm=2008_aldbd&fv=p_02_01">电影</a></li>
<li><a href="https://music.163.com/#/my/m/music/playlist?id=2712300647">音乐</a></li>
<li><a href="https://lol.qq.com/main.shtml">游戏</a></li>
<li><a href="https://haokan.baidu.com/v?vid=13561071878757117571&pd=bjh&fr=bjhauthor&type=video">视频</a></li>
<li><a href="https://news.sina.com.cn/">新闻</a> </li>
</ul>
</aside>
</div>
<p><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1713932497,3779222723&fm=26&gp=0.jpg"width="903px" height="150px">
</p>
<hr />
<p>@GG<p>
<p>邮箱：2234900352@qq.com</p>
</body>
</html>
@charset "utf-8";
*{margin:0px;padding:0px}
/* h5*/
body{
margin: 0px;
padding: 0px;
background-color:#d6fafc;
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: #beeaf8;
}
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;
}
.gules{
color:#2be7f5;
}
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:#46d1fc;
}
nav ul li .selected{
color: #0a0a0a;
background-color:#63dff5;
}
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:#beeaf8;
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:#13c1f7;
}
aside .selected{
color: #37210c;
background-color:#5e98f0;
}
#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;
}