ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>css样式 ###1 css样式属性 ### #1.1 样式重置(初始化样式) ~~~ *{margin:0;padding:0;} ~~~ ####1.2 常用属性 ~~~ color--文字的颜色 line-height--行高会文本在行高中垂直居中 background-color:设置背景颜色 text-align:设置文本的对齐方向 font-size:设置字体大小 h1{cursor: pointer;} 滑到位置有鼠标箭头变成小手 ~~~ ####1.3 元素水平居中 ~~~ margin-left: auto; margin-right: auto; ~~~ ###2 常用的css样式选择器 ~~~ p{} 元素选择器 慎重使用 .class{} 特点: 1.可以给多个标签相同的class名 2.可以给一个标签多个class名 #id{} 特点:每个id名都是唯一的 --写样式的时候不要用id选择器 element:hover 如:h1:hover{}伪类选择器 合并(h1:hover,h2:hover) (滑动效果是对h1整体的 如ul是对ul中所有的li,非单个li) ~~~ ###3 标签 ####3.1img 图片标签 ~~~ 特殊:单标签 src--标签的属性 功能:指定图片所在的位置 alt--当图片加载不出来,用来描述图片的 图片大小与容器大小一致,设置图片宽度 ~~~ ####3.2 术语标签 ~~~ <dl> -- 定义列表 <dt>HTML</dt> -- 定义的术语 <dd>负责网页的结构</dd> -- 定义的描述 </dl> ~~~ >盒子模型 ###1.margin 改变元素位置 ###2.border 改变元素的 高度,宽度 ###3.padding 填充 改变元素 宽度,高度, - width+padding=实宽 ~~~ margin:0; //四个方向都改变 margin:0 10px; //top,bottom为0px;left,right为10px margin:0 10px 20px; //top 0;left,right 10px;bottom 20px; ~~~ >问题 ####1.背景图片 ~~~ background-image: url(images/timg2.jpg) ~~~ ####2.边框设置 ~~~ border: 1px solid skyblue; ~~~ ####3 样式选择及框架布局 - 尽量少用p{} 慎用id 多用class