HTML的零星笔记
来源:互联网 发布:mysql create db 编辑:程序博客网 时间:2024/06/05 00:51
html的部分细碎笔记
写在前面 ——
写页面一定要先整体布局,有初步结构,再开始着手往里面写代码,一定要把代码写规范,正确合理的利用标签,这样做开发才有利于后期的成品在展示中被搜索引擎找到。搜索引擎抓取的是网页中的文字和图片,根据抓取的标签不同,来确定你的作品(网页)的权重值,所以语义性标签的合理使用很重要。比如a标签需要添加title的属性,img标签要添加阿alt和title的属性等
举个例子
图片四要素
1.图片路径需要使用绝对路径方式;
2.img元素加上alt属性,修饰性图片alt属性内容留空,内容性质
3.图片alt属性写相应内容;
4.必须加上width和height属性,值为它的原大小,但不要用来对它进行缩放。
/-以下的一些标签属性都是最开始接触代码的时候一点点记在备忘录,恰好又打开手机看到, 就发了上来-/
—— 【 很少也很基础的笔记 】
简单的页面初始化
*{margin:0;
padding:0;}
position:relative;父级相对定位 参考系
absolute;子级绝对定位
bottom:10px;底部距离
border-bottom:1px dashed #f03(虚线红色)底线
text-align:center;文本居中 水平居中
line-height:80px;父级一半 行高=高度
均分
display:flex;开启弹性盒模型布局
justify-content:space-around;
主轴横向排列均分
align-items:center;
辅轴排列 居中
小圆点
cursor:pointer;/小手指示/
li{list-style:none;}清除小圆点
margin:100px auto;上下100,左右居中
box-shadow:0px 0px 4px #f30;横向位移,纵向位移,阴影羽化程度,颜色
float:left;左浮动
opacity:0;透明度过渡
border-radius:10px;圆角
伪类,鼠标放上去的动作样式
a:hover{margin-left:6px;color:red;text-decoration:underline;} /下划线/
hover{font-weight:bold;加粗 border-left:2px solid #fff;左边线 }
样式合并:h3,p
display:block;变成块级显示
overflow:hidden;超出隐藏
transition:.5s;css3过渡
中心扩散
text-indent:-2000px;隐藏 a标签的文字 淘宝 一般用于图标logo
用h1~h3标签强调时,不加粗
font-weight:normal;(尽量写数字400)
块元素的特点
- 独占一行 在默认的情况下 其宽度自动填满父元素宽度
- 宽度和高度可以控制的 通过 display: inline 转化为块元素
- margin 和 padding 横向 纵向设置都有效
行元素的特点
- 并排显示 不能独占一行
- 宽高不可设置,只能由内容自己撑开
也可以通过 display: inline 转化为块元素 - margin 和 padding 横向设置有效
纵向设置不会产生边距效果 除ins和del外 其他都不能包括块元素
以上仅供参考学习
- HTML的零星笔记
- maven零星笔记
- android 零星调试笔记
- 零星的感觉
- 一点零星的想法
- C#的零星基础
- 零星技巧的收集
- html/css学习零星笔记(一)——如何使用样式
- html/css学习零星笔记(二)——使用usemap属性创建图片映射
- 10A 1032 零星笔记
- js——零星笔记
- 项目经验的零星总结
- 软件测试的零星思考
- C语言零星笔记--(const、typedef)
- android 零星调试笔记(二)
- java基础学习-零星笔记1
- java基础学习-零星笔记2
- java基础学习-零星笔记3
- 有关二叉排序树的代码实现
- PulltorefreshListview
- 给定正整数N和集合K,求不大于N的,且每一位数字都在K中的最大值M,比如N=297,K={2,5,8},则返回288
- Tomcat集群浅析
- 高数 01.07无穷小的比较
- HTML的零星笔记
- 查看1、2、3、4四个数字,能组成多少个互不相同 且无重复数字的三位数?都是多少?
- 飞机开关门状态自动识别
- Sift算子特征点提取、描述及匹配全流程解析
- ViewPager的基本使用(案例:图片的无限轮播)
- H5项目常见问题汇总及解决方案
- html+CSS让背景图片充满整个屏幕
- Tomcat8.5集群配置
- 基于springAop动态切换数据源实现读写分离