07/20~07/26周报

前端技能精进：HTML、CSS与仿站实践

最新推荐文章于 2024-07-29 16:57:34 发布

原创最新推荐文章于 2024-07-29 16:57:34 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML与CSS的核心小标签及其应用，包括换行、分隔、上标等，同时深入探讨了CSS样式优先级与链接样式的设置。此外，还提供了仿站实例，通过星巴克在中国的网站仿制，展示了如何运用JS实现点击事件，是一篇全面覆盖前端基础知识与实践操作的高质量文章。

【本周任务】
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";
				
			}