爱站程序员基地前端零碎记录1- HTML+CSS -（符号表示方法，img标签，导航，布局溢出，多行文本水平居中）
- 符号表示方法
- img(插入图片标签)
- 导航菜单
- 布局溢出问题
- 多行文本水平居中
符号表示方法
| 语句 | 解释 |
|---|---|
| nbsp | 空格 |
| br | 换行 |
| lt; | 表示小于号 < |
| gt | 大于号 > |
| amp | 和号 & |
| yen | 价格 或 人民币 ¥ |
| copy | 版权 © |
| ® | 注册商标 ® |
| deg | 摄氏度 ° |
| plusmn | 正负号 ± |
| times | 乘号 × |
| divide | 除号 ÷ |
| sup2 | 平方(上标形式) ² |
| sup3 | 立方(上标形式) ³ |
语句写法为
<br><>&¥©®°±×÷²³
img(插入图片标签)
| 属性值 | 说明 |
|---|---|
| src | 图像的url(路径) |
| alt | url无法显示替换的文本 |
| tiltle | 鼠标悬停显示内容 |
| width | XHTML不支持百分比 图像宽度 |
| height | XHTML不支持百分比 图像高度 |
| border | 图像边框 |
<img src=\"黄昏.jpg\" alt=\"2020.6.13黄昏照片\" title=\"2020.6.13黄昏照片\" width=\"1920\" height=\"1080\" border=\"5\">
导航菜单
实际重要的导航栏中 不会直接使用
<a></a>
标签 而是用
<li></li>
包含
<a></a>
的做法
<li><a></a></li>
语义更清晰 是有条理的列表内容
直接使用
<a></a>
搜索引擎容易辨别为 有对砌关键字的嫌疑 故意对砌关键字容易被搜索引擎降权 从而影响排名
例如下图效果:
<div class=\"subnav\"><ul><li><a href=\"#\">前端开发<span> > </span></a></li><li><a href=\"#\">后端开发<span> > </span></a></li><li><a href=\"#\">移动开发<span> > </span></a></li><li><a href=\"#\">人工智能<span> > </span></a></li><li><a href=\"#\">商业预测<span> > </span></a></li><li><a href=\"#\">云计算&大数据<span> > </span></a></li><li><a href=\"#\">运维&测试<span> > </span></a></li><li><a href=\"#\">UI设计<span> > </span></a></li><li><a href=\"#\">产品<span> > </span></a></li></ul></div>
.subnav{float: left;padding: 7px 20px 0;width: 150px;height: 413px;background-color: rgba(19, 1, 75, 0.5);}.subnav ul li{height: 45px;line-height: 45px;}.subnav ul li a{color: #FFF;text-decoration: none;font-size: 14px;}.subnav ul li a:hover{color: #00b4ff;}.subnav ul li span{float: right;}
可通过
li{list-style:none;}
去掉列表默认样式(那个 点 或者1 2 3前标)
布局溢出问题
css中允许溢出的情况出现 子盒子比父盒子大
多行文本水平居中
两行文字无法通过
line-height=\"高度\"
垂直居中
解决方案
可以手动控制位置 设定内边距或外边距来移动具体的位置
