黑马程序员技术交流社区
标题:
css常用元素
[打印本页]
作者:
c_古风
时间:
2019-10-12 23:43
标题:
css常用元素
- input控件
- 默认值是value
- name属性主要是给后台工作人员区分数据入库用的,单选按钮会利用anme分类
- 属性值有
- password 密码框
- radio 单选按钮 name里面的值可以随意定,单选按钮的inut的name值必须相同
- checkbox 复选按钮 可以设置相同的name名称 不会影响多选的效果
- checked="checked" 设置默认选中的按钮
- button 普通按钮 必须子级设置value值
- submit 提交
- reset 重置
- image src="" 配合使用 图片按钮
- file 文件域
- form 表单
- action url地址
- method 提交方式
- name 名字 设置不同取值名称用于后台提交
- css常用元素
- display:block: 显示
- display:none; 隐藏
- display:inline-block; 行内块
- background-color: 背景颜色
- background-img 背景图片
- background-repeat 背景平铺
- background-repeat-x x轴平铺 | y轴平铺
- background-pisition 图片定位
- background-attachment: fixed 固定定位
- background: 背景颜色 url 平铺方式 是否固定 x y 背景简写
- opacity 透明
- css三大特性
- 层叠行
- 继承性
- 优先级
- 盒子模型
- 内容: 实际的盒子的宽高
- 边框 border
- 内边距 padding
- 外边距 margin
- 边框border
- border: 边框宽度 边框样式 边框颜色
- 设置正圆
- border-radius: 50%;
- 文字阴影
- text-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/外阴影;
- text-shaow: 1px 1px 10px 1px rgba(0, 0, 0, .5);
- css网页布局三种机制
- 1.普通流
- 2.浮动
- 3.定位
- 清除浮动解决方案
- 父级盒子添加 overflow:hidden; 神奇的单词 溢出隐藏
- 伪元素清除浮动 after
- 双为元素清除浮动after before
- ps切图
- 多练
- 定位
- 子绝父相
- 子绝父绝
- 如果父级有定位子级的位置可以根据父级的位置进行定位
- z-index 更改元素的堆叠顺序 谁大谁在最上面
- 鼠标样式
- cursor
- pointer 小手
- move 移动
- text 文本
- 禁止 not-allowed;
- vertical-align 实现图片和文字垂直对齐
- vertical-align:middle; 让行内元素,行内块元素垂直剧中,中心基线对齐
- 常见行内元素a span
- 常见行内块元素 img input
- 小技巧: 如果直接给一个盒子里面的图片添加了vertical-align:middle; 图片不会垂直剧中显示,我们就给父级盒子添加行高既可以剧中;
- 溢出固定宽高范围的文字省略号显示
- 1.white-space:nowrap; 强制文本在一行显示
- 2.overflow:hidden; 将超出范围文本隐藏;
- 3.text-overflow: ellpsis; 将超出的文本用省略号显示
- 小技巧: 使用环境一定是盒子的宽高是固定的
- 精灵图技术
- 多练
- margin之美
- -1px 可以压住相邻边框 配合浮动形成细线条
- 字体图标
- 常用, 多练 可以替代精灵图
- favicon图标的引入
- link href='favicon.ico"
- 图标的制作可以去第三方网站
- 网站优化三大标签
- title
- meta keywords
- meta description
- logo的优化写法
- div>h1>a logo文字 + 背景图片
- 或者文字写在h1里面 隐藏文字 display:none
- 选项卡的布局思路
- 写完布局和样式,操作css属性进行隐藏显示 ,默认一个当前选项然后display:block display:none;
-
作者:
c_古风
时间:
2019-10-12 23:46
嘿嘿
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
