web练习

最新推荐文章于 2022-10-27 05:00:00 发布
最新推荐文章于 2022-10-27 05:00:00 发布
阅读量219 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41355482/article/details/98210244
版权

项目案例

1、导航栏

在这里插入图片描述
具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            width: 100%;
            height: 40px;
            background-color: #55a8ea;
            overflow: hidden;
        }
        .header li {
            /*设置li为行内块级元素*/
            display: inline-block;
            width: 100px;
            height: 40px;
            padding-top: 12px;
            text-align: center;

        }
        .header li:hover{
            background-color: #00619f;;
        }
        .header li a{
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
        .active{
            background-color: #00619f;
        }
    </style>
</head>
<body>
<!--导航栏设置-->
<div class="header">
    <ul>
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
</body>
</html>
2、 特征布局:图片列表

在这里插入图片描述
具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box img {
            width: 160px;
            height: 68px;
            padding-bottom: 12px;
        }
        .box {
            /*border: 2px gray solid;*/
            float: left;
            margin: 5px;
        }
        .content {
            padding-left:20px;
            padding-right: 20px;
            border: 2px gray solid;
            width: 860px;
            height: 269px;
        }
        .clear{
            clear: left;
        }
    </style>

</head>
<body>
<div class="content">
    <p style="font-size: 16px ;color: #000">图片展示</>
    <hr>
    <div class="box">
        <div class="img">
            <img src="img/img1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img">
            <img src="img/img1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="image">
            <img src="img/img1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="image">
            <img src="img/img1.jpg">
        </div>
    </div>
    <div class="box">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
    <div class="box clear">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
    <div class="box">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
    <div class="box">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
    <div class="box">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
    <div class="box">
    <div class="image">
        <img src="img/img1.jpg">
    </div>
    </div>
</div>
</body>
</html>
3、淘宝页面

在这里插入图片描述
具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box img {
            width: 90px;
            height: 80px;
            margin: 8px;
            padding: 0px;
        }
        .box {
            border: 2px red solid;
            margin: 5px;
            padding: 20px;
            height: 345px;
            width: 440px;
            /*float: left;*/
        }
        .box .img{
            float: left;
        }
        .box .img p {
            text-align: center;
        }
        .box table {
            width: 211px;
            height: 97px;
            border: 1px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <p>淘宝女装</p>
    <div class="img">
        <img src="img/taobao.jpg" style="width: 212px;height: 239px">
    </div>
    <div class="img">
        <img src="img/baobao.jpg"><br>
        <p>时尚包包</p>
    </div>
    <div class="img">
        <img src="img/xiezi.jpg"><br>
        <p>精美鞋子</p>
    </div>
    <div class="table">
        <table border="1px">
            <tr style="text-align: center">
                <td>新品上市</td>
                <td>女装</td>
            </tr>
            <tr style="text-align: center">
                <td>欧美风</td>
                <td>美搭</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
4、电影排行榜

在这里插入图片描述
具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 450px;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }
        .box h1 {
            color: green;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }
        .box li {
            list-style: none;
            padding: 10px 15px;
            border: 1px dashed gray;
        }
        .box li span {
            background-color: green;
            display: inline-block;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
        }
        .content {
            overflow: hidden;
            margin-top: 5px;
        }
        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }
        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 15px;
        }
        .current .content{
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/timg.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
pyh_yz
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JAVA WEB练习word教程
06-13
JAVA WEB 入门练习，文档有图，有步骤，有代码，0基础学习。
ejercicios-web:Web 练习作为 Web 编程主题的内容
07-12
【 ejercicios-web:Web 练习作为 Web 编程主题的内容】 在“ejercicios-web”项目中，我们可以看到一系列针对Web编程的学习资源，尤其是针对JavaScript语言的实践练习。这个存储库为初学者和进阶者提供了一个理想的...
get_post
(黎子)人生编码
02-22 643
在codecharge中如果表单的method为get则submit后$Redirect不起作用但是如果method为post就起作用了,WHY?
攻防世界——web新手练习01
Ferryman23333的博客
08-21 361
write up:直接在浏览器中输入IP和端口号，F12看源代码就行，也可以保存网页看源代码 难度：极易
攻防世界_WEB_新手练习区_DAY1
weixin_43898134的博客
04-07 405
第一题 view_source 题目描述：X老师让小宁同学查看一个网页的源代码，但小宁同学发现鼠标右键好像不管用了。 此题考查查看网页源代码的快捷键，我用的Chrome浏览器；Mac os 按 command+option+I，Win 按 ctrl+U。这样就可以找到FLAG了。 第二题 robots 题目描述：X老师上课讲了Robots协议，小宁同学却上课打了瞌睡，赶紧来教教小宁Robots协...
HTML试题及答案（总结）
热门推荐
采菊东篱下，Python满乾坤！
09-09 2万+
HTML练习题1（选择题）  一、选择 1.在一个框架的属性面板中，不能设置下面哪一项。（  ） A．源文件 ;     B．边框颜色 ;      C．边框宽度   D．滚动条 2.        下列哪一项表示的不是按钮。（   ） A．type="submit"        B．type="reset"           C．type="image"   D．type="b
Web有哪几个方面的特点？
u012788659的专栏
01-11 6596
一、Web是图形化的和易于导航的 　　Web可以在一页上同时显示色彩丰富的图形和文本的性能，并非常易于导航的，只需要从一个连接跳到另一个连接，就可以在各页各站点之间进行浏览了。 　　二、Web与平台无关 　　无论从Windows平台、UNIX平台、Macintosh还是别的什么平台，都可以通过浏览器访问WWW. 　　三、Web是分布式的 　　大量的图形、音频和视频信息可以放在不同的站点上
web练习题目
zhhhb1005的博客
03-13 1228
xff_referer 题目中提到了xff和referer，由于并不了解所以百度一下看看基本意思。 X-Forwarded-For（XFF）是用来识别通过HTTP代理或负载均衡方式连接到Web服务器的客户端最原始的IP地址的HTTP请求头字段。 HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，服务器因此可以获得一些信息用于处理。 ...
CTFSHOW WEB练习
qq_51558360的博客
05-30 1198
web1 分析：需要满足id=1000，同时intval($id) > 999要返回false（intval是将变量取整（注：如果变量是小数，那么变量小数位不能为0，如果为0，会被认为是整数）） 方法一：使用’1000’字符串（'1000’进行intval后还是1000） 方法二：125<<3（注8000>>3不行） 方法三：使用680|320 方法四：使用hex（16进制绕过） intval使用举例 <?php echo intval(42);
攻防世界WEB练习 | easyphp
不知名白帽的博客
10-27 5531
攻防世界WEB练习 | easyphp
web开发练习题pdf
06-10
一、单选题 1、CSS中ID选择符在定义的前面要有指示符(D)。 A.* B.. C.! D.# 2、下面哪一项是换行符标签?(C) A. B. C. D. 3、根据以下的HTML代码片段: body{color:blue; background:dimgray;...<ul>
fe-practice-courses:前端Web练习9-4
05-03
在"前端Web练习9-4"中，你可能需要结合CSS和JavaScript来增强网页的交互性和视觉效果，例如响应式设计、动画效果或者表单验证。 在"fe-practice-courses-master"这个文件夹中，你将找到整个练习项目的所有源代码...
自己做的web练习 service.rar
04-13
【标题】：“自己做的Web练习Service.rar” 这个压缩包文件“service.rar”很可能包含了作者自己编写的Web服务相关的练习代码。Web服务通常指的是通过HTTP协议提供的一种方式，使得不同的应用程序可以互相交互和...
胖东来企业文化指导手册.pptx
08-07
胖东来企业文化指导手册.pptx
[毕业设计]基于PHP与MySQL的学生成绩查看系统.zip
08-07
[毕业设计]基于PHP与MySQL的学生成绩查看系统
[毕业设计]PHP教育网站课程管理模块设计(源代码+论文).zip
08-07
[毕业设计]PHP教育网站课程管理模块设计(源代码+论文)
CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip
最新发布
08-07
CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。
[毕业设计]PHP开发的学生成绩在线查询系统.zip
08-07
[毕业设计]PHP开发的学生成绩在线查询系统
springboot548大学生社团活动平台.zip
08-07
以Java为开发技术，实现了一个大学生社团活动平台。大学生社团活动平台的主要实现功能包括：管理员：首页、个人中心、学生管理、社团申请信息管理、校园社团管理、社团活动管理、会员管理、活动参与管理、会员申请管理、系统管理，会员；首页、个人中心、社团申请信息管理、校园社团管理、社团活动管理、活动参与管理，学生；首页、个人中心、校园社团管理、社团活动管理、会员申请管理，前台首页；首页、社团申请信息、校园社团、社团活动、活动参与、会员申请、校园资讯、个人中心、后台管理、在线资讯功能，基本上实现了整个大学生社团活动平台的过程。 具体在系统设计上，采用了B/S的结构，同时，也使用Java技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的大学生社团活动平台。
web练习使用jjwt和Spring Security构建安全的API，完成校园网项目的认证和鉴权容易遇到的问题
06-03
在使用jjwt和Spring Security构建安全的API时，校园网项目的认证和鉴权可能会遇到以下问题： 1. 一些敏感信息泄露的问题：在使用jjwt和Spring Security时，要注意保护用户的敏感信息。... 2. token过期问题：在使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值