初学Html5+CSS之网页的增删（隔行变色）

最新推荐文章于 2022-07-14 13:14:04 发布
最新推荐文章于 2022-07-14 13:14:04 发布
阅读量500 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TwoDogsAri/article/details/78519389
版权

效果图如下





<!DOCTYPE html>

<html>


<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 600px;
border: solid 1px;
text-align: center;
display: none;
}
最低0.47元/天 解锁文章
风偏偏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
5.隔行变色&选项卡
qq_38390669的博客
12-17 200
1基于css实现隔行变色 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } .box{ width:300px; margin:20px auto; }
HTML系列：n种方式实现隔行变色
云端-公子清
12-09 2485
n种方式实现隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4219
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
【Web前端】【JavaScript】实现表格隔行变色
萌狼蓝天の技术栈
12-30 1543
方法1：原生JavaScript 设置CSS table td{ border:red solid 1px; } .tr1{ color:white; background: black; } .tr2{ color:black; background: white; } .tr2:hover{ ...
php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
weixin_39585035的博客
04-01 464
项目需求：实现在页面中输出99乘法表。(要求：以每三行为一组，实现隔行变色(颜色为白，红，黄(也可自己定义))，鼠标滑过每一行，行背景颜色变为蓝色，鼠标离开又恢复原来的颜色)，隔行变色的效果需要用if和switch两种判断方式都能实现；额，分析一下实例要求：一个99乘法表，一个多方法的隔行变色，鼠标滑过变另外一个颜色，离开恢复原色。 嗯，我们一步步来吧！99乘法表的实现，我相信很多人都知道怎么实现...
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页
06-14
初学Html 5 + CSS 3 +JS自主编写新年倒计时网页，可以根据自己的需求来更改里面的内容，适合初学者来借鉴；大神勿喷！！！还请大神们提出宝贵的意见，感谢！
静态网页设计期末课程设计HTML5+css3(初级)
03-09
资源名称:静态网页设计期末课程设计 使用/学习目标：完成期末课设 应用场景：HTM+css相互结合，完美搭建一个静态的网页 ...使用/学习说明：在学习的过程中要结合HTML框架和css，优化网页，使得网页更加美化
8套精美的html+css+js网站模板、网页设计源码
06-22
8套html+css+js网站模板和源码、页面美观，有个人博客、购物网站、动漫网站、音乐网站、个人网站，直接打开html就能看到效果，可以根据需求修改样式，适合初学者使用。
Web前端大作业-个人网页(html+css+javascript)
06-28
页面美观，样式丰富，有轮播相册，个人收藏，个人日志，天气查询，微电影页面。可以根据自己需求进行修改，适合初学者下载使用。
《HTML5+CSS3从入门到精通》源码1-13章
09-12
源自于清华大学出版社出版的《HTML5+CSS3从入门到精通》中的教学资源,非常适合初学者自学网页设计.由于上传文件大小有限制,只好分成多个文件分别上传.一共19章,这是前13章.
vscod 技巧，自动循环书写li
weixin_33910434的博客
06-13 304
ul>li*10{这是第$个li} <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li...
WebPack隔行换色案例
weixin_60020621的博客
02-21 453
在基础配置（具体可见基础打包）下，新建一个index.html。写入 <ul id="myUL"> <li>这是1</li> <li>这是2</li> <li>这是3</li> <li>这是4</li> <li>这是5</li> <li>这是6</li&...
h5表格隔行换色
biggrand的博客
11-09 3432
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0 auto; } </style> <script src="js/jquery-1.1
html表格隔行变色
zwld_2233的博客
09-02 1316
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //1.获取表格 var wor = document.getElementById("biao");.
java隔行变色怎么遍历_n种方式实现隔行变色
weixin_29111953的博客
02-27 346
n种方式实现隔行变色.box {margin: 20px auto;width: 300px;}.box li {line-height: 35px;border-bottom: 1px dashed #AAA;padding: 0 5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;}/...
【丛林】HTML Table 表格浅谈（边框、隔行变色
weixin_33881753的博客
07-25 196
此例子已经包含本文大部分内容，请对照参考。查看代码 》 定义和用法 table标签定义 HTML 表格。 创建表格的四要素：table、tr、th、td <table> 整个表格以<table>标记开始、</table>标记结束。 <tr> Table row。表格的一行，有几对 tr ...
隔行变色（html+JavaScript）
野狼的博客
08-12 2496
java js html5
初学者网页设计代码html+css演唱会
最新发布
05-17
下面是一个简单的演唱会网页设计，使用HTML和CSS： ```html <!DOCTYPE html> <html> <head> <title>演唱会</title> <style> body { background-color: #f2f2f2; } header { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 30px; } nav { background-color: #ccc; padding: 10px; text-align: center; font-size: 20px; } nav a { color: black; text-decoration: none; margin: 20px; } section { margin: 20px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 5px 5px 5px #888888; } h1 { font-size: 25px; } p { font-size: 20px; line-height: 1.5; } img { width: 100%; height: auto; } footer { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 15px; position: fixed; bottom: 0; left: 0; right: 0; } </style> </head> <body> <header> <h1>演唱会</h1> </header> <nav> <a href="#">主页</a> <a href="#">演出阵容</a> <a href="#">票务信息</a> <a href="#">场馆地图</a> <a href="#">联系我们</a> </nav> <section> <h1>演出阵容</h1> <p>本次演唱会邀请了众多知名歌手和乐队参加，包括：</p> <ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> <li>乐队A</li> <li>乐队B</li> </ul> <p>他们将带来精彩的表演，让你感受到音乐的魅力！</p> </section> <section> <h1>票务信息</h1> <p>本次演唱会的票务信息如下：</p> <table> <tr> <th>票种</th> <th>价格</th> <th>数量</th> </tr> <tr> <td>普通票</td> <td>100元</td> <td>1000张</td> </tr> <tr> <td>VIP票</td> <td>500元</td> <td>200张</td> </tr> </table> <p>你可以在以下地点购买门票：</p> <ul> <li>售票网站A</li> <li>售票网站B</li> <li>现场售票</li> </ul> </section> <section> <h1>场馆地图</h1> <img src="map.png" alt="场馆地图"> </section> <footer> <p>版权所有 © 2021 演唱会公司</p> </footer> </body> </html> ``` 说明： - 使用`<header>`标签表示页面顶部，包括标题和logo等信息； - 使用`<nav>`标签表示导航栏，包括各个页面链接； - 使用`<section>`标签表示内容区域，包括演出阵容、票务信息和场馆地图等； - 使用CSS样式对页面进行美化，包括背景颜色、字体大小、边框和阴影等； - 使用表格和列表展示票务信息和购票地点； - 使用`<img>`标签展示场馆地图，并设置图片的宽度自适应； - 使用`<footer>`标签表示页面底部，包括版权信息和公司地址等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值