每日总结 4.11
今天进行了虚拟售卖机的页面规划和数据更新。学习了页面视频的实现，为之后的广告做准备。
实现了两个虚拟售卖机的购买：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="toolse.Tll"%> <%@page import="java.util.*"%> <%@ page import="java.sql.*"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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>用div做视频播放页面</title> </head> <style> * { padding: 10px; margin: 0px; } .box { width: 1200px; height:550px; /* background-color: red; */ } .bigcontent { width: 100%; height: 500px; box-sizing: border-box; /* 盒子类型选择border-box */ /* 因为我们一旦设置盒子的padding-bottom、padding-bottom、 反正是padding之类的， 就会把我们的盒子撑大，所以我们得将盒子的类型设置成 box-sizing: border-box */ } .smallcontent{ width: 100%; height: 50px; /* background-color: greenyellow; */ box-sizing: border-box; /* 整体内容区域与div之间保持一定的距离，用padding */ padding-left: 30px; padding-right: 40px; /* 50除以2-36除以2=7 */ padding-top: 7px; padding-bottom:7px; } video { width: 100%; height: 100%; /* 让视频内容布满整个盒子 */ object-fit: fill; } a { color:rgba(201, 203, 214, 1); font-size: 10px; /* 去掉下划线 */ text-decoration: none; /* 如果你不设置每个a标签的margin-right，那么每个a标签就会离的很近， 所以对某个标签设置margin-right，相当于设置标签之间的间距 */ margin-right: 40px; /* 除表单之外，行内块级元素，设置宽高无效。a标签就是行内块级元素。*/ /*所以想要对a标签设置宽高，需要将a标签设置成内联且块级元素 */ /* 内连元素 display: inline*/ /* 内联且块级元素 display: inline-block */ display: inline-block; width: 50px; } /* 伪类选择器，例如a:hover 例如div:hover 例如img:hover代表鼠标悬停在谁身上的时候，突出它的颜色，字体等*/ a:hover { color: red; /* font-size: 10px; */ } .close { /* a标签里面我们已经设置过每个a标签的margin-right: 40px,这里我们还想要“关闭弹幕”这个a标签离其它a标签远一点的话， 我们就得单独给“关闭弹幕”这个a标签再设置 margin-left了，这个margin-left与每个a标签都设置过的margin-right不冲突， 但是注意设置margin-left值的时候，不能设置太大，否则“关闭弹幕”这个a标签可能就会和输入框挨得太紧了*/ margin-left: 250px; margin-right: 1px; } /* 表单元素设置宽高有效，其他行内元素设置宽高无效 */ .input { width: 160px; height: 28px; /* 去除输入框的外边的轮廓线条 */ outline: none; /* 因为输入框，默认是自带边框的，那么我们这里就给他设置 */ border: none; padding: 0; /*我们希望输入框里面的内容与输入框最左边是差不多紧挨着的，我们就设置它的padding-left的值*/ padding-left: 5px; padding-right: 10px; background-color: rgba(rgb(3, 3, 3), green, blue, alpha) } .button { background-color: rgba(96, 99, 112, 1); background-image: none; margin-left: -4px; height: 40px; /* 设置边框四个角的弧度border-radius: 5px; */ border-radius: 5px; } </style> <body> <div class="box"> <!-- 放视频 --> <div class="bigcontent"> <!-- muted:视频内容静音 --> <video controls loop muted src="video/sss.mp4"></video> </div> <!-- 放底边图标 --> <div class="smallcontent"> <a class="a1" href="#">176评论</a> <a href="#">166赞同</a> <a href="#">收藏</a> <a href="#">分享</a> <a href="#">...</a> <a class="close" href="#">关闭弹幕</a> <!-- 输入框 --> <!-- 输入框中的提醒文字，我们需要用placeholder这个属性写，要背下来 --> <input class="input" type="text" placeholder="登陆可发送弹幕"> <!-- 按钮 --> <button class="button" type="submit" >发送</button> </div> </div> </body> </html>
以上的代码是实现页面的视频效果。
