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

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

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

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

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

html手抄报怎么制作软件,如何用word制作一个精美的电子板报
使用word完全可以制作出一个精美的电子板报.何使用microsoft office word制作电子板报,喜欢的朋友可以过来学习一下工具:板报素材.板报文字.word软件[此处使用MS offic ...
保安日记：前端学习第八篇之HTML5
前端学习第八篇 HTML5新特性 HTML5的新增特性主要是增加了一些新的标签.新的表单以及表单属性等.这些新特性都有兼容性问题,基本上是IE9+以上版本的浏览器才支持新增语义化标签: < h ...
前端HTML基础小练习-制作一个相亲表单
前端HTML基础-制作一个相亲表单初学前端的一个小练习涉及知识:HTML,CSS 编译环境:Hbuilder 实现效果: 实现代码: <!DOCTYPE html> <html& ...
前端学习第三弹：利用div+css制作个人简历
尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率. ...
【超简单PR学习】用pr制作一个电子相册
打个招呼各位小伙伴们好久不见~! 我是大家的好盆友朵朵美少女,最近玩了PR,发现一个好看的东东!制作起来超级简单有手就会--电子相册,记录一下自己的制作过程,顺便把步骤分享到这边,有兴趣的小伙伴可以 ...
Python学习，用python制作一个专属有声小说，每天学习一个小技能
这一次的目标是使用百度云的人工智能接口,实现文字转语音的实时转换,将小说文字转换成语音朗读出来. 百度云接口调用百度的这个接口对于我们普通用户非常友好,他的很多功能都是免费的,而且我们每天可以免费调 ...
小程序：uni学习第八弹之使用iconfont
小程序:uni学习第弹之使用iconfont - 方法1 - iconfont -> Font class -> 下载至本地 - 将下载的压缩包中,以下文件复制到 static/ ...
自定义view学习-手把手教你制作一个可扩展日历控件
来看看效果图先,手把手教你实现一个简易,但高扩展度的日历控件,可自由扩展成签到,单选,多选日期. 首先我们来分析实现思路.对于上图的效果,很明显是一个6x7的表格. 我们可以两个for循环控制绘制每个 ...
手把手叫你制作一个精美的在线音乐播放器
最近项目中要增加一些特殊的功能,实现音乐的在线播放.虽说网上源码一大把,demo一大堆,但是能用的其实寥寥无几,看来关键时刻还是自己动手,丰衣足食啊.话不多说,直接看效果图吧: 看是不是很美观. 该功 ...

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

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

最新文章

热门文章