前端书籍推荐 知乎(【前端客栈】使用CSS实现畅销书排行榜页面)
📬📫hello ,各位小伙伴们 ,我是小浪 。大家都知道 ,我最近是在更新各大厂的软件测试开发的面试真题 ,也是得到了很大的反馈和好评 ,几位小伙伴也是成功找到了测开的实习 ,非常不错 。如果能前后端兼顾的话 ,我们就可以自己独立开发项目 ,成为真正意义上的"全栈开发工程师"!💡💡
🌇今天我们要学习的内容就是CSS的基础语法 ,学完之后便可以独立制作出一个简单的页面 。
🛍最终的效果图如下:
一 、CSS语法
1 、使用快捷键"!+tab"快速生成大致的框架;
2、文本颜色-color
我们直接在style标签中输入color,VSCode会自动帮我们补全并提示我们选择文本的颜色;
文本颜色这里我们可以自己选择设置颜色的格式:
十六进制 0~F;
rgb() 0~255;
rgba() 0~1 0 完全透明 1完全不透明;
<style> p{ color: #00ffcc; color: rgb(red, green, blue); color: rgba(red, green, blue, alpha); } </style>3 、水平对其方式text-align
text-align: center; text-align: right; text-align: left;4 、首行缩进text-indent
一般我们是首行缩进两个字符 ,也就是2em;
text-indent: 2em;5 、行高line-height
后面的数字我们自行选择尺寸;
line-height: 30px;6 、文本修饰text-decoration
文本修饰包括三个:
line-through 删除线;
underline 下划线;
overline 上划线;
7 、阴影效果text-shadow
下面的参数依次代表阴影的颜色 ,向X轴偏移量,向Y轴偏移量 ,偏移大小;
text-shadow: red 2px 2px 5px;效果:
8 、a标签样式
未访问样式: a:link
a:link{ color: green; font-size: 30px; }访问过的样式: a:visited
a:visited{ color: gold; text-decoration: none; }鼠标悬浮: a:hover
a:hover{ color: aqua; }活动状态: a:active
a:active{ color: brown; }9 、列表样式
list-style: decimal;none 去除修饰符 ,square 实心方块,disc 实习圆 ,circle 空心圆 ,decimal 数字;
10 、背景样式
<style> div{ width: 500px; height: 500px; /* 背景颜色 */ /* background-color: blue; */ /* 背景图片 */ /* background-image: url(../imgs/book.jpg); */ /* 背景平铺 默认平铺 no-repeat 不平铺 repeat-x x轴平铺 repeat-y y轴平铺 */ /* background-repeat: no-repeat; */ /* 大小 宽 高 */ /* background-size: 200px 200px; */ /* 背景图片位置 距上方的距离 距左边的距离 关键字 水平位置 left right center 垂直位置 top bottom */ /* background-position: center; */ /* 背景颜色渐变 to top to bottom to left to right to top left to top right to bottom left to bottom right */ background: linear-gradient(to top left,red,blue,green); } </style>二 、畅销书排行榜设计
1、制作要求
2 、实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 280px; height: 360px; background: linear-gradient(to top,#f9fbcb,#f8f8f3); } h1{ text-indent: 1em; line-height: 30px; font-size: 16px; color: white; background-image: url(./bang.gif); background-color:#518700; background-repeat: no-repeat; background-position: 100px center; } a{ color: #1a66b3; font-size: 12px; line-height: 28px; } a:link{ text-decoration: none; } a:hover{ text-decoration: underline; } </style> </head> <body> <div> <h1>畅销书排行</h1> <img src="./book_no01.gif" alt=""> <a href="#">不抱怨的世界</a><br> <img src="./book_no02.gif" alt=""> <a href="#">遇见未知的自己</a><br> <img src="./book_no03.gif" alt=""> <a href="#">活法(季羡林 、…)</a><br> <img src="./book_no04.gif" alt=""> <a href="#">高效能人士的七个习惯</a><br> <img src="./book_no05.gif" alt=""> <a href="#">被迫强大(北外女生香奈儿…)</a><br> <img src="./book_no06.gif" alt=""> <a href="#">遇见心想事成的自己(《遇…)</a><br> <img src="./book_no07.gif" alt=""> <a href="#">世界上最伟大的推销员(插…)</a><br> <img src="./book_no08.gif" alt=""> <a href="#">我的成功可以复制(唐骏亲…)</a><br> <img src="./book_no09.gif" alt=""> <a href="#">少有人走的路:心智成熟的…</a><br> <img src="./book_no10.gif" alt=""> <a href="#">活出全新的自己_唤醒…</a><br> </div> </body> </html>总结:具体效果的实现每个人写的代码大概率是不同的 ,所以大家应该有自己的想法 ,根据上面学过的CSS语法 ,根据需求可以自己独立完成!
3、最终效果
🛠4 、源码获取处
github:文本排行畅销榜素材 。
🌠如果感觉博主写的还不错的话可以点个star ,后续持续更新前端学习页面制作案例 ,感谢支持!
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!