web前端实验2

已于 2023-04-23 13:54:56 修改
阅读量80 收藏
点赞数
文章标签： 前端 css html
于 2023-04-23 13:51:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BB4UXYQ/article/details/130312733
版权

实验2

1. 应用html标签和css完成如下所示页面效果，图片见附件。

在这里插入图片描述

  1. 说明：
    1. 内容相对于浏览器居中,宽860px
    2. 鼠标移动至列表项上，显示背景色#F8F8F8
    3. 分割线2px solid #ccc，每项高130px
    4. 第一行文字：20px 黑体
    5. 标签：字颜色#cccc00 16px
    6. 标签项：背景颜色#eee 字体颜色#999 文字大小14px
    7. 第三行文字：边框1px solid #eee; 圆角半径25px
    8. 其他样式可根据界面效果进行设置
  2. 代码
<template>
  <div class="body">
    <div class="c1">
      <div class="c4">
        <span class="sp1">不只有看肤色挑唇色 选对口红衣服更美</span>
        <div class="c5">
          <span class="sp2">标签</span>&nbsp;&nbsp;<span class="sp3">唇膏</span>&nbsp;&nbsp;<span class="sp3">衣服</span>&nbsp;&nbsp;<span class="sp3">粉色</span>&nbsp;&nbsp;<span class="sp3">化妆</span>&nbsp;&nbsp;<span class="sp3">美容美体</span>
        </div>
        <div class="c6">
          &nbsp;&nbsp;<span class="sp4">悦己self</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="sp4">2016-10-8</span>
        </div>
      </div>
    </div>
    <div class="c2">
      <div class="c4">
        <span class="sp1">学画红唇妆 让你的女王范分分钟秒杀路人</span>
        <div class="c5">
          <span class="sp2">标签</span>&nbsp;&nbsp;<span class="sp3">唇膏</span>&nbsp;&nbsp;<span class="sp3">衣服</span>&nbsp;&nbsp;<span class="sp3">粉色</span>&nbsp;&nbsp;<span class="sp3">化妆</span>&nbsp;&nbsp;<span class="sp3">美容美体</span>
        </div>
        <div class="c6">
          &nbsp;&nbsp;<span class="sp4">毛戈平形象艺术学校</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="sp4">2016-10-8</span>
        </div>
      </div>
    </div>
    <div class="c3">
      <div class="c4">
        <span class="sp1">无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</span>
        <div class="c5">
          <span class="sp2">标签</span>&nbsp;&nbsp;<span class="sp3">唇膏</span>&nbsp;&nbsp;<span class="sp3">衣服</span>&nbsp;&nbsp;<span class="sp3">粉色</span>&nbsp;&nbsp;<span class="sp3">化妆</span>&nbsp;&nbsp;<span class="sp3">美容美体</span>
        </div>
        <div class="c6">
          &nbsp;&nbsp;<span class="sp4">八公举</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="sp4">2016-10-8</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>


.body{
  /*宽度设置为860px*/
  width: 860px;
  /*设置居中*/
  margin: 0 auto;
}
.c1:hover{
  /*鼠标移入背景变色*/
  background-color: #F8F8F8;
}

/*把图片设置为背景，并靠左，设置不重复*/
.c1{
  /*连接到图片*/
  background-image: url(../images/4.jpg);
  /*若图片未沾满空间，不重复*/
  background-repeat: no-repeat;
  /*图片占据空间的大小：20%*/
  background-size: 20%;
  /*行高度*/
  height: 130px;
  /*上边框样式*/
  border-top:2px solid #ccc;
  /*下边框样式*/
  border-bottom: 2px solid #ccc;
}
.c2:hover{
  /*鼠标移入变色*/
  background-color: #F8F8F8;
}
.c2{
  background-image: url(../images/5.jpg);
  background-repeat: no-repeat;
  background-size: 20%;
  /*设置图片y轴居中*/
  background-position-y: center;
  height: 130px;
  /*下边框样式*/
  border-bottom: 2px solid #ccc;
}
.c3:hover{
  background-color: #F8F8F8;
}
.c3{
  background-image: url(../images/6.jpg);
  background-repeat: no-repeat;
  background-size: 20%;
  background-position-y: center;
  height: 130px;
}
.c4{
  /*内容左边距200px*/
  margin-left: 200px;
  /*内容上边距10px*/
  margin-top: 10px
}
.c5{
  /*标签上边距20px*/
  margin-top: 20px
}
.c6{
  /*用户名以及发布时间上边距10px*/
  margin-top: 10px
}
.sp1{
  /*标题字体大小*/
  font-size: 20px;
  /*标题字体*/
  font-family: 黑体;
}
/*标签样式*/
.sp2{
  /*标签字体颜色*/
  color: #cccc00;
  /*标签字体大小*/
  font-size: 16px;
}
.sp3{
  /*标签字体颜色*/
  color: #999;
  /*标签字体大小*/
  font-size: 14px;
  /*tag背景颜色*/
  background-color: #eee;
}
.sp4{
  border:1px solid #eee;
  /*设置用户姓名盒子圆角*/
  border-radius: 25px;
  font-size: 14px;
  color: #1440d1;
}
</style>

2. 完成如图所示界面布局和显示效果

在这里插入图片描述

  1. 代码
<template>
  <body id="container">
      <div id="content">

        <div id="header">
          <span id="firstSpan">首页</span>
          <span>新闻</span>
          <span>体育</span>
          <span>娱乐</span>
          <span>财经</span>
          <span>科技</span>
          <span>手机</span>
          <span>数码</span>
        </div>

        <div id="news">
          <div id="new1">
            <div id="newTitle">
              娱乐新闻
            </div>

            <ul class="new1Content">
              <li>
                <span class="content">xxxxxxxxxxxxxxxxxxxxxxxx</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">《碟中谍5》曝外景地花絮</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">灾难发生后该不该禁播娱乐节目</span>
                <span class="time">2018-10-1</span>
              </li>
            </ul>

          </div>
          <div id="new2">
            <div id="newTitle">
              娱乐新闻
            </div>

            <ul class="new1Content">
              <li>
                <span class="content">香港已没有黑帮 大家都不想在里面混</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">《碟中谍5》曝外景地花絮</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">灾难发生后该不该禁播娱乐节目</span>
                <span class="time">2018-10-1</span>
              </li>
            </ul>

          </div>
          <div id="new3">
            <div id="newTitle">
              娱乐新闻
            </div>

            <ul class="new1Content">
              <li>
                <span class="content">香港已没有黑帮 大家都不想在里面混</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">《碟中谍5》曝外景地花絮</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">灾难发生后该不该禁播娱乐节目</span>
                <span class="time">2018-10-1</span>
              </li>
            </ul>

          </div>
          <div id="new4">
            <div id="newTitle">
              娱乐新闻
            </div>

            <ul class="new1Content">
              <li>
                <span class="content">香港已没有黑帮 大家都不想在里面混</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">《碟中谍5》曝外景地花絮</span>
                <span class="time">2018-10-1</span>
              </li>
              <li>
                <span class="content">灾难发生后该不该禁播娱乐节目</span>
                <span class="time">2018-10-1</span>
              </li>
            </ul>

          </div>
          </div>
        </div>
  </body>
</template>

<style scoped>

#header{
  /*顶部导航栏宽度：占父黑子百分之80*/
  width: 80%;
  /*顶部导航栏高度：25px*/
  height: 25px;
  /*设置顶部导航栏背景色*/
  background-color: #aaaaaa;
  /*设置顶部导航栏位置*/
  margin: 0 auto;
}
#news{
  /*新闻部分占父盒子宽度80#*/
  width: 80%;
  /*高度800px*/
  height: 800px;
  /*居中*/
  margin: 0 auto;
}


#header span{
  display: inline-block;
  margin: auto 15px;
  height: 25px;
  color: white;
  text-decoration: underline;
  padding-top: 3px;
}
/*鼠标移入变为红色*/
#header span:hover{
  color: red;
}

.content{
  color: black;
  font-size: 8px;
  /*行高30px*/
  line-height: 30px;
}

.time{
  color: #aaaaaa;
  margin-right: 10px;
  /*设置左浮动*/
  float: right;
}

li{
  list-style: none;
}
#new1, #new2, #new3, #new4{
  display: inline-block;
  background-color: white;
  width: 50%;
  margin: 20px auto;
}

#newTitle{
  font-size: 18px;
  margin-left: 20px;
  width: 40%;
}
</style>

2. 完成如下表单界面设计，图片见附件。

在这里插入图片描述
2. 代码

<template>
    <div id="container">
      <div id="login">
        <input id="username" type="text" placeholder="用户名/邮箱地址/手机号">
        <input id="password" type="password" placeholder="填写密码">
        <div id="rememberPSW">
          <input type="radio" name="rememberPSW" value="remember">记住密码
        </div>
        <input id="button" type="button">
      </div>
      
      <div id="others">
        <div id="othersLogin">合作网站账号登陆：</div>
        <img src="../images/weixin.png" alt="">
        <img src="../images/qqlogin.png" alt="">
        <img src="../images/taobao.png" alt="">
      </div>
    </div>
</template>

<style scoped>
#container{
  background-color: #fae9e9;
  width: 350px;
  height: 450px;
  margin: 0 auto;
}

#button{
  height: 44px;
  width: 262.2px;
  margin: 20px auto;
  background: url("../images/but.jpg");
}

#login{
  display: flex;
  flex-direction: column;
  border-bottom: 1.5px solid rgba(213, 212, 212, 0.98);
}

#username, #password{
  height: 40px;
  width: 255px;
  margin: 20px auto;
  border: 1.2px solid #aaaaaa;
}

#username{
  background-image: url("../images/zhanghao.jpg");
  background-repeat: no-repeat;
}

#password{
  background-image: url("../images/mima.jpg");
  background-repeat: no-repeat;
}

#username::placeholder, #password::placeholder{
  padding-left: 40px;
}

#rememberPSW{
  width: 262.2px;
  margin: 20px auto;
}

#others{
  display: flex;
  flex-direction: row;
  width: 262.2px;
  margin: 20px auto;
}

#othersLogin{
  margin-top: 15px;
}
</style>
BB4UXYQ
关注
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
Web前端开发技术（第2版）储久良课后实验材料及源代码
07-15
《Web前端开发技术（第2版）》是储久良教授编著的一本关于Web前端开发的教科书，此压缩包包含该书的课后实验材料与源代码，是学习Web前端技术的重要辅助资源。储久良教授在Web开发领域有着深厚的理论基础和丰富的...
山东菏泽家乡网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
wx___BJ050106的博客
12-26 867
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
web前端开发实验——1
qq_46476515的博客
10-15 1304
web前端开发应用作业 1
web前端开发实验——2
qq_46476515的博客
10-16 2123
web前端开发实验——2
Web前端2
clshz_hwk的博客
10-28 1704
Web前端学习
web前端开发实验——4
qq_46476515的博客
10-17 772
web前端开发实验——4
web前端实验一
Alfafar的博客
04-26 1944
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-Com
web前端 校园网站设计
m0_74394367的博客
10-12 3234
web前端 校园网站设计
web前端开发实验——5
qq_46476515的博客
10-17 1152
web前端开发实验——5
web前端开发实验——3
qq_46476515的博客
10-16 1492
web前端开发实验——3
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
web前端实验项目叮叮书店.zip
12-20
web前端实验项目叮叮书店
web前端开发课后实验六答案
01-24
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
web扩展
x737510的博客
10-10 604
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
前端开发攻略---8种方法实现在浏览器中跨页面通信
最新发布
nibabaoo的博客
10-15 1084
浏览器实现跨标签页通信的多种方式
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 495
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 614
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
HTML与Web前端开发工具基础实验全指南
《HTML实验指导书》是一份针对初学者设计的基础性与综合性实验教材，旨在帮助学习者深入理解和掌握Web前端技术基础。这份教程共分为两部分，涵盖了HTML、CSS和JavaScript的核心内容，以及相关工具的使用。 在第一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值