html---css小练习（1）

最新推荐文章于 2023-12-14 23:59:49 发布
最新推荐文章于 2023-12-14 23:59:49 发布
阅读量860 收藏 5
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loringray/article/details/89011054
版权

预览效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>homework1-1</title>
    <meta charset="utf-8" />

    <!--内部样式引用CSS-->
    <style type="text/css">
        table {
            border-color: #11dc2e;
        }

        .red-color {
            font-weight: 700;
        }

            .red-color td {
                text-align: center;
            }


        .blue-color {
            color: #0b78ef;
            font-weight: 700;
        }

        td.right {
            text-align: right;
        }
    </style>

</head>
<body>

    <center>
        <div>
            <h2>Global Co.Ltd.</h2>
            <h2>Sale Report</h2>
        </div>
        <div>
            <table border="1" width="800" cellspacing="0" cellpadding="5" align="center">
                <tr class="head">
                    <td colspan="8" align="center"><h3>Items Sold August 2016</h3></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td colspan="3" align="center">Clothes</td>
                    <td colspan="4" align="center">Accessories</td>
                </tr>
                <tr style="color:red" class="red-color">
                    <td></td>
                    <td></td>
                    <td>Trousers</td>
                    <td>Skirts</td>
                    <td>Dresses</td>
                    <td>Bracelets</td>
                    <td>Rings</td>
                </tr>
                <tr>
                    <td rowspan="3" class="blue-color">Belgium</td>
                    <td class="blue-color">Antwerp</td>
                    <td class="right">56</td>
                    <td class="right">22</td>
                    <td class="right">43</td>
                    <td class="right">72</td>
                    <td class="right">23</td>
                </tr>
                <tr>
                    <td class="blue-color">Gent</td>
                    <td class="right">46</td>
                    <td class="right">18</td>
                    <td class="right">50</td>
                    <td class="right">61</td>
                    <td class="right">15</td>
                </tr>
                <tr>
                    <td class="blue-color">Brussels</td>
                    <td class="right">51</td>
                    <td class="right">27</td>
                    <td class="right">38</td>
                    <td class="right">69</td>
                    <td class="right">28</td>
                </tr>
                <tr>
                    <td rowspan="2" class="blue-color">The Netherlands</td>
                    <td class="blue-color">Amsterdam</td>
                    <td class="right">89</td>
                    <td class="right">34</td>
                    <td class="right">69</td>
                    <td class="right">85</td>
                    <td class="right">38</td>
                </tr>
                <tr>
                    <td class="blue-color">Utrecht</td>
                    <td class="right">80</td>
                    <td class="right">12</td>
                    <td class="right">43</td>
                    <td class="right">36</td>
                    <td class="right">19</td>
                </tr>


            </table>
        </div>
    </center>
   

</body>
</html>

 

loringray
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css常用demo练习
SundayGoG的博客
05-30 1731
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
HTML核心+CSS基础（练习）
2301_80441013的博客
11-19 298
学习语言练习是必不可少，重中之重的，这一周我进行了常规流，浮动，定位以及表单元素的练习下面就让我们一起看看这周的分享吧！
HTML面试题：50道含答案和代码示例的练习题
三拾的博客
05-31 4915
答案：meta标签用于向浏览器提供网页的元数据，包括网页的描述、关键词和编码等信息。答案：块级元素是独立的元素，会独占一行，并且可以设置宽度、高度、边距和填充等属性。答案：表单中的输入框可以是文本输入框、密码输入框、单选框、复选框、下拉列表框等。行内元素是内联的元素，不会独占一行，并且只能设置字体、颜色、背景等属性。答案：iframe标签用于在网页中嵌入另一个网页，创建一个内嵌框架。答案：属性是HTML标签的特性，用于描述标签的行为和外观。答案：标签是HTML中的元素，用于描述网页的结构和内容。
HTML基础练习
最新发布
yfy0308的博客
12-14 54
【代码】HTML基础练习。
HTML练习第一周
2301_77543964的博客
11-04 52
今天练习了第三章：如何使用标签html标签对：声明这是一个HTML页面head标签对：title,meta,link,style,script,base可以放进去body标签对运行结果。
CSS经典练习-css-diner-develop.7z
11-05
《CSS经典练习——css-diner-develop深度解析》 在IT领域，HTML前端和CSS是构建网页界面的基础。其中，CSS（层叠样式表）尤为重要，它负责定义网页的布局、颜色、字体等视觉效果。"css-diner-develop"是一个专为CSS...
Appex-static-page-TailwindCSS:练习CSS框架（Tailwind CSS）
03-10
1. 熟悉Tailwind CSS的基本类，了解如何在HTML中应用它们。 2. 阅读Tailwind CSS的官方文档，深入理解其配置和工作原理。 3. 在本地环境中安装并配置Tailwind CSS，创建自己的项目并实践。 4. 探索响应式设计，利用...
html-css:HTML和CSS练习
03-21
在这个“html-css:HTML和CSS练习”中，我们将深入探讨这两个关键技术，并通过实际操作来提升技能。 HTML是创建网页内容的语言，它使用一系列标签来定义不同的元素，如段落、标题、图像、链接等。了解基本的HTML语法...
HTML-Restaurante:DigitalHouse HTMLCSS练习
05-28
HTML-Restaurante是针对初学者的一个练习项目，旨在帮助学习者掌握HTML和CSS的基本概念和技术。这个项目可能由DigitalHouse提供，一个知名的在线教育机构，专注于数字技能的培训。在"HTML-Restaurante"中，你将有...
challenge-html-02:CSS动画
05-08
这是一个基础级别的HTML和CSS练习，同时也涉及到JavaScript的一些基本应用。 首先，我们需要理解HTML的基本结构，用于展示图像。通常，我们会使用`<img>`标签来插入图片，其`src`属性指向图片的URL，`alt`属性提供...
小练习07HTML+CSS-教学大讲堂小页面
05-12
小练习07HTML+CSS-教学大讲堂小页面
html的一些小练习
08-16
html的一些小练习，javascript的一些小应用，
html练习+css
06-23
普通的html练习，做的时间为2017年6月23日
h5+css3 小练习
11-30
H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML练习合集
Sladecousin的博客
04-04 795
【代码】HTML练习合集。
html的简单例子练习（6个）
小黄呀呀呀的博客
04-19 6313
1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
HTML、css项目上手练习
雨云21的博客
05-04 7975
根据下边的效果图完成一个完整网页的制作 1、头部的制作： （1）制作#tou外盒子效果； （2）制作#tou1内盒子1效果：包括导航与logo； （3）制作#tou2内盒子效果：包括标题与段落文字； ...
前端技术——4——CSS练习
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-01 1864
仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad
HTML-CSS-Div测试及网页设计练习题汇总
《网页设计》练习题集一、单项选择题涵盖了HTML和CSS的基础知识。在HTML中，标记的作用是预排版标记，而在CSS中使用背景图片需要使用url参数。文本修饰的取值和外部样式单文件的扩展名也在练习题中有所涉及。这些...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值