【本周任务】
1.复习html、css;
2.仿站(星巴克在中国)
【知识点】
一、html小标签
1.< br >换行
2.< hr >分隔
3.< sub >下标字
4.< sup >上标字
5.< ins >插入字
6.< del >删除字
7.< i >斜体字
8.< pre >预格式文本
9.< abbr >缩写
10. 表格、
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

- 列表:无序(ul)、有序(ol)和自定义(dl)
二、css
1.样式优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
2.链接样式:
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
三、仿站
1.JS点击事件
function show1() {
var down = document.getElementById('down');
var text1 = document.getElementById('text1');
var up = document.getElementById('up');
var down2 = document.getElementById('down2');
var down3 = document.getElementById('down3');
text1.style.overflow = 'hidden';
text1.style.height = 110 + 'px';
down.style.display="none";//JS中如何改变CSS
up.style.zIndex="100";
up.style.display="block";
down2.style.top=440+"px";
down3.style.top=610+"px";
}
前端技能精进:HTML、CSS与仿站实践
本文详细介绍了HTML与CSS的核心小标签及其应用,包括换行、分隔、上标等,同时深入探讨了CSS样式优先级与链接样式的设置。此外,还提供了仿站实例,通过星巴克在中国的网站仿制,展示了如何运用JS实现点击事件,是一篇全面覆盖前端基础知识与实践操作的高质量文章。
771

被折叠的 条评论
为什么被折叠?



