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中解决并发问题的一种最常用的方法…...
多模态学习：结合文本和图像的旋转判断
多模态学习：结合文本和图像的旋转判断 1. 引言 你有没有遇到过这样的情况：拍了一张带文字的图片，结果发现方向不对，需要手动旋转才能正常阅读？传统的图像旋转判断方法往往只依赖视觉特征，对于包含文字的图…...
在大厂工作，一旦开窍后，你会爽死…
在职场尤其是大厂里，沟通能力往往比硬实力更能决定你的发展节奏。很多时候，同样一件事，不同的说法，会带来完全不同的结果。下面这8个高频职场场景，对应的高情商话术，帮你轻松化解尴尬、刷好感，还…...
springboot+vue基于web的电脑配件商城的设计系统
目录 同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分技术架构设计要点特色功能实现路径安全防护措施扩展性考虑 项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作 同行可拿货,招校园代理 ,本人源头供货商 系统功能模块…...
FigmaCN：解决Figma英文界面障碍的设计师专属中文方案
FigmaCN：解决Figma英文界面障碍的设计师专属中文方案 【免费下载链接】figmaCN 中文 Figma 插件，设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 作为一名设计师，您是否曾因Figma全英文界面而减慢工作流程&…...
Discord社群运营神器：用AI自动回复提升活跃度的完整指南
Discord社群运营神器：用AI自动回复提升活跃度的完整指南 在数字社交时代，Discord已经从一个游戏语音工具成长为全球最受欢迎的社群平台之一。无论是Web3项目、开源社区还是兴趣小组，Discord都成为了连接成员的核心枢纽。但作为社群运营者&…...
如何用Sunshine打造你的终极游戏串流服务器：从零开始的完整指南
如何用Sunshine打造你的终极游戏串流服务器：从零开始的完整指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上畅玩PC游戏大作吗？Sunshin…...
终极PDF批量处理指南：如何用PDF Arranger自动化文档操作
终极PDF批量处理指南：如何用PDF Arranger自动化文档操作 【免费下载链接】pdfarranger Small python-gtk application, which helps the user to merge or split PDF documents and rotate, crop and rearrange their pages using an interactive and intuitive gra…...
PDF-Parser-1.0行业报告：市场分析与技术趋势
PDF-Parser-1.0行业报告：市场分析与技术趋势 1. 引言 每天都有成千上万份行业报告、白皮书和研究文档以PDF格式在企业间流转。这些文档蕴含着宝贵的市场洞察、技术趋势和商业机会，但手动提取和分析这些信息需要耗费大量时间和精力。PDF-Parser-1.0的出…...
程序实现环境温度对传感器的误差补偿，不同温度下测量精度一致，颠覆温漂难题。
无论你是做工业传感还是消费电子，只要你测物理量（电压、电流、压力、流量），温度就是精度的头号杀手。今天我们用 Python 打造一套自适应温度补偿系统，让仪器在不同温度下“不忘初心”。一、 实际应用场景描述 (Scenari…...
Pixel Epic智识终端入门：动态卷轴输出中断恢复与断点续写功能
Pixel Epic智识终端入门：动态卷轴输出中断恢复与断点续写功能 1. 认识Pixel Epic智识终端 Pixel Epic智识终端是一款基于AgentCPM-Report大模型构建的研究报告辅助工具。与传统AI工具不同，它将枯燥的科研过程转化为一场像素风格的RPG冒险。在这个虚拟世…...