我的博客网页设计
css文档
body {
width: 787px;
height: 550px;
border: 5px solid #CBCBCB;
margin: 100px auto;
}
.title {
height: 46px;
width: 787px;
font-size: 34px;
text-align: center;
color: #656467;
font-weight: bold;
margin-top: 13px;
}
.list {
height: 34px;
background-color: #0099FF;
border-bottom: 2px solid #788A95;
}
.list p{
height: 9px;
background-color: #0099FF;
}
.list li a {
color: #F5DFEA;
font-weight: bold;
text-decoration: none;
margin-left:34px;
font-size: 19px;
}
.list li{
list-style-type: none;
display: inline;
}
.section{
float: left;
height: 387px;
}
.bl{
height: 387px;
border-bottom: 2px solid #60BFFF;
}
.section header{
text-align: center;
height: 34px;
width: 543px;
font-size: 19px;
font-weight: bolder;
border-bottom: #60BFFF dashed 2px;
margin: 18px 11px;
color: #585858;
}
.section article{
width: 568px;
height: 174px;
border: solid 2px #69C3FF;
margin: 13px 13px 13px 19px;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.article1 main{
height: 59px;
margin-left: 13px;
color: #5a5a5a;
}
.section footer{
width: 543px;
height: 45px;
border-top: #60BFFF solid 2px ;
padding-top: 10px;
margin: 0px 11px;
color: #8C888D;
}
.aside{
margin-left: 605px;
width: 165px;
height: 350px;
background-color: #E4E4E4;
}
.aside h1{
font-size: 25px;
display: block;
color: #72757E;
margin: 23px 0px 20px 17px;
}
.aside .div1{
height: 12px;
background-color: white;
}
.aside .blue{
color: #58B5F2;
padding: 3px 15px;
font-size: 17px;
}
.aside .p1{
font-size: 17px;
line-height: 25px;
color: #ADA09A;
}
.aside .p1{
display: block;
padding: 3px 11px;
margin-left: 3px;
}
footer{
text-align: center;
color: #8C888D;
padding-top: 7px;
}
.list a:hover{
background-color: #cecaca;
color: rgb(172, 108, 108);
}
HTML文档
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS+DIV页面布局</title>
<link rel="stylesheet" href="../Lyout/reset.css">
<link rel="stylesheet" href="../CSS/CSS+DIV页面布局-1815-邢璐璐-2018006068.css">
</head>
<body>
<header class="title">xinglulu的博客</header>
<nav class="list">
<p></p>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">博文</a>
</li>
<li>
<a href="#">相册</a>
</li>
<li>
<a href="#">个人档案</a>
</li>
</nav>
<div class="bl">
<section class="section">
<article class="article1">
<header>JAVA</header>
<main>
Java是James Gosling发明并由Sun Microsystems开发的一种流行的计算机软件编程语言。它是1995年创建的通用高级编程语言。
</main>
<footer>编辑于2020.11</footer>
</article>
<article class="article1">
<header>JavaScript</header>
<main>
JavaScript是HTML和Web的轻量级编程语言,用于使网页具有交互性。作为一种多范式语言,它支持事件驱动,功能,命令和编程样式。
</main>
<footer>编辑于2020.11
</footer>
</article>
</section>
<aside class="aside">
<div class="div1"></div>
<h1>区别</h1>
<div class="blue">Java和JavaScript</div>
<p class="p1">都是不同的语言,除了语法相似外没有其他相似之处。在对Java和JavaScript进行以上比较之后,您将非常了解它们之间的区别和相似之处。</p>
</aside>
</div>
<footer>版权所有2020 @xinglulu的博客</footer>
</body>
</html>
效果图