学习Python的一天

哈喽,大家好,今天又是学习Python的一天。上一章说到了多个页面的跳转,这一章就要看看怎么构造这几个页面。

第一个是,book.html页面,我们就只是显示书籍的图片和介绍。,我们先用个p包括所有书籍,每个图片和介绍用li结构,所以最后写的结构是这样的,

当然我们还要写css页面,但是现在我们先构造页面结构先。

第二个是,sort.html页面,我们就每个书籍种类暂定为10种,我们先用nav导航栏分类为10种,每一种分类用四级标题,而每一个四级标题下都要个p包括和来展示书籍信息,展示信息还是页面图片和介绍,最后就是这样的。

第三个是,history.html页面,我们先用个p来包括阅读过的信息,我们要展示的信息就是图片,书名,作者和阅读多少章节。最后就是这样。

而我们要第一个book.html页面好看,就开始编写css,看下列图片

body,li,p结构就不说了,都是前几章的知识点,我们让li有了宽度和高度,并且是向左浮动,而且每个li结构都有向右的外边距为20px。我们的图片,也是img是行内块元素,不是独占一行的,我们要让图片在li结构独占一行,就用到display:block;同时规范一下图片的大小,span结构都是文字,所以我们规范一下文字的大小,就用font-size:15px;因为文字介绍太长,我们就设置文字超过li的高度就隐藏并且用...表示,overflow:hidden;就是隐藏超出文本,text-overflow:ellipsis;就是超出文本用...表示。因为文字有是会有一半在显示,所以我们规范一下,显示六行文字,就是-webkit-line-clamp:6;因为这个元素要和display:-webkit-box;

-webkit-box-orient:vertical;和起来才有用,但是它不兼容ie和火狐。最后的效果是这样的。


展开阅读全文

更新时间:2024-09-04

标签:元素   文本   高度   大小   文字   结构   书籍   页面   图片   信息

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号

Top