直接开始上代码---图片内容可以根据自己带入
没有图片会架空框架。
以下内容仅是未完成的练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
直接开始上代码---图片内容可以根据自己带入
没有图片会架空框架。
以下内容仅是未完成的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BLOG</title>
<link rel="stylesheet" type="text/css" href="./css/theme.css" />
</head>
<body>
<div class="box">
<div class="box1">
<a href="#"><span class="sp">登录</span></a>
<a href="#"><span class="sp">注册</span></a>
<a href="#top"><span class="sp">首页</span></a>
</div>
<div class="picture">
<img id="pic1" src="./jpg/02.jpg" name="来自作者的朋友"/>
</div>
<div class="box2"><cite>作者：小竹<a href="#"><sub><small>1</small></sub></a></cite></div>
<div class="title1">个人博客BLOG</div>
<div class="box4">
<div class="title2">个人相册分类</div>
<p class="pic"><a href="dex1.html"><img src="./jpg/04.jpg"/></a></p>
<p class="pic"><a href="dex1.html"><img src="./jpg/05.jpg"/></a></p>
<p class="pic"><a href="dex1.html"><img src="./jpg/06.jpg"/></a></p>
</div>
<div class="box4">
<p class="pic"><a href="dex1.html"><img src="./jpg/07.jpg"/></a></p>
<p class="pic"><a href="dex1.html"><img src="./jpg/08.jpg"/></a></p>
<p class="pic"><a href="dex1.html"><img src="./jpg/09.jpg"/></a></p>
</div>
<div class="body">
<span id="imp">精选日志列表</span>
<a href="dex1.html"><p class="lis">！！！</p></a>
<a href="dex1.html"><p class="lis">！！！</p></a>
<a href="dex1.html"><p class="lis">！！！</p></a>
<a href="dex1.html"><p class="lis">！！！</p></a>
<a><p class="lis">......</p></a>
<a><p class="lis">......</p></a>
<a><p class="lis">......</p></a>
<a><p class="lis">......</p></a>
<a><p class="lis">......</p></a>
<a><p class="lis">......</p></a>
</div>
<div class="bottom">
<a href="#"><span class="s">回到顶端</span></a>
<a href="#"><span class="s">回到顶端</span></a>
<a href="#"><span class="s">回到顶端</span></a>
</div>
</div>
</body>
</html>
以下是css的代码
*{
margin:0;
border:0;
}
a:link{
color:#0D0E4E;
text-decoration:none;
}
a:visited{
color:#0D0E4E;
text-decoration:none;
}
a:hover{
color:#84592F;
text-decoration:none;
}
a:active{
color:#0f0;
text-decoration:none;
}
.box{
width:1519px;
background-color:#708090;
}
.box1{
background-color:#998E8C;
height:20px;
padding-left:70%;
font:14px/20px "微软黑体";
margin:0;
}
.box2{
background-color:#998E8C;
height:20px;
padding-left:80%;
font:14px/20px "微软黑体";
margin:0;
}
.sp{
width:20px;
height:20px;
padding-top:50px;
margin-left:70px;
}
.title1{
height:60px;
margin:0 600px;
font-color:#000000;
font:normal normal bold 40px/60px serif;
}.title2{
height:60px;
margin:0 40%;
font-color:#000000;
font:normal normal bold 30px/60px serif;
}
#pic1{
padding:0;
margin:0 139px;
}
h1{
margin:0 400px;
}
.pic{
height:300px;
width:200px;
margin-top:60px;
margin-left:200px;
background-color:red;
float:left;
}
.body{
clear:left;
height:1000px;
padding-top:60px;
}
.lis{
width:600px;
border-top:pink dotted 2px;
border-right:pink dotted 2px;
padding:6px;
margin-top:30px;
margin-left:30%;
font:20px/10px "微软黑体";
}
.bottom{
clear:left;
background-color:#998E8C;
height:40px;
padding-left:70%;
font:14px/40px "微软黑体";
margin:0;
}
.s{
margin-right:40px;
}
#imp{
height:50px;
margin-left:20%;
font:40px/20px "微软黑体";
}
