我不知道这个标题是不是有点名不副实,可以把它称之为书签吧,或者精美封面。。
本次主要练手的是边框效果,主要体现在上边框的分离与拼接,上代码吧:
<html>
<head>
<meta charset=utf-8/>
<style type=text/css>
body{font-family:"FangSong";background:#ddd;}
p{
margin:20px auto 40px auto;
width:50%;
line-height:40px;//设置行高为40px,不允许使用负值
}
.sec{
position:relative;//相对定位,详解见上篇博客
width:700px;
max-width:80%;//最大宽度,保证宽度不超过设定值
border:2px solid #333;
border-top:none;
text-align:center;
margin:100px auto;//上下外边距为100px,左右自适应
}
.border-t{
position:absolute;//绝对定位,定义上边框
height:2px;//和其他边框保持一致
width:30%;
background:#333;
}
.left{left:0px;}//左上边框
.right{right:0px;}//右上边框
h1{
position:relative;
margin-top:-16px;//标题向上移动,达到边框中间
display:inline-block;
letter-spacing:4px;//设置文字之间的间距
}
.sec a{
display:inline-block;
width:300px;
letter-spacing:10px;
font-size:25px;
//也可以加个内边距,不过我觉得这样也很好看
background:#333;
color:#fff;
margin-bottom:30px;
text-decoration:none;//去掉下划线
}
.sec a:hover{
background:#7fffd4;//设置鼠标经过颜色
}
</style>
</head>
<body class="sec">
<div class="border-t left"></div>
<div class="border-t right"></div>
<h1>念奴娇·赤壁怀古</h1>
<p>
大江东去,浪淘尽,千古风流人物。
故垒西边,人道是,三国周郎赤壁。
乱石穿空,惊涛拍岸,卷起千堆雪。
江山如画,一时多少豪杰。
遥想公瑾当年,小乔初嫁了,雄姿英发。
羽扇纶巾,谈笑间,樯橹灰飞烟灭。
故国神游,多情应笑我,早生华发。
人生如梦,一尊还酹江月。
</p>
<a href="#">古韵飘香</a>
</body>
</html>
效果如下:
从代码中可以看出大致分为几块:使用类“sec”的大盒子div、标题、内容、底部链接和上方的左右边框。大部分属性的解释都标注在了代码中,反正就是不断调试呗,最终好看就行~~~