随笔分类 -  前端 / CSS

1 2 3 下一页
041.盒子模型及边框的应用
摘要： 阅读全文
posted @ 2021-12-12 01:26 李林林 阅读(42) 评论(0) 推荐(0)
040.背景图像应用及渐变
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-12-7</title> <style type="text/css"> /* background: 颜色 图片 图片位置（270px 10px） 平铺方式 */ di 阅读全文
posted @ 2021-12-07 01:07 李林林 阅读(58) 评论(0) 推荐(0)
039.列表样式的练习（模仿京东商城列表）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-12-6</title> <link rel="stylesheet" type="text/css" href="../css/列表的样式.css"/> </head> 阅读全文
posted @ 2021-12-07 00:12 李林林 阅读(51) 评论(0) 推荐(0)
038.文本阴影和超链接伪类
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-12-6</title> </head> <style type="text/css"> /*默认的颜色*/ a{ text-decoration: none; colo 阅读全文
posted @ 2021-12-06 01:39 李林林 阅读(28) 评论(0) 推荐(0)
037.文本样式
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-30字体样式</title> <style type="text/css"> /* 颜色：单词RGB：0~F RGBA：（A的范围是0~1） text-align: 阅读全文
posted @ 2021-12-01 00:23 李林林 阅读(50) 评论(0) 推荐(0)
036.CSS的作用及字体样式
摘要：1.span标签：重点突出的字使用span标签套起来 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-30</title> <style type="text/css"> #test{ font-size: 50 阅读全文
posted @ 2021-11-30 01:38 李林林 阅读(39) 评论(0) 推荐(0)
035.属性选择器（ = 是绝对等于 ， *= 是包含这个元素 ， ^= 以这个开头 ， $= 以这个结尾）
摘要：1.属性名，属性名=属性值（正则） = 是绝对等于 *= 是包含这个元素 ^= 以这个开头 $= 以这个结尾 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-23</title> <style type="tex 阅读全文
posted @ 2021-11-24 00:17 李林林 阅读(135) 评论(0) 推荐(0)
034.结构伪类选择器（伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child））
摘要：伪类：条件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-23</title> </head> <style type="text/css"> /*避免使用class和id选择器*/ /*ul的第一个子元素*/ 阅读全文
posted @ 2021-11-23 02:01 李林林 阅读(59) 评论(0) 推荐(0)
033.层次选择器
摘要：1.层次模型： 2.层次选择器 1、后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-21</title> </head> <style type="text/ 阅读全文
posted @ 2021-11-21 23:09 李林林 阅读(40) 评论(0) 推荐(0)
032.三种基本选择器 （优先级：id选择器 > class选择器 > 标签选择器）
摘要：1.标签选择器：选择一类标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-19</title> <style type="text/css"> /*标签选择器会选择到也面上的所有标签*/ h1 { color 阅读全文
posted @ 2021-11-20 00:11 李林林 阅读(734) 评论(0) 推荐(0)
031.四种css的导入方式
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用顺序： 行内最大，内部和外部遵循就近原则</title> <!-- 内部样式 --> <style type="text/css"> h1{ color: #000000; } 阅读全文
posted @ 2021-11-18 00:03 李林林 阅读(48) 评论(0) 推荐(0)
030.CSS的快速入门及优势
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <!-- 规范，<style>中可以写css代码 ，每一个声明最好使用封号结尾 语法：选择器｛ 声明1： 声明2： .... ｝ <style type 阅读全文
posted @ 2021-11-17 23:41 李林林 阅读(20) 评论(0) 推荐(0)
029.CSS的发展史
摘要： 阅读全文
posted @ 2021-11-14 22:48 李林林 阅读(17) 评论(0) 推荐(0)
028.CSS要学习什么？
摘要： 阅读全文
posted @ 2021-11-14 22:12 李林林 阅读(19) 评论(0) 推荐(0)
027.拼多多首页导航布局
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拼多多首页导航布局</title> <style type="text/css"> *{ /* 1.设置通配样式 */ padding: 0; margin: 0; } .box{ 阅读全文
posted @ 2021-11-10 21:16 李林林 阅读(452) 评论(0) 推荐(0)
026.央视官网顶部banner及导航布局
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2021-11-6</title> <style type="text/css"> *{ padding: 0; margin: 0; } .div1{ position: fix 阅读全文
posted @ 2021-11-06 00:47 李林林 阅读(53) 评论(0) 推荐(0)
025.拼多多右侧导航栏二维码图片
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <<<link rel="stylesheet" href="../img/pdd002.css"> </head> <body> <div class="div 阅读全文
posted @ 2021-08-30 21:29 李林林 阅读(131) 评论(0) 推荐(0)
024.登陆案列
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HttpServletLogin</title> <link rel="stylesheet" href="./login.css"> </head> <body> <!-- se 阅读全文
posted @ 2021-08-28 02:31 李林林 阅读(44) 评论(0) 推荐(0)
023>仿PDD官网
摘要：*{ margin: 0; padding: 0s; } .box{ position: fixed; top: 0; width: 100%; height: 103px; background-color: white; border-bottom: 4px solid red; } .div1 阅读全文
posted @ 2021-08-15 04:40 李林林 阅读(36) 评论(0) 推荐(0)
022实现淘宝下三角
摘要：代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>002实现淘宝下三角</title> <style type="text/css"> div { width: 0px; height: 0px; /* backgroun 阅读全文
posted @ 2021-08-15 02:51 李林林 阅读(35) 评论(0) 推荐(0)

1 2 3 下一页