Web前端学习：三 - 练习
三六：风筝效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.d1{width: 200px;height: 200px;background: yellow;position: absolute;left: 50%;top: 50%;margin-top: -100px;margin-left: -100px ;}div{position: inherit;width: 50%;height: 50%;background: black;right: 100%;/*left:-50%;*/top: 100%;}</style></head><body><div class="d1"><div><div><div></div></div></div></div></body>
</html>
三六：布局基础练习-色块布局
要求：
使用PS工具对图片色块像素进行精准计算
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin:0;padding: 0;}.myd1{width: 599px;height: 297px;position: absolute;border: 1px solid black ;left: 50%;top: 50%;margin-left: -298.5px;margin-top: -148.5px;}.header{width: 100%; height: 58px;background: #fe0000;text-align: center;float: right;font-size: 20px;color: black;}.body .leftside{width: 121px; height: 180px;background: #808080;float: left;text-align: center;font-size: 20px;color: black;}.body .rightside .righttop{width: 478px; height: 55px;background: #cdcc00;float: left;text-align: center;font-size: 20px;color: black;}.body .rightbottom .left{width: 240px; height: 125px;background: #cccdec;float: left;text-align: center;font-size: 20px;color: black;}.body .rightbottom .right{width: 238px; height: 125px;background: #ccee03;float: left;text-align: center;font-size: 20px;color: black;}.foot{width: 100%; height: 59px;background: #d4cfc9;float: left;text-align: center;font-size: 20px;color: black;}</style></head><body><div class="myd1"><div class="header">header</div><div class="body"><div class="leftside">leftside</div><div class="rightside"><div class="righttop">righttop</div><div class="rightbottom"><div class="left">left</div><div class="right">right</div></div></div></div><div class="foot">foot</div></div></body>
</html>三七：布局基础练习-色块高级布局
opacity：0 - 1；
0=>100%透明度，1代表不透明
三八：登录页面制作
1：
border-redius：圆角
border-top-left-redius：10px
border-redius：10 —> 全部
border-redius：10 20 —>左上=右下=10
右上=左下=20
border-redius：10 20 30 —>左上=10
右上=左下=20
右下=30
border-redius：10 20 30 40=左上 右上 右下 左下
2：
加粗
<b></b>
<strong></strong>
3：
首行缩进–text-indent:
text-indent: 48px
4：
居中–margin: 0 auto
5：
placeholder=“”
等同于value，输入框中的内容
区别：
点击输入框，value内容不会自动消失
点击输入框，placeholder内容会自动消失
6：
outline：
边框的线，点击输入框时出现的边框线
outline-color: red; – 设置颜色
outline: none; – 没有线
7：
text-decoration: none;
下划线，none，清除下划线，用于跳转链接
<!DOCTYPE HTML>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin:0; padding:0; text-decoration: none;}html{height: 100%;}body{background: url("img/bg.jpeg") no-repeat center;background-size: cover;height: 100%;}.login{width: 677px; height: 916px; background: white;position: absolute;left: 50%;top: 50%; margin-top: -458px; margin-left: -338.5px;border-radius: 10px;}.login .logintext{font-size: 50px; line-height: 50px; height: 50px;text-align: center;margin-top: 90px;}.login .username{font-size: 18px; line-height: 18px; height: 18px;margin-top: 80px;text-indent: 84px;}.login .usernode{height: 80px; width: 526px; margin: 0 auto;border-bottom: 3px solid #dbdbdb;background: url("img/user_login.gif") no-repeat 17px 30px ;}.login .usernode .userinput{height: 100%; width: 100%; float: left;margin-left: 58px; line-height: 80px;border: none; outline: none;font-size: 22px; color: #aeaeae ;}.login .password{margin-top: 40px;}.login .passnode{background: url("img/pass_login.gif") no-repeat 17px 30px;}.login .forget{font-size: 19px; height: 9px; line-height: 19px;}.login .forget a{color: #676767; font-size: 20px;float: left; margin-left: 510px; margin-top: 20px;}.loginbutton{width: 526px; height: 68px; margin: 0 auto; margin-top: 49px;line-height: 68px; text-align: center;font-size: 21px; color: black;background: url("img/bg-button.gif") no-repeat repeat;border-radius: 34px;}.login .three{text-align: center; line-height: 20px;height: 20px; color: #676767;margin-top: 78px;}.login .Icon{margin-top: 39px; text-align: center; }.login .Icon img{margin: 0 7px;}.login .logon{margin-top: 45px;}.login .three a{color: #343724;}</style></head><body><div class="login"><div class="logintext"><strong>登录</strong></div><div class="username">用户名</div><div class="usernode"><input type="text" placeholder="请输入用户名" class="userinput" /></div><div class="username password">密码</div><div class="usernode passnode"><input type="password" placeholder="请输入密码" class="userinput" /></div><div class="forget"><a href="www.wjmm.com">忘记密码？</a></div><div class="loginbutton">登录</div><div class="three"><a href=www.three.com"">第三方登录</a></div><div class="Icon"><a href="#"><img src="img/wx.gif"/></a><a href="#"><img src="img/qq.gif"/></a><a href="#"><img src="img/wb.gif"/></a></div><div class="three logon"><a href="www.three.com">立即注册</a></div></div></body>
</html>相关文章：
Web前端学习：三 - 练习
三六：风筝效果 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style type"text/css">*{margin: 0;padding: 0;}.d1{width: 200px;height: 200px;background: yellow;position…...
面试题：Android 中 Intent 采用了什么设计模式？
答案是采用了原型模式。原型模式的好处在于方便地拷贝某个实例的属性进行使用、又不会对原实例造成影响，其逻辑在于对 Cloneable 接口的实现。 话不多说看下 Intent 的关键源码： // frameworks/base/core/java/android/content/Intent.java public cla…...
Java数据类型与变量
个人主页：平行线也会相交 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 平行线也会相交 原创 收录于专栏【JavaSE_primary】 文章目录字面常量数据类型变量整型变量字节型变量浮点数变量双精度浮点数单精度浮点数字符型变量布尔型变量空常量nu…...
Python为CANoe工程添加/删除DBC文件
前面文章我们对于通过COM来实现打开CANoe、导入CANoe配置工程、导入执行文件、启动CANoe软件和执行脚本；但是这只能完成最基本的功能调用，在实际得到使用过程中，特别是各家在推的CI/CD以及平台化，仅仅是实现这些功能是完全不够用的；比如dbc的添加和删除，这是我们非常必要…...
不同的产品经理特征和需要的能力
产品经理是一个管家，需要和各方沟通推动产品各个决策进展。 每天早上看看线上用户数据、看下今天要安排任务，接着就是和各方开会讨论推动产品实现。每天穿插于与 UI、用户以及完成自己的 todolist 中循环。如果公司体制完善，还要和运营、数据…...
webpack之处理样式资源
处理样式资源 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 #介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后…...
Golang 接口笔记
基本介绍接口是一个数据类型，可以定义一组方法，但都不需要实现。并且interface中不能包含任何变量。到某个自定义类型要使用的时候，再根据具体情况把这些方法实现出来语法type 接口名 interface {method1(参数列表) 返回值列表method2(参数列…...
[计算机网络(第八版)]第二章 物理层（章节测试/章节作业）
章节作业 带答案版 选择题 (单选题)双绞线是用两根绝缘导线绞合而成的，绞合的目的是（ ）。 A. 减少干扰 B. 提高传输速度 C. 增大传输距离 D. 增大抗拉强度(单选题)在电缆中采用屏蔽技术可以带来的好处主要是（ ）。 A…...
 类)
[iOS 理解] Swift Runtime (1) 类
Warm up 先看一段代码： import ObjectiveCclass Obj {var x: Double 0 }let v: NSObjectProtocol Obj() as! NSObjectProtocol let result v.isKind(of: Obj.self) let size class_getInstanceSize(Obj.self)我们有一个没有继承 NSObject、没有遵循 NSObjectP…...
ASEMI低压MOS管20N06参数，20N06体积，20N06大小
编辑-Z ASEMI低压MOS管20N06参数： 型号：20N06 漏极-源极电压（VDS）：60V 栅源电压（VGS）：20V 漏极电流（ID）：20A 功耗（PD࿰…...
常见前端基础面试题（HTML,CSS,JS）（四）
作用域和作用域链的理解 作用域 （1）全局作用域 最外层函数和最外层函数外面定义的变量拥有全局作用域所有未定义直接赋值的变量自动声明为全局作用域所有window对象的属性拥有全局作用域全局作用域有很大的弊端，过多的全局作用域变量会污染…...
RabbitMQ发布确认模式
目录 一、发布确认原理 二、发布确认的策略 （一）开启发布确认的方法 （二）单个确认模式 （三）批量确认模式 （四）异步确认模式 （五）如何处理异步未确认消…...
零基础的人如何入门 Python ？看完这篇文章你就懂了
第一部分：编程环境准备 零基础入门Python的话我不建议用IDE，IDE叫集成开发环境，这东西一般是专业程序员用来实战开发用的，好处很多，比如：调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测…...
Atcoder abc257 E
E - Addition and Multiplication 2 题意: 给你一个数字n表示你现在拥有的金额 然后给你1~9每个经营额所需要的成本, 设总经营额为x, 当前使用的经营额为y, 则每一次使用经营额时都有x10*xy 问, 如何在使用不大于成本数量的金额下, 使得经营额最高 例如: 5 5 4 3 8 1 6 7 …...
模拟退火算法改进
import numpy as np import matplotlib.pyplot as plt import math import random from scipy.stats import norm from mpl_toolkits.mplot3d import Axes3D # 目标函数 def Function(x, y): return -20 * np.exp(-0.2*np.sqrt(0.5*(x*xy*y)))\ -np.exp(0.5*(n…...
SpringBoot+HttpClient+JsonPath提取A接口返回值作为参数调用B接口
前言 在做java接口自动化中，我们常常需要依赖多个接口，A接口依赖B，C，D接口的响应作为请求参数；或者URL中的参数是从其他接口中提取返回值作获取参数这是必不可少的。那么怎么实现呢？下面就来介绍多业务依赖…...
JUC 之 CompletableFuture
——CompletableFuture Future Future 接口（FutureTask 实现类） 定义了操作异步任务执行的一些方法，如获取异步的执行结果、取消任务的执行、判断任务是否被取消、判断任务执行是否完毕例如： 主线程让一个子线程去执行任务&…...
7-vue-1
谈谈你对MVVM的理解 为什么要有这些模式，目的：职责划分、分层（将Model层、View层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上 MVC模式 代表：Backbone underscore jquer…...
OpenAPI SDK组件介绍
背景 公司成立以来，积累了数以万计的可复用接口。上层的SaaS业务，原则上要复用这些接口开发自己的业务，为了屏蔽调用接口的复杂性，基础服务开发了apisdk组件，定义了一套声明OpenAPI的注解、注解解析器，实例…...
【Java】Synchronized锁原理和优化
一、synchronized介绍 synchronized中文意思是同步，也称之为”同步锁“。 synchronized的作用是保证在同一时刻， 被修饰的代码块或方法只会有一个线程执行，以达到保证并发安全的效果。 synchronized是Java中解决并发问题的一种最常用的方法…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
19c补丁后oracle属主变化，导致不能识别磁盘组
补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...