HTML5第五章作业
5.1.3
html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>吃货节</title>
6 <link type="text/css" rel="stylesheet" href="css/5.1.3.css" />
7 </head>
8 <body>
9 <table class="goods">
10 <tr>
11 <td colspan="4"><h2>麻辣小龙虾</h2></td>
12 </tr>
13 <tr>
14 <td>
15 <div id="tupian"><img src="img/shrimp_1.jpg" /></div>
16 <a href="#" id="jieshao">洪湖食客 小龙虾生鲜熟食 麻辣4-6钱</a></div><br />
17 <span id="danjia">¥108</span>
18 <span id="gdanjia">¥128</span>
19 </td>
20 <td>
21 <div id="tupian"><img src="img/shrimp_2.jpg" /></div>
22 <a href="#" id="jieshao">红功夫 麻辣小龙虾4-6钱 1kg</a></div><br />
23 <span id="danjia">¥109</span>
24 <span id="gdanjia">¥118</span>
25 </td>
26 <td>
27 <div id="tupian"><img src="img/shrimp_3.jpg" /></div>
28 <a href="#" id="jieshao">品鲜猫 潜江麻辣小龙虾尾1000g</a></div><br />
29 <span id="danjia">¥98</span>
30 <span id="gdanjia">¥138</div>
31 </td>
32 <td>
33 <div id="tupian"><img src="img/shrimp_4.jpg" /></div>
34 <a href="#" id="jieshao">红功夫 麻辣小龙虾6-8钱 750g</a></div><br />
35 <span id="danjia">¥108</span>
36 <span id="gdanjia">¥138</span>
37 </td>
38 </tr>
39 </table>
40 </body>
41 </html>
css
1 .goods tr td h2{
2 text-align: center;/*标题居中*/
3 color: red;/*标题颜色*/
4 letter-spacing: 10px;/*标题字符间隔*/
5 }
6 a{
7 color: gray;/*a标签中的字起初为灰色*/
8 text-decoration: none;/*取消下划线*/
9 font-size: 12px;/*字体大小为12px*/
10 }
11 .goods #jieshao:hover{
12 color: red;/*鼠标悬浮在介绍上时字体为红色*/
13 text-decoration: underline; /*鼠标悬浮在介绍上时显示下划线*/
14 }
15 #danjia{
16 font-size: 24px;/*单价的字体大小为24px*/
17 font-weight: bold;/*单价字体加粗*/
18 color: red;/*单价字体颜色为红色*/
19 }
20 .goods{
21 font-family: "微软雅黑";/*所有字体都为微软雅黑*/
22 }
23 #gdanjia{
24 text-decoration: line-through;/*原价加中划线*/
25 color: gray;/*原价的字体颜色*/
26 font-size: 12px;/*原价的字体大小*/
27 }
28 #jieshao,#danjia{
29 line-height: 40px;/*介绍和单价的行高*/
30 }
5.2.3
html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>商品信息列表</title>
6 <link type="text/css" rel="stylesheet" href="css/5.2.3.css"/>
7 </head>
8
9 <body>
10 <div id="goods">
11 <table>
12 <tr>
13 <td>
14 <div class="photo">
15 <img src="img/adv_1.jpg"/>
16 <div class="images">华硕(ASUS)飞行堡垒五代<br>FX80 15.6英寸游戏笔记本</div>
17 <div class="money">￥5999.00</div>
18 </div>
19 </td>
20 <td>
21 <div class="photo">
22 <img src="img/adv_2.jpg"/>
23 <div class="images">武极 新i7 8700/华硕<br>GTX1060-6G/Z370水冷</div>
24 <div class="money">￥6499.00</div>
25 </div>
26 </td>
27 <td>
28 <div class="photo">
29 <img src="img/adv_3.jpg"/>
30 <div class="images">英商海盗船（USCorsair）额<br>定650W RM650x电源</div>
31 <div class="money">￥869.00</div>
32 </div>
33 </td>
34 <td>
35 <div class="photo">
36 <img src="img/adv_4.jpg"/>
37 <div class="images">联想(Lenovo)杨飞M4000e<br>(PLUS)商用办公台式</div>
38 <div class="money">￥3299.00</div>
39 </div>
40 </td>
41 <td>
42 <div class="photo">
43 <img src="img/adv_5.jpg"/>
44 <div class="images">惠普（HP）星14-ce0016TU<br>14英寸轻薄笔记本电脑</div>
45 <div class="money">￥4799.00</div>
46 </div>
47 </td>
48 </tr>
49 </table>
50 </div>
51 </body>
52 </html>
css
1 /* CSS Document */
2 #goods{
3 width: 1100px;/*表格的宽度为950px*/
4 height: 260px;/*表格的高度为240px*/
5 background-color: #7C64D0;/*表格的背景颜色为浅蓝色*/
6 text-align: center;
7 }
8 /*清楚图片样式*/
9 table tr td img{
10 margin: 0px;
11 padding: 0px;
12 border: 0px;
13 list-style-type: none;
14 }
15 .photo{
16 width: 200px;/*图片的宽度为160px*/
17 background-color: white;
18 margin: 8px;
19 }
20 td{
21 margin: 5px;/*每一列表的的间距为5px*/
22 }
23 .money{
24 color: red;
25 font-weight: bold;
26 font-size: 25px;
27 margin-top: 5px;
28 margin-bottom: 5px;
29 }
30 .images{
31 font-weight: bold;
32 font-size: 15px;
33 }
5.3.3
html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>热卖排行榜</title>
6 <link type="text/css" rel="stylesheet" href="css/5.3.3.CSS"/>
7 </head>
8
9 <body>
10 <div id="big">
11 <div id="title"><span id="biaoti">热卖排行榜</span></div>
12 <div class="xinxi"><span class="number1">1</span><span class="xiangqing"><a href="#">惠普（HP）Envy X360 13-ag0007AU</a></span></div>
13 <div class="xinxi"><span class="number1">2</span><span class="xiangqing"><a href="#">惠普（HP）EliteBook 745G5 14英寸</a></span></div>
14 <div class="xinxi"><span class="number1">3</span><span class="xiangqing"><a href="#">Apple MacBook Air 13.3英寸笔记本</a></span></div>
15 <div class="xinxi"><span class="number2">4</span><span class="xiangqing"><a href="#">戴尔DELL灵越然7000 II 14.0英寸轻薄本</a></span></div>
16 <div class="xinxi"><span class="number2">5</span><span class="xiangqing"><a href="#">华硕(ASUS)灵耀U4000UQ 14英寸合金本</a></span></div>
17 <div class="xinxi"><span class="number2">6</span><span class="xiangqing"><a href="#">小米(MI)Air 12.5英寸全金属超轻薄</a></span></div>
18 <div class="xinxi"><span class="number2">7</span><span class="xiangqing"><a href="#">联想(Lenovo)小新潮7000 2018款 15.6英寸</a></span></div>
19 </div>
20 </body>
21 </html>
css
1 /* CSS Document */
2 #big{
3 border-radius: 5px;/*给整个列表一个圆角边框*/
4 width: 270px;/*这个列表的宽度为270px*/
5 padding: 5px;/*列表的填充为5px*/
6 border: 1px solid gray;/*边框厚度1px 实线 颜色为灰色*/
7 font-family: "微软雅黑";/*整个列表中的字体为微软雅黑*/
8 margin: 5px;/*页边距为5px*/
9 }
10 #title{
11 line-height: 40px;/*标题的行高为40x*/
12 background-color: #5979D0;/*标题的颜色为浅蓝色*/
13 font-weight: bold;/*标题加粗显示*/
14 }
15 #big #title #biaoti{
16 margin-left: 10px;/*标题左边距为10px*/
17 font-size: 18px;/*标题字体大小为18px*/
18 }
19 /*前三个数字左右边距为10px 加粗显示 颜色为红色 大小为20px*/
20 #big .xinxi .number1{
21 margin-left: 10px;
22 margin-right: 10px;
23 font-weight: bold;
24 color: red;
25 font-size: 20px;
26 }
27 /*设置a标签中的字大小为12px 下划线不显示 颜色为黑色*/
28 #big .xinxi .xiangqing a{
29 font-size: 12px;
30 color: black;
31 text-decoration: none;
32 }
33 /*当鼠标悬浮在a标签上的字时显示为红色且显示下划线*/
34 #big .xinxi .xiangqing a:hover{
35 color: red;
36 text-decoration: underline;
37 }
38 /*每一行的下边框为虚线 粗细1px 颜色灰色*/
39 .xinxi{
40 border-bottom: 1px dashed gray;
41 }
42 /*4-7行的数字为浅蓝色 左右边距为10px 粗体 大小20px*/
43 #big .xinxi .number2{
44 margin-left: 10px;
45 margin-right: 10px;
46 font-weight: bold;
47 color: #5572E3;
48 font-size: 20px;
49 }
HTML5第五章作业的更多相关文章
- Windows核心编程 第五章 作业（上）
第5章 作 业 通常,必须将一组进程当作单个实体来处理.例如,当让 Microsoft Developer Studio为你创建一个应用程序项目时,它会生成 C l . e x e,C l . e x ...
- 《Windows核心编程》第五章——作业
#include <windows.h> #include<iostream> #include <tchar.h> using namespace std; ty ...
- Windows核心编程 第五章 作业（下）
5.4 查询作业统计信息 前面已经介绍了如何使用 Q u e r y I n f o r m a t i o n J o b O b j e c t函数来获取对作业的当前限制信息.也可以使用它来获取关 ...
- 2019寒假训练营第三次作业part1-网络空间安全概论第五章
第五章 网络攻防技术 5.1 网路信息收集技术--网络踩点 黑客入侵系统之前,需要了解目标系统可能存在的: 管理上的安全缺陷和漏洞 网络协议安全缺陷与漏洞 系统安全缺陷与漏洞 黑客实施入侵过程中,需要 ...
- 读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- 《Introduction to Tornado》中文翻译计划——第五章：异步Web服务
http://www.pythoner.com/294.html 本文为<Introduction to Tornado>中文翻译,将在https://github.com/alioth3 ...
- 《Linux命令行与shell脚本编程大全》 第十五章 学习笔记
第十五章:控制脚本 处理信号 重温Linux信号 信号 名称 描述 1 HUP 挂起 2 INT 中断 3 QUIT 结束运行 9 KILL 无条件终止 11 SEGV 段错误 15 TERM 尽可能 ...
- 《Linux内核设计与实现》第四周读书笔记——第五章
<Linux内核设计与实现>第四周读书笔记--第五章 20135301张忻 估算学习时间:共1.5小时 读书:1.0 代码:0 作业:0 博客:0.5 实际学习时间:共2.0小时 读书:1 ...
- 第五次作业——python效能分析与几个问题（个人作业）
第五次作业--效能分析与几个问题(个人作业) 前言 阅读了大家对于本课程的目标和规划之后,想必很多同学都跃跃欲试,迫不及待想要提高自身实践能力,那么就从第一个个人项目开始吧,题目要求见下. 阅读 阅读 ...
随机推荐
- VS code 安装后gdb调试无法显示STL内容的问题
bar {...} std::_Vector_base<TSample<MyTraits>, std::allocator<TSample<MyTraits> &g ...
- R7-1 字符排队
R7-1 字符排队 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 本题要求编写程序,将给定字符串中的字符,按照ASCII码顺序从小到大排序后输出. 输入格式: 输入是一个以回车结 ...
- http头部meta 作用
<meta charset="utf-8"> <!-- 设置文档字符编码 --> <meta http-equiv="x-ua-compat ...
- Oracle.DataAccess使用问题汇总
1.使用参数化传参 先看一段sql select TABLE_COLUMN_NAME from CSV_PARA_MAPPING where TABLE_NAME = ':v_tabName' and ...
- 【Python】容器：列表（list）／字典（dict）／元组（tuple）／集合（set）
三.Python容器:列表(list)/字典(dict)/元组(tuple)/集合(set) 1.列表(list) 1.1 什么是列表 是一个'大容器',可以存储N多个元素简单来说就是其他语言中的数组 ...
- MYSQL5.7索引异常引发的锁超时处理记录
原始sql: update a set a.x=x where a.xid in (select b.xid from b inner join c on b.xxx = c.xxx) and a.x ...
- torch.squeeze函数解释，torch.FloatTensor()函数作用解释
1. torch.squeeze(x,N) 主要对数据维度进行压缩 torch.squeeze(x,N) #也可以写为格式 x.squeeze(dim=N) 含义:当N未给定时,去掉x中所有维度为1 ...
- PLSQL中文乱码问题（显示问号）解决办法
select userenv('language') from dual; 在环境变量的系统变量中添加配置: NLS_LANG SIMPLIFIED CHINESE_CHINA.ZHS16GBK 这个 ...
- 2019-2020-1 20199318《Linux内核原理与分析》第八周作业
第7章 可执行程序工作原理 一.学习笔记 1.ELF 2.程序编译 3.连接与库 二.试验记录 1.开始先更新内核,再用test_exec.c将test.c覆盖掉 2.test.c文件中增加了exec ...
- js判断当值的比较小的背景为红色
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...