网站正在建设中永久,天元建设集团有限公司六大板块,特种作业人员成绩查询,做网站的地方文章目录 前言一、pandas是什么#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.div 标签#xff1a; div是HTML中的一个常用标签#xff0c;用于定义HTML文档中的一个区块#xff08;或一个容器#xff09;。它可以包含其他HTML元素#xff0c;如文本、图像… 文章目录 前言一、pandas是什么二、使用步骤 1.引入库2.读入数据总结 一.div 标签 div是HTML中的一个常用标签用于定义HTML文档中的一个区块或一个容器。它可以包含其他HTML元素如文本、图像、表格、链接等。 语法
div这是一个div区块/div
#可以通过CSS样式为div标签设置宽度、高度、背景色、边框等样式属性从而美化和定位页面中的内容。
div stylewidth: 200px; height: 200px; background-color: red; border: 1px solid black;这是一个红色的div区块/div案例
bodydivh1京东商城的全部商品分类/h1h2图书 音响 电子书刊/h2pspan电子书刊/span电子书 网络原创 数字杂志br/span音响/span音乐 影视 教育视频br/span经管励志/span经济 管理 励志br//ph2家用电器/h2p span大家电/span平板 空调 冰箱br/span生活电器/span净化器 电风扇 饮水机br//p
/body 二.字体样式 font-family
此处演示第一种剩余几种参考上图。
语法
font-family: font1, font2, font3,...;
案例
headmeta charsetutf-8title/titlestyle !--匹配所有body内元素应用CSS样式--body{font-family:华文行楷;}/style
/head font-style
语法
font-style属性值
font-style中的属性值 normal使用默认的字体样式italic使用斜体字体样式。oblique使用倾斜字体样式。 font-weight
font-weight属性值 normal默认值表示正常粗细bold表示粗体bolder比normal更粗的粗体。ighter比normal更细的粗体 三.文本样式 语法
colorCSS样式;
text-alignCSS样式;
text-indent:20px;
line-height:25px;
text-decoration:CSS样式案例
style typetext/cssh1{color: red;font: oblique bold 20px 华为楷体;text-align: center;/**设置文本居中对齐*/}p{text-align: left;text-indent: 2em;/**设置文本首行缩进2字符**/text-decoration: underline;/**添加下划线**/line-height: 50px;/**设置行高**/}
/style text-align
text-align 属性值 left左对齐文本right右对齐文本center居中对齐文本justify两端对齐文本行末不留空。initial将text-align属性重置为默认值。inherit继承父元素的text-align属性值
text-ident
text-ident 属性值 像素值px正数表示向右缩进负数表示向左缩进。百分比%相对于包含块的宽度进行缩进正数表示向右缩进负数表示向左缩进。em相对于当前元素的字体大小进行缩进正数表示向右缩进负数表示向左缩进。rem相对于根元素的字体大小进行缩进正数表示向右缩进负数表示向左缩进。浮点数(-10px)相对于包含块的宽度进行缩进正数表示向右缩进负数表示向左缩进。inherit继承父元素的text-indent属性值。
text-decoration:
text-decoration: underline设置下划线none移除下划线 四.垂直对齐方式 在HTML中垂直对齐是指将元素的内容在垂直方向上对齐到指定的位置 语法
style typetext/css/**需要同时设置图片和文本居中**/img,span{vertical-align: middle;}/**文本需要图片作为参照物**/
/stylepimg srcindex1.png alt高管团队 width176px height108pxspan电子书刊/span电子书 网络原创 数字杂志br/ 五.文本阴影
语法
text-shadow:h-shadow v-shadow blur color;(属性值)
text-shadow: 属性值 h-shadow水平阴影的位置。可以使用负值表示向左移动阴影正值表示向右移动阴影。v-shadow垂直阴影的位置。可以使用负值表示向上移动阴影正值表示向下移动阴影。blur可选项表示模糊半径。可以为0表示无模糊效果。color可选项表示阴影的颜色。可以使用颜色的名称、RGB值或十六进制值。 案例 style typetext/cssh1{text-shadow: 15px 15px 1px rebeccapurple;}/style
bodya href#h3html/h3/a
/body 六.超链接伪类 HTML中的超文本伪类是用于为链接添加特殊效果或样式的伪类。 超链接伪类的常用样式 hover表示鼠标悬停在链接上时的状态示例a:hover { color: red; }active表示正在点击链接时的状态示例:a:active { color: green;} hover
语法
a:hover {#CSS样式 }
案例 style typetext/cssh3{font-size: 100px;color: aqua;text-decoration: none;}h3:hover{font-size: 200px;color: red;text-decoration: none;}/style
bodya href#h3html/h3/a
/body
鼠标不在超链接上的样式 鼠标在超链接上的样式 七.列表样式 语法
list-style属性值 案例
styleul{list-style-type: none;}
/style 八.网页背景样式 背景颜色 案例 style typetext/cssdiv{width: 200px;height: 200px;border: 1px solid red; /**solid:定义边框样式**/background-color: aqua;}/style
bodydiv/div/**定义一个HTML边框**/
/body 背景图像 案例 style typetext/cssdiv{width: 800px;height: 200px;border: 1px solid red;background-image: url(index1.png);/**背景图默认平铺展示**/}!--repeat:重复显示方式 position定位 --#d1{background-repeat:repeat-x;}/**在X轴平铺**/ !----#d2{background-repeat:repeat-y;}/**在y轴平铺**/#d3{background-repeat:no-repeat;}/**不平铺**/#d3{background-position: 90px 90px;}/**不平铺时控制图片在该区域中显示的位置**//style
bodydiv idd1/divdiv idd2/divdiv idd3/div
/body 九.CSS渐变 语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
案例 style typetext/cssdiv{width: 800px;height: 200px;border: 1px solid rebeccapurple;background: linear-gradient(to top ,blue,red);/**从下到上由蓝变红**/}/style
bodydiv idd1/div
/body 十练习 总结
