前端学习第八弹：制作一个精美书签

最新推荐文章于 2023-02-27 17:12:37 发布

beyond_LH

最新推荐文章于 2023-02-27 17:12:37 发布

阅读量4k

点赞数 1

分类专栏：前端的快乐生活文章标签：前端书签边框效果局部布局 position

本文链接：https://blog.csdn.net/beyond9305/article/details/78444540

版权

前端的快乐生活专栏收录该内容

18 篇文章 1 订阅

订阅专栏

我不知道这个标题是不是有点名不副实，可以把它称之为书签吧，或者精美封面。。

本次主要练手的是边框效果，主要体现在上边框的分离与拼接，上代码吧：

<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、标题、内容、底部链接和上方的左右边框。大部分属性的解释都标注在了代码中，反正就是不断调试呗，最终好看就行~~~

beyond_LH

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习第八弹：制作一个精美书签

我不知道这个标题是不是有点名不副实，可以把它称之为书签吧，或者精美封面。。本次主要练手的是边框效果，主要体现在上边框的分离与拼接，上代码吧： body{font-family:"FangSong";background:#ddd;} p{ margin:20px auto 40px auto; width:50%;
复制链接

扫一扫