html作业3

最新推荐文章于 2024-07-01 11:31:42 发布
最新推荐文章于 2024-07-01 11:31:42 发布
阅读量57 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C13136398183/article/details/131065196
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .goods {
                width: 250px;
                height: 390px;

            }

            .divv>img {
                display: block;
                width: 250px;
                height: 250px;

            }

            .text>div {
                margin: 5px;
            }

            .price>span {
                vertical-align: middle;
            }

            .price>span:first-child {
                color: #eb5628;
                font-weight: bold;
                font-size: 20px;
                line-height: 20px;
            }

            .price>span:nth-child(2) {
                background-color: #eb5628;
                color: white;
                font-size: 13px;
                line-height: 20px;
            }

            .price>span:last-child {
                float: right;
                font-size: 13px;
                color: #777;
            }

            .des>a>label {
                font-size: 13px;
            }

            .des>a>label:first-child {
                color: #eb5628;
            }

            .des>a:link {
                text-decoration: none;
                color: black;
            }

            .des>a:visited {
                color: black;
            }

            .des>a:hover {
                color: #eb5628;
                text-decoration: underline;
            }

            .shop_info>a:visited {
                color: #777;
            }

            .shop_info>a {
                font-size: 13px;
            }

            .shop_info>label {
                float: right;
                font-size: 13px;
                color: #777;
            }

            .icon_info>span:first-child {
                background: url('img/sprite.png');
                background-size: 610px 600px;
                display: inline-block;
                background-position: -375px -400px;
                width: 32px;
                height: 32px;
            }

            .icon_info>span:last-child {
                background: url('img/2222.png');
                background-size: 860px 852px;
                display: inline-block;
                background-position: -344px -646px;
                width: 32px;
                height: 32px;
                border: 1px solid red;
                float: right;
            }

            .divv {
                width: 250px;
                position: relative;
            }

            .divv>div {
                position: absolute;
                bottom: 0;
                display: none;
            }

            .divv>div>div {
                
                background-color: #eb5628;
                font-size: 25px;
                color: white;
                width: 124px;
                float: left;
                text-align: center;

            }

            .divv>div>div:last-child {
                border: 1px solid white;
                border-top: none;
                border-right: none;
            }

            .divv:hover>div {
                display: block;
            }
        </style>
    </head>
    <body>

        <div class="goods">
            <div class="divv">
                <img src="./img/12234.webp" alt="">
                <div>
                    <div>
                        找相似
                    </div>
                    <div>
                        找相同
                    </div>

                </div>

            </div>

            <div class="text">
                <div class="price">
                    <span>￥12.80</span>
                    <span>包邮</span>
                    <span>1万+人付款</span>
                </div>
                <div class="des">
                    <a href="#">
                        <label for="des">鸡你太美</label>
                        <label for="">手办摆件恶搞ikun小黑子蔡徐坤公仔小玩偶车摆件小玩具</label>
                    </a>
                </div>
                <div class="shop_info">
                    <a href="">信誉玩具专营店</a>
                    <label>浙江 金华</label>
                </div>
                <div class="icon_info">
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .div1 {
                height: 80px;

                background-color: #9a3032;

            }

            .div2 {
                margin: auto;
                width: 75%;
                height: 80px;
                line-height: 80px;
                position: relative;
            }

            a {
                color: white;
                text-decoration: none;
            }

            .div2>div {
                height: 80px;
                float: left;
                padding-left: 17px;
                padding-right: 17px;
                color: white;

            }

            .div2>div:hover {
                background-color: white;
                color: #9a3032;
            }

            .aa:hover>a {
                color: #9a3032;
            }

            .div3>* {
                float: left;
            }

            .div6>* {
                float: left;
            }

            .div5>* {
                float: left;
            }

            .div3>div>ul>li {
                list-style: none;
                color: black;
                line-height: 30px;
                margin-left: 15px;
                font-size: 16px;
            }

            .div5>div>ul>li {
                list-style: none;
                color: black;
                line-height: 30px;
                margin-right: 15px;
                font-size: 16px;
            }

            .div6>div>ul>li {
                list-style: none;
                color: black;
                line-height: 30px;
                margin-right: 30px;
                font-size: 16px;
            }

            li::before {
                display: inline-block;
                content: " ";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #9a3032;
                margin-right: 10px;

            }

            .xxgk {
                position: relative;
            }

            .xxgk:hover>div {
                width: 400px;
                display: block;

            }

            .xxgk>div {
                margin-top: 10px;
                display: none;
                position: absolute;

            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <div class="aa">
                    <a href="http://127.0.0.1:8848/pro/dhl.html" target="">首页</a>
                </div>
                <div class="xxgk">
                    学校概况
                    <div class="div3">
                        <div><img src="./img/学校.png" alt="shibai"></div>
                        <div>
                            <ul>
                                <li>学校简介</li>
                                <li>校长寄语</li>
                                <li>学校领导</li>
                                <li>学校风光</li>
                                <li>学校标识</li>
                            </ul>
                        </div>

                    </div>

                </div>
                <div class="xxgk">
                    组织机构
                    <div class="div3">
                        <div><img src="./img/学校.png" alt="shibai"></div>
                        <div>
                            <ul>
                                <li>党政机构</li>
                                <li>行政部门</li>
                                <li>二级学院</li>

                            </ul>
                        </div>

                    </div>
                </div>
                <div class="xxgk">
                    党群工作
                    <div class="div3">
                        <div><img src="./img/学校.png" alt="shibai"></div>
                        <div>
                            <ul>
                                <li>党建工作</li>
                                <li>团委工作</li>
                                <li>工会工作</li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="xxgk">
                    教育教学
                    <div class="div3">
                        <div><img src="./img/学校.png" alt="shibai"></div>
                        <div>
                            <ul>
                                <li>本科教育</li>
                                <li>职业教育与继续教育</li>
                                <li>教研与科研</li>
                                <li>教学与动态</li>

                            </ul>
                        </div>

                    </div>
                </div>
                <div class="xxgk">
                    国际教育
                    <div class="div3">
                        <div><img src="./img/学校.png" alt="shibai"></div>
                        <div>
                            <ul>
                                <li>国际交流中心</li>
                                <li>国际教育学院</li>
                                <li>国际联合培养</li>
                                <li>英才计划</li>

                            </ul>
                        </div>

                    </div>
                </div>
                <div class="xxgk">
                    校园生活
                    <div class="div6">
                        <div>
                            <ul>
                                <li>校园设施</li>
                                <li>教学设施</li>
                                <li>餐饮服务</li>

                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>住宿服务</li>
                                <li>网络服务</li>
                                <li>综合服务</li>

                            </ul>
                        </div>
                        <div><img src="./img/学校.png" alt="shibai"></div>
                    </div>
                </div>
                <div class="xxgk">
                    学生服务
                    <div class="div5">
                        <div>
                            <ul>
                                <li>学工动态</li>
                                <li>学生会</li>
                                <li>学生资助</li>
                                <li>心理健康</li>
                                <li>资料下载</li>
                            </ul>
                        </div>
                        <div><img src="./img/学校.png" alt="shibai"></div>
                    </div>

                </div>
                <div class="xxgk">
                    招生就业
                    <div class="div5">
                        <div>
                            <ul>
                                <li>招生网</li>
                                <li>就业网</li>
                            </ul>
                        </div>
                        <div><img src="./img/学校.png" alt="shibai"></div>
                    </div>
                </div>
                <div class="xxgk">
                    人才招聘
                    <div class="div5">
                        <div>
                            <ul>
                                <li>招聘公告</li>
                                <li>联系我们</li>

                            </ul>
                        </div>
                        <div><img src="./img/学校.png" alt="shibai"></div>
                    </div>
                </div>
                <div class="xxgk">
                    校友会
                </div>

            </div>
        </div>
    </body>
</html>

 

C13136398183
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML初学者作业
weixin_53089473的博客
03-02 2268
HTML初学者第一课作业内容： 初学者理解浅薄，有错误在所难免，可以和楼主交流以助于及时改正 结合今天上课所讲内容，完成上传图片页面样式开发 要求如下: 1. 配色，背景图片根据自己喜好，上网查找素材。 header 和footer 地方，可以根据自己想法，设计美化一下 2. banner地方，可以点击跳转，点击后，新开网页跳转到百度吧 3. 表单项目，可以根据自己想法增加项目，元素需要增加2项以上check 4.作业成果物: 提交html资源的源码 遇到的困难： 1.表格table &lt.
HTML网页设计作业
apple_58104230的博客
06-01 5103
效果图：
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 30万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
html网页设计小作业(个人主页)
m0_53415522的博客
11-08 6万+
简易的个人网页小作业，只用了html+css 布局制作，没啥好说的，直接上图！！！
一个简单的网页设计HTML5作业
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
HTML网页设计制作大作业（div+css）
IT_A_bin的博客
11-25 10万+
话不多说，直接上效果图： 历史介绍 行政区划： 地理环境 著名景点： 美食小吃 工艺品 联系我们 部分项目结构 老师要求的十几个页面20几张图片以及一些跳转，使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒，就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话可以联系我呀。 大家加油！奥利给！ ...............
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 8万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
html作业 音乐排行榜
m0_56424512的博客
11-17 1743
html作业
纯HTML+CSS网页设计期末作业
爱德苏的博客
05-29 1万+
喜欢水课的大学生的HTML期末大作业！！！
Web网页设计作业html
周末简设
12-07 1万+
该模板为纯html5模板，样式简单，页面都是以DIV+CSS实现线性布局，运用html5技术，包括nav标签、header标签和footer标签等，支持PC端和手机端。
HTML大作业源码
12-30
HTML大作业源码是针对初学者或学生设计的一组练习，旨在帮助他们深入理解HTML（超文本标记语言）的基本概念和应用。HTML是构建网页内容的基础，它定义了页面的结构和布局。在这个作业中，我们可以看到一系列的HTML...
HTML静态网页作业
02-15
3. **CSS样式**：虽然作业主要关注HTML，但理解CSS（Cascading Style Sheets）也很重要。CSS用于定义HTML元素的样式，如颜色、字体、布局等。可以内联样式（在元素内部使用`style`属性），内部样式（在`<head>`中的`...
齐天大圣作业.html
10-28
齐天大圣作业.html
HTML期末大作业
11-24
这个“HTML期末大作业”显然涵盖了HTML的基础知识和应用技巧，对于学习者来说，无论是完成作业还是自我提升，都是一个宝贵的资源。 HTML的基本结构通常包括头部（head）和主体（body）。头部主要存放元数据，如页面...
html期末大作业
12-18
在这个“html期末大作业”中，我们可以推测这是一个学生或学习者为了完成课程要求，练习并展示了他们对HTML的理解和应用。这个作业可能包含了多个页面，每个页面都是一个独立的HTML文档，通过链接相互连接，形成一个...
深入WebKit内核：揭秘HTML与XML的识别之谜
2401_85761003的博客
06-29 425
WebKit的文档类型识别机制是其强大功能的基础。通过深入理解这一机制，开发者可以更好地控制网页的渲染过程，提升用户体验。WebKit不仅仅是一个浏览器引擎，它更是连接创意与现实世界的桥梁。本文深入探讨了WebKit如何区分HTML与XML等不同文档类型，希望能为前端开发者提供有价值的参考。如果您对WebKit有更深入的问题或见解，欢迎在评论区交流。
使用PHP解析和处理HTML/XML以创建Web爬虫的示例
最新发布
wx_19970108018的博客
07-01 523
本文介绍了如何使用PHP的curl函数获取网页内容，以及如何使用Simple HTML DOM库解析HTML和SimpleXML库解析XML的示例代码。PHP作为一种流行的服务器端脚本语言，具有丰富的库和功能，可以方便地解析和处理HTML或XML格式的数据。在本文中，我们将介绍使用PHP创建Web爬虫的示例，并提供相关代码示例。这段代码中，我们指定了要爬取的网址，并使用curl函数设置一些选项，例如设置CURLOPT_RETURNTRANSFER为true来将获取的内容保存为一个字符串。
Dominate_一个用于生成和操作 HTML 文档的 Python 库
xyh2004的博客
06-28 1084
Dominate 是一个用于生成和操作 HTML 文档的 Python 库。它允许你通过 Python 代码轻松创建、修改和操作 HTML 内容，而不需要手写繁琐的 HTML 代码。这对需要动态生成网页内容的应用程序开发者来说，无疑是一个福音。
css_19_浮动
一个初学者的博客
06-28 606
4．不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的margin和padding。2．不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。5．不会像行内块一样被当做文本处理（没有行内块的空白问题）。2．方案二：给父元素也设置浮动，带来其他影响。4．方案四：在所有浮动元素的最后面，添加一个。3．不会独占一行，可以与其他元素共用一行。1．方案一：给父元素指定高度。3．方案三：给父元素设置。，并给该块级元素设置。
html作业源码分享
04-23
当然，我可以给你介绍一下HTML作业源码分享。HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。下面是一个简单的HTML作业源码示例： ```html <!DOCTYPE html> <html> 我的作业 欢迎来到我的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值