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效能分析与几个问题（个人作业）
第五次作业--效能分析与几个问题(个人作业) 前言阅读了大家对于本课程的目标和规划之后,想必很多同学都跃跃欲试,迫不及待想要提高自身实践能力,那么就从第一个个人项目开始吧,题目要求见下. 阅读阅读 ...

随机推荐

jmeter中监听器及测试结果分析
CSS渐变样色的字
width: 118px; height: 17px; font-size: 13px; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font- ...
面试官：来说说 https 和 http 区别？
http 和 https的区别? 一.传输信息安全性不同 1.http协议:是超文本传输协议,信息是明文传输.如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息. 2.h ...
IEC104
IEC10X协议源码 https://github.com/airpig2011/IEC104 一.源码编译下载源代码并解压进入文件夹下test目录,对main.c进行修改我们使用套接字来实现服 ...
1.java 开始
WelloWorld 随便新建一个文件夹,存放代码新建一个java文件编写代码编译javac java文件,生成一个class文件运行class文件,java class 可能遇到的情况每个 ...
protobuf遇坑总结
在一个vs2013解决方案下创建了三个工程文件,在其中一个工程(Foundation)中放有CtrlMessage.pb.h和ControlMessageTags的头文件.编译后出错总共68处. 错误 ...
vue-vite-ts 新版
Vue 后台管理系统一.系统创建 1.1.环境检测 $ node -v v18.10.0 $ npm -v 9.1.2 ## 若没有该命令需要用 npm install -g pnpm 安装 $ ...
centos7 python设置虚拟环境
virtualenv 是一个可以在同一计算机中隔离多个python版本的工具.有时,两个不同的项目可能需要不同版本的python,如 python2.6.6 / python3.0 ,但是如果都装到一 ...
idea安装破解
转一般都会去官网下载,官网地址IntelliJ IDEA,官网上对于不同的操作系统(windows,macOS,Linux)都有两个版本可供下载 3|0安装确认已经安装好了 JDK ,每个IDEA ...
fabric学习笔记3
fabric学习笔记3 20201303张奕博 2023.1.11 Hyperledger Fabric架构设计分布式帐本区块链核心概念是分布式帐本,就像下面的图1所示,同样的帐本(全量的交易数据 ...

HTML5第五章作业

HTML5第五章作业的更多相关文章

随机推荐

热门专题