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效能分析与几个问题（个人作业）
第五次作业--效能分析与几个问题(个人作业) 前言 阅读了大家对于本课程的目标和规划之后,想必很多同学都跃跃欲试,迫不及待想要提高自身实践能力,那么就从第一个个人项目开始吧,题目要求见下. 阅读 阅读 ...
随机推荐
- mysql掉电后重启失败问题
报错 2022-12-07T01:41:02.844533Z 0 [ERROR] InnoDB: Ignoring the redo log due to missing MLOG_CHECKPOIN ...
- string 字符串模块操作
1. 常用方法 2.字符串常量 3.字符串模板Template 通过string.Template可以为Python定制字符串的替换标准,下面是具体列子: >>>from strin ...
- Github的.gitignore忽略文件
Git中有一个非常重要的一个文件-----.gitignore 1.当然如果已经push了怎么办?当然也有解决方法,如下: 有时候在项目开发过程中,突然心血来潮想把某些目录或文件加入忽略规则,按照上述 ...
- Luogu7912
初中同学问我咋做,所以就写了一份题解. 先摆复杂度:均摊 \(O(n)\). 考虑,如果我们每次操作的复杂度都与输出量同阶,而输出量总量 \(O(n)\),则复杂度得到均摊. 于是我们现在要设计一个算 ...
- No.1.4
选择器进阶 [复合选择器]:后代选择器:空格 语法:选择器1 选择器2 {css} 子代选择器:> 语法:选择器1>选择器2 {css} [并集选择器]:, 语法:选择器1 , ...
- 2020icpc济南 - A
组合数学 + 高斯消元 [A-Matrix Equation_第 45 届国际大学生程序设计竞赛(ICPC)亚洲区域赛(济南) (nowcoder.com)](https://codeforces.c ...
- Codeforces Round #766 (Div. 2) - D. Not Adding
GCD + 调和级数 Problem - 1627D - Codeforces 题意 有 \(n\;(1<=n<=10^6)\) 个互不相同的数 \(a[i]\;(1<=a[i]&l ...
- mac上创建第一个C程序
在mac电脑上,写C语言程序一般用终端来写,我们学习C主要是为了学习iOS的话,我们今天换Xcode来写C. 一.去App Store或者苹果开发者网站上下载Xcode.打开Xcode,创建项目. 二 ...
- iis express添加网站，并启动
1.查看网站列表 C:\Program Files (x86)\Microsoft Visual Studio 12.0>"C:\Program Files\IIS Express\a ...
- 计算机网络基础(3):IP与子网掩码/ ping/ ipconfig/ VLAN/ 网络服务器配置
chapter4 构建中型网络 1. IP地址与子网掩码 A类地址:网络ID开头是0,范围从00000001到01111110,126个,其中0 127留作他用.在每个网段里(网络ID),可以容纳2* ...