2021-03-22HTML

HTML文档主要由若干标签组成。

标签包括文档基本结构<head>标签、<body>标签,还包括网页基本组成标签,如标题<h>标签、段落<p>标签、列表<li>标签等等。

<title>标签中的内容是当前文件在浏览器打开时的选项卡的标题。

标签不可以嵌套使用

CSS即层叠样式表,HTML与CSS的关系就是“内容结构”与“表现形式”的关系。

HTML语言中的标记样式都是通过不同的CSS选择器控制的。CSS选择器主要有id选择器、类选择器和标记选择器。

标记选择器定义的样式会影响整个页面中所有该元素的显示;若想改变某个元素的默认样式时,可使用标记选择器。

类别选择器的名称可以由用户自定义,class可以把具有相同样式的元素统一为一类,class标识一类元素。

id选择器只能在HTML页面中使用一次,id唯一标识一个元素。

title的作用是给当前标签提示信息。

style给当前标签设置样式。

行内元素可与其他元素共享一行空间、不可以设置宽高,不可以嵌套其他块级元素。行内元素有span  a  i  b等。

块级元素独占一行空间,可设置宽高,可以嵌套其他标签。块级元素有div  h1~h5  ul  li等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML、CSS、JavaScript时间轴示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>Time Line Example</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul class="timeline"></ul> <script src="script.js"></script> </body> </html> ``` CSS代码: ```css body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .timeline { list-style-type: none; display: flex; flex-direction: column; padding: 0; } .timeline li { position: relative; width: 100%; padding: 20px; box-sizing: border-box; display: flex; align-items: center; } .timeline li:nth-child(odd) { background-color: #f2f2f2; } .timeline li:nth-child(even) { background-color: #e6e6e6; } .timeline li::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: #ccc; transform: translateX(-50%); } .timeline li:last-child::before { height: 0; } .timeline li h2 { margin: 0; font-size: 24px; font-weight: bold; } .timeline li p { margin: 0; font-size: 16px; } .timeline li .date { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #ccc; color: #fff; padding: 5px 10px; font-size: 14px; border-radius: 5px; } .timeline li .content { margin-left: 50px; } ``` JavaScript代码: ```javascript // 时间轴数据 var timelineData = [ { date: "2021-01-01", title: "Event 1", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tristique nibh. Sed volutpat urna eget tellus molestie, et eleifend nulla laoreet. Integer non metus sit amet felis bibendum consectetur. ", }, { date: "2021-03-15", title: "Event 2", content: "Curabitur sed tortor vitae sapien sodales feugiat at vel ex. Phasellus vel nisi id nulla volutpat bibendum. Donec interdum finibus tellus, vel pellentesque sapien consectetur et. ", }, { date: "2021-06-30", title: "Event 3", content: "Pellentesque rutrum lacus eget suscipit pretium. Nullam eleifend enim nec tellus pharetra, quis blandit neque aliquet. Aenean eu dui a libero dapibus ultricies. ", }, { date: "2021-09-22", title: "Event 4", content: "Integer sollicitudin velit quis nunc pulvinar, ut maximus orci bibendum. Proin congue tellus sed enim rhoncus, vel molestie nisl bibendum. Nullam hendrerit felis ut dui bibendum, eu ultricies dolor consequat. ", } ]; // 添加时间轴事件 var timeline = document.querySelector(".timeline"); for (var i = 0; i < timelineData.length; i++) { var eventData = timelineData[i]; var date = eventData.date; var title = eventData.title; var content = eventData.content; var li = document.createElement("li"); li.innerHTML = ` <div class="date">${date}</div> <div class="content"> <h2>${title}</h2> <p>${content}</p> </div> `; timeline.appendChild(li); } ``` 以上代码实现了一个简单的时间轴,包括了HTML、CSS和JavaScript代码。你可以将以上代码复制到对应的文件中,然后通过浏览器打开HTML文件来查看时间轴效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值