web实验一

已于 2023-04-18 20:18:09 修改
阅读量48 收藏
点赞数
文章标签： css 前端 html
于 2023-04-18 19:16:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56993984/article/details/130228830
版权

 1．应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。

说明：

  • 内容相对于浏览器居中，图标见附件disc.jpg
  • 盒子边框1px solid #ccc，内边距20px
  • 文本字体颜色#122e67，文本高度30px
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 480px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
        li {
            list-style: none;
            list-style-image: url('./images1/disc.jpg');
            color: #122e67;
            line-height: 30px;
            border-bottom: 1px dotted #ccc;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>要装自己的粮食</li>
            <li>要装自己的粮食</li>
            <li>本质区别</li>
            <li>意味深长</li>
            <li>60周年</li>
            <li>回应</li>
        </ul>
    </div>
</body>
</html>

2.完成如下图所示界面设计效果

说明：

  • 可考虑基于列表进行设计，居中显示
  • 将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
  • 上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
  • 所需图片见附件，图片宽度154px，左间距60px
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box {
        margin: 0 auto;
        font-size: 0;
       }
        li {
            height: 200px;
            width: 216px;
            list-style: none;
            display: inline-block;
            padding-top: 20px;
            padding-left: 20px;
            border: 4px solid #ccc;
            border-right: 2px solid #ccc;;

        }

        .top {
            font-size: 18px;
            color: #000;
        }

        .bottom {
            font-size: 14px;
            color: #64c333;
        }

        img {
            width: 154px;
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <div class="top">抱抱果新首发</div>
                <div class="bottom">抱一下就幸福</div>
                <img src="./images1/1.jpg">
            </li>
            <li>
                <div class="top">冰箱节</div>
                <div class="bottom">智由随风</div>
                <img src="./images1/2.jpg">
            </li>
            <li>
                <div class="top">全球精选</div>
                <div class="bottom">旗舰精品享你所想</div>
                <img src="./images1/3.jpg">
            </li>
            <li>
                <div class="top">葡萄酒专场</div>
                <div class="bottom">原装品质保证</div>
                <img src="./images1/4.jpg">
            </li>
            <li>
                <div class="top">手机专场</div>
                <div class="bottom">原装正品</div>
                <img src="./images1/5.jpg">
            </li>
        </ul>
    </div>

</body>

</html>

三、完成下图所示的静态网页制作

说明：

  • 可考虑基于列表进行设计，居中显示
  • 列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
  • 每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
  • “原创作品”加粗，颜色#FF5584
  • 所需图片见附件，图片宽度250px，高度188px
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;
            width: 250px;
            height: 320px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }
        img :first-child{
            width: 250px;
            height: 188px;
        }
        .one {
            font-size: 14px;
            color: #666;
            line-height: 32px;
        }
        .other {
            font-size: 12px;
            color: #66667F;
            line-height: 25px;
        }
        .origin {
            font-weight: bold;
            color: #FF5584;
        }
        .num {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="./images1/pic1.jpg">
            <div class="one">动画便利店X果壳网《西门子洗碗机...</div>
            <div class="other">
                <span class="origin">原创作品</span>-影视-Motion Graphic
                <br>
                2小时前上传
                <br>
                <div>
                    <span class="num">1284</span>
                    &nbsp;
                    人气/<span class="num">11</span>
                    &nbsp;
                    评论/<span class="num">47</span>
                    &nbsp;
                    推荐
                </div>
                <img src="./images1/play.png">

            </div>
        </li>
        <li>
            <img src="./images1/pic2.gif">
            <div class="one">动画便利店X视知《到底怎么发...</div>
            <div class="other">
                <span class="origin">原创作品</span>-影视-Motion Graphic
                <br>
                3小时前上传
                <br>
                <div>
                    <span class="num">1569</span>
                    &nbsp;
                    人气/<span class="num">50</span>
                    &nbsp;
                    评论/<span class="num">125</span>
                    &nbsp;
                    推荐
                </div>
                <img src="./images1/play.png">
        </li>
    </ul>
</body>

</html>

好多头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web实验超详细步骤
qq_56628318的博客
05-31 2229
web网页详细制作
java web实验_javaweb实验报告
weixin_32188111的博客
02-12 3701
javaweb实验报告 甘肃政法学院本科生实验报告(一)姓名:学院:计算机科学学院专业: 计算机科学与技术班级实验课程名称:实验日期:2012 年 04 月 9 日指导教师及职称实验成绩:开课时间：2012 学年 二 学期甘肃政法学院实验管理中心印制实验题目 Java Web 项目开发环境搭建于简单开发 Jsp 指令标记与动作标记 Jsp 内置对象 小组合作 否姓名 班级 学 号一、实验目的1、 ...
web 实验一 HTML基本标签实验
qq_62377885的博客
05-15 820
通过创建HTML5网页，验证form内多种元素标签及其属性的作用及意义。
web实验1
NoMorningstar的博客
09-06 1562
万维网是如何工作的 我们想象一个这样的场景。你现在在家想买点生活用品，上京东超市逛了逛，家里的手机、电脑就是你的客户端。另一端是服务器，就像超市或商店。超市与你家之间有一条路，web就是这条路。 客户端是典型的Web用户入网设备（比如，你连接了Wi-Fi的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 IE 和 Chrome的浏览器）。 服务器是存储网页，站点和应用的计算机。当...
实验一 Java Web 入门
InterestAndFun的博客
03-16 1004
2、熟悉Tomcat服务器的目录，学习如何设置Web服务目录。并在其目录下运行一个简单的JSP页面；1、了解并学会配置MyEclipse集成开发环境，学会在其环境下创建工程并发布运行一个JSP程序；3、熟悉和掌握HTML中表单的设计和提交。
Web实验一 Servlet技术及应用
weixin_45984250的博客
04-22 4701
一、实验预习内容 Web页面中都可以使用哪些方式来发送HTTP请求？ (1)用户在浏览器的地址栏中输入URL并按回车键; (2)用户点击了HTML页面中的超链接; (3)用户在HTML页面中添写一个表单并提交. GET与POST两种请求方式有什么区别？分别适用于什么情况？ (1)GET方法用来检索资源.它的含义是”获得由该URI标识的资源”.GET方法请求的资源通常是静态资源.使用GET也可以请求动态资源,但一般要提供少量的请求参数. (2)POST方法用来向服务器发送需要处理的数据,它的含义是”将
java web 实验1 环境配置及第一个页面——登录
weixin_43674808的博客
10-13 1502
java web 实验1 环境配置及第一个页面——登录 一、实验目的 了解 JSP 的特点。 2. 配置 JSP 开发环境。 3. 熟悉 JSP 的开发环境。 4. 掌握网页设计技巧，学会根据需求设计网页。 二、实验要求 理解 JSP 编程特点及编程结构，编制基本登录页面程序。 2. 编写登录页面的界面程序并做验证。 三、实验内容 1.使用基本语法建立登录页面，包括：文本框、标签、按钮 2.建立登录页面，包括：用户名及其必填验证，口令及其必填验证。注：暂时先不实现数据库相关操作，用 Eclipse 开发
java web实验一
weixin_74430903的博客
03-21 1601
（1）在Web项目中创建Servlet02类，继承HttpServlet类，重写其doGet()和doPost()方法，并在这两个方法中分别编写输出不同内容的代码。(2)在doPost方法中调用doGet方法，在doGet方法中实现统计网站被访问次数的功能，用户每请求一次servlet，使访问次数times加1。（2）在doGet()方法中，使用HttpServletResponse对象的setContentType()方法将浏览器编码改为utf-8。（5）确保中文文本正常显示。
java web实验报告_JavaWeb实验报告
weixin_28712661的博客
02-21 5292
实验一开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法；4、掌握在Tomcat中手工创建可执行程序的方法；二、实验内容及要求本次实验内容分为两部分：1、验证部分1)通过手动的方式在Tomcat中建立工程my，在该工程...
实验一 Web开发基础
Lucky的博客
09-25 1029
php编程基础之实验一——web开发基础
WEB实验1
08-03
通过这个实验，学生能深入理解JSP、Servlet和JDBC在Web应用程序开发中的应用，掌握如何通过Java技术与数据库交互，实现用户登录验证、信息添加和查询等功能，同时强化了代码封装和Web开发实践能力。
web实验一：制作登录界面
06-03
其中需要插入一张图片命名为img
va Web 实验 1
06-12
va Web 实验 1 本实验的目的是搭建 Java Web 开发平台，编写简单的 Servlet 和 JSP 页面，了解和掌握 Servlet 和 JSP 的编写和运行。通过实践，比较 Servlet 与 JSP 的区别和联系，体会动态页面的含义。 一、知识...
web实验5JavaScript综合实验
12-07
"web实验5JavaScript综合实验" 本实验涵盖了三个主要部分：弹出广告页面、动态时间显示和图片广告滚动。下面将详细解释每个部分的实现原理和技术要点。 弹出广告页面 在这个实验中，我们使用JavaScript来实现弹出...
Web实验报告一.docx
03-06
本实验报告主要针对青岛科技大学Web程序设计课程的一次上机实验，旨在让学生熟悉Servlet的开发，理解并掌握Servlet的核心概念及其在实际应用中的操作。实验内容包括了Servlet的基本使用，如HttpServlet的继承，...
css实现水滴效果图
yinge0508的博客
08-12 1149
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 335
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
【playwright篇】CSS 选择器 详细用法
最新发布
qadnkz的专栏
08-14 840
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
CSS（层叠样式表）
Chujun123528的博客
08-09 1243
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值