WEB课堂作业练习 1 （div布局，表格，锚点，列表）
2024-06-03 14:32:33
WEB课堂作业练习 1 （div布局，表格，锚点，列表）
div布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box"><div class="menu">这是menu部分</div><div class="header">这是header部分</div><div class="content">这是concent-left部分</div><div class="sidebar">这是concent-right部分</div><div class="footer">这是footer部分</div></div><style>*{margin:0px;padding:0px;}.box{width:1200px;margin:30px auto;}
.menu{height:25px;background-color :red;text-align:center;}
.header{height:120px;background-color:blue;}
.content{height:320px;background-color :yellow;float:left;width:50%;
}
.sidebar{height:320px;background-color :green;float:left;width:50%;
}
.footer{
clear:both;
background-color:pink;
width:1200px;
}</style>
</body>
</html>效果图
表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="2" cellspacing="10" width="20"><tr><td>商品</td><td>数量</td><td>单价</td><td>备注</td></tr><tr><td>短袖</td><td>70</td><td align="center" colspan="2" rowspan="2">无</td></tr><tr><td>裤子</td><td>50</td></tr></table> </body>
</html>
效果图
锚点链接
在这里插入代码片
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">body{background-image: url(bg.jpg);} </style>
</head>
<body>
<h2>目录</h2>
<ul><li><a href="#1">基本信息</a></li><li><a href="#2">作品原文</a></li><li><a href="#3">注释</a></li><li><a href="#4">作者简介</a></li>
</ul>
<h2><a id="1">基本信息</h2>
【作品名称】《江村即事》 <br>
【创作年代】中唐 <br>
【作者姓名】司空曙 <br>
【作品名称】七言绝句 <br>
<h2><a id="2">作者原文</h2>
<p style="font-size:24px;text-align: center;"><a href="http://www.baidu.com">江村即事</a></p>
<p style="font-size:12px;color: red;text-align: center;">（唐）司空曙 </p>
<hr style="width:30%;height: 3px;background-color: red;border:0px;">
<p style="text-align: center;">钓罢归来不系船，</p>
<p style="text-align: center;">江村月落正堪眠，</p>
<p style="text-align: center;">纵然一夜风吹去，</p>
<p style="text-align: center;">只在芦花浅水边。</p>
<h2><a id="3">注释</h2>
<ol><li>罢：完了。系：系好。</li><li>正堪眠：正是睡觉的好时候。</li><li>纵然：即使。</li><li>即事：以当前的事物为题材所做的诗。</li>
</ol>
<H2><a id="4">作者简介</H2>
<p style="text-indent: 2em">司空曙(约720-790年)，字 文明，或作文初。广平（今河北永年县东南）人，大历十 才子之一，唐代诗人。约唐代宗大历初前后在世。大历年进 士，磊落有奇才，与李约为至交。性耿介，不干权要。家无 担石，晏如也。尝因病中不给，遣其爱姬。韦辠节度剑南， 辟致幕府。授洛阳主簿。未几，迁长林县丞。累官左拾遗。 终水部郎中。曙诗有集二卷，登进士第，不详何年。曾官主 簿。大历五年任左拾遗，贬长林(今湖北荆门西北)丞。贞元 间，在剑南西川节度使韦皋幕任职，官检校水部郎中，终虞 部郎中。曙为卢纶表兄，亦是"大历十才子"之一。其诗多为 行旅赠别之作，长于抒情，多有名句。胡震亨曰："司空虞 部婉雅闲淡，语近性情。"(《唐音癸签》卷七)有《司空文 明诗集》。其诗朴素真挚，情感细腻，多写自然景色和乡情 旅思，长于五律。诗风闲雅疏淡。</p>
<a href="#"><img src="司空曙.jpg"></a>
</body>
</html>
效果图
列表
在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style type="text/css">body,ul,li,a{padding: 0;margin: 0;}body{margin-top: 50px;background-color:#e6e6e6;color: #fff; }.menu{font-size: 0;padding: 0;height: 50px;padding-left: 5%;background-color: #00a2ca;position: relative;}.menubar{margin: 0 auto;position: absolute;list-style-type: none;width:20%;overflow-y: auto;}.menubar li{padding:0px 5px;display:inline-block;cursor: pointer;line-height: 50px; }.menubar li:hover{background-color:#0095bb;}.menubar li.menu-value{background-color: #0095bb; }.menubar a{display: block;height: 50px;font-family: "微软雅黑","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"宋体" ;font-size: 15px;text-align: center;text-decoration: none;color: #fff;}</style><body>
<div class="menu"><ul class="menubar"><li class="menu-value" ><a href="">首页</a></li><li class="" ><a href="">HTML</a></li><li class="" ><a href="">css</a></li></ul>
</div><li><a href="https://www.sohu.com/a/226423855_355353"><img src="1.png" />怎样验证自己缺不缺觉？</a><br /></li><a href="http://www.baidu.com"><img src="1.png" />华语乐坛第一惨案</a><br /><a href="http://www.baidu.com"><img src="1.png" />get!创意五色千焗面</a><br /><a href="http://www.baidu.com"><img src="1.png" />富察皇后仿妆，眼神变柔和</a><br /><a href="http://www.baidu.com"><img src="1.png" />避免沉默的五个聊天小技巧</a><br><a href="http://www.baidu.com"><img src="1.png" />全世界最难的名字，笑哭</a><br /><a href="http://www.baidu.com"><img src="1.png" />为啥你会在同一时间醒来</a><br /></body>
</html>效果图
WEB课堂作业练习 1 （div布局，表格，锚点，列表）相关推荐
- html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
- 期末前端web大作业：用DIV+CSS技术设计的动漫网站——火影忍者6页 带报告
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
- 期末前端web大作业：用DIV+CSS技术设计的动漫网站
Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫网页设计成品模板 | 简单漫画网页 ...
- 期末前端web大作业：用DIV+CSS技术设计的动漫网站——关于我转生成史莱姆这件事 6页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
- 第四周web课堂作业
转载于:https://www.cnblogs.com/bgd150809222/p/6555030.html
- HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
- HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码...
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你 ...
最新文章
- CUDA学习-函数前缀__global__
- 从零开始打造自己的PHP框架――第2章
- dnet 并行编程学习总结
- 判断手机所属三大运营商 移动、联通、电信
- QT的QSplitterHandle类的使用
- C#中的代理(Delegate)
- java sql2005驱动_java.sql.SQLException：找不到适用于jdbc：microsoft：sqlserver的驱动程序...
- 微型计算机的硬件系统普遍采用,2016年9月计算机一级《MS Office》考题与答案
- Java LinkedHashMap 逆序遍历
- Shell 特殊字符大全
- |POJ 2342|动态规划|Anniversary party
- H3C PPP 基本配置
- 阿里云播放器，判断直播时的状态
- 不透明度十六进制_十六进制不透明度表
- 关于校外访问湖北经济学院校内图书馆资源的具体步骤
- Mac下使用Parallel Desktop进行虚拟机的网络配置
- （附源码）ssm小型超市管理系统的设计与实现 毕业设计 011136
- C#datagrid与datagridview的区别
- 如何用python制作动画的软件_用Python制作动画
- FC5 安装 Xine