div+css基础——8.绝对定位应用(照片签名)

最新推荐文章于 2022-08-14 14:36:40 发布
原创 最新推荐文章于 2022-08-14 14:36:40 发布 · 810 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html.div.css

本文通过一个具体的实例展示了如何使用CSS的绝对定位来实现照片上的签名效果。该实例中，一张图片作为背景放置在一个相对定位的div内，而签名则放置于另一个绝对定位的div内，并精确设置其位置。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>绝对定位应用(照片签名)</title>
  <meta name="keywords" content="自定义关键字"/>
  <meta name="description" content="自定义描述"/>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <style type="text/css">
	#image{
		position:relative;
		background-image:url(girl.png);
		width:600px;
		height:450px;
	}
	#name{
		position:absolute;
		right:30px;
		bottom:30px;
		font-size:30px;
		color:red;
		font-weight:bold;
	}
  </style>
 </head>
 <body>
	<div id="image">
		<div id="name">芙蓉姐姐</div>
	</div>
 </body>
</html>


效果截图：

HTML5+CSS大作业——仿新浪微博个人主(4页) html期末作业代码网页设计
01-04 1238
HTML5+CSS大作业——仿新浪微博个人主(4页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——仿新浪微博个人主(4页)一、作品展示二、
HTML5+CSS大作业——仿新浪微博个人主(4页)
11-30 1271
HTML5+CSS大作业——仿新浪微博个人主(4页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTM
img标签绝对位置定位，图片显示在签名之上。
weixin_33895695的博客
12-08 691
这个功能大体实现这个样子： 首先要用ps把图片弄成透明的。点击新建——图层——图层背景，用魔术棒选中图层，按Delete键删除北京。图片大致如下： 这里要把图片存储为GIF 在弹出的 索引颜色 中把透明度打上勾。PGN格式的在IE6上显示不为透明的，所以要为GIF的。 然后再 WEB 窗体中 加个div。在div中放上 img标签。 &lt;div id="Layer1"&gt...
30-CSS-12-CSS(CSS的布局-图像签名)
wy_0928的博客
08-13 516
#text{ font-family:"华文隶书"; font-size:24px; position:absolute; /*先飘起来，再定位*/ top:50px; /*其有父节点，所以这里是相距父节点的距离*/ left:10px; } #imgtext{ border:#F60 dotted 1px; width:160px; po
CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
qq_41438541的博客
03-28 304
学习了CSS布局的定位和浮动，我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处。顺便也说一下CSS3新增的样式属性box-shadow和属性transform。 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...
python+selenium元素定位——8种方法
小白龙白龙马的博客
12-13 587
定位元素，selenium提供了8中元素定位方法： (1)find_element_by_id() ：html规定，id在html中必须是唯一的，有点类似于身份证号 (2)find_element_by_name() ：html规定，name用来指定元素的名称，有点类似于人名 (3)find_element_by_tag_name() ：通过元素的签名来定位 (4)find_element_by...
HTML+css入门——认识标签（1）
obcy
06-11 379
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。下面就是一个简单的网页。效果图如下： 我们来分析一下，这个网...
【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解
weixin_43895667的博客
08-01 3864
1、HTML：HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等 2、CSS：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化 3、JavaScript核心语法、内置支持类、JS调试、JSDOM...
html网页设计作业代码——代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品_期末大作业
06-09 1130
HTML5期末大作业：管理系统后台网站设计——代理商销售管理系统后台(8页) HTML+CSS+JavaScript web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页
VUE——nuxt.js实现腾讯云点播的视频上传
weixin_40677985的博客
03-03 706
一、封装视频上传的组件 腾讯云点播的文档提供了demo和上传用的vod-js-sdk-v6依赖，我按照官方demo做了点修改。记得先安装上传用的依赖npm instalvod-js-sdk-v6。上传视频需要先获取signature，自行去写好获取signature的api哈（官网文档有提供后台生成签名signature的demo，几种语言都有）。里面uploadSign方法就是我从后台拿si...
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
专注于dreamweaver网页设计制作
08-14 677
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
把文字链接 绝对定位到图片上面
alex的博客
09-30 669
把文字链接 绝对定位到图片上面
div+css基础——1.页面全局属性设置
無名的博客
05-26 3975
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 页面全局属性设置 body{ margin:0; /* margin:0;
div+css基础——7.采用div定位技术对div进行排版(绝对定位,指定父容器)
無名的博客
05-26 1470
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 采用div定位技术对div进行排版(绝对定位，相对父容器定位) #father{ backgr
div+css基础——2.网页宽度和居中设置
無名的博客
05-26 1184
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 网页宽度和居中设置 body{ margin:0; padding:0; font-size:12px;
div+css基础——3.采用div浮动对div进行排版
無名的博客
05-26 974
div+css布局要使用盒子模型，以下是盒子模型图解：     div属于块元素，每个div都独占一行，所以要想让多个div同时在一行显示，则需要使用两种技术：     1.浮动技术float            2.定位技术position 浮动技术示例代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
jsp+servlet+css+mysql登录页面
最新发布
12-30
### 创建带CSS样式的JSP登录页面 为了实现一个带有CSS样式并能连接到MySQL数据库的登录页面，可以按照如下方式构建项目结构： #### 1. 构建HTML/CSS部分 首先，在`WebContent`目录下创建一个新的文件夹用于存储静态资源，比如命名为`statics`。在这个文件夹内再分别建立两个子文件夹——`css`和`images`来分类管理样式表以及图片等资源。 接着，在`css`文件夹里新建名为`style.css`的文件定义所需的样式规则[^1]。 ```css body { font-family: Arial, sans-serif; } .container { width: 30%; margin: auto; padding-top: 50px; } form div { margin-bottom: 1rem; } input[type="text"], input[type="password"] { width: calc(100% - 22px); height: 40px; border-radius: 5px; padding-left: 10px; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } ``` 随后，在`WebContent`根路径下创建`login.jsp`作为登录界面入口文档，并引入上述自定义样式。 ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Login Page</title> <!-- 引入外部样式 --> <link rel="stylesheet" href="./statics/css/style.css"/> </head> <body> <div class="container"> <h2>Sign In</h2> <form action="${pageContext.request.contextPath}/LoginServlet" method="post"> <div><label>User Name : </label></div> <div><input type="text" name="username"/></div> <div><label>Password:</label></div> <div><input type="password" name="pwd"/></div> <div><button type="submit">Submit</button></div> </form> </div> </body> </html> ``` #### 2. 编写JavaBean实体类User.java 在项目的源码包(`src`)中新增加一个名为`Model`的新包用来放置业务逻辑模型对象。在此处添加`User.java`文件以封装用户信息字段[^3]。 ```java package servlet02.Model; public class User { private String username; private String password; // Getter & Setter 方法省略... public User(String username, String password){ this.username = username; this.password = password; } public User(){} } ``` #### 3. 实现DAO层接口及其具体实现 UserDaoImpl.java 同样位于`Model`包内部继续追加`UserDao.java`接口声明通用方法签名；紧接着提供具体的实现版本即`UserDaoImpl.java`负责处理实际的数据存取操作。 ```java // UserDao.java 接口 package servlet02.Model; import java.sql.SQLException; public interface UserDao { boolean checkUser(User user) throws SQLException; } // UserDaoImpl.java 类 package servlet02.Model; import com.mysql.jdbc.Connection; import com.mysql.jdbc.PreparedStatement; import com.mysql.jdbc.ResultSet; import javax.naming.Context; import javax.naming.InitialContext; import javax.sql.DataSource; import java.sql.SQLException; public class UserDaoImpl implements UserDao{ @Override public boolean checkUser(User user)throws SQLException { Connection conn=null; PreparedStatement pstmt=null; ResultSet rs=null; try{ Context ctx=new InitialContext(); DataSource ds=(DataSource)ctx.lookup("java:comp/env/jdbc/mysql"); conn=(Connection)ds.getConnection(); String sql="select * from users where username=? and password=?"; pstmt=(PreparedStatement)conn.prepareStatement(sql); pstmt.setString(1,user.getUsername()); pstmt.setString(2,user.getPassword()); rs=pstmt.executeQuery(); return rs.next(); }finally{ if(rs!=null){rs.close();} if(pstmt!=null){pstmt.close();} if(conn!=null){conn.close();} } } } ``` #### 4. 开发Servlet控制器 LoginServlet.java 最后一步是在`WEB-INF/classes/servlet02/Controller`位置设立新的包名空间存放控制层组件。这里要做的就是编写`LoginServlet.java`程序片段完成接收客户端请求参数解析、调用持久化服务验证身份合法性并向视图反馈响应结果的任务[^2]。 ```java package servlet02.Controller; import servlet02.Model.User; import servlet02.Model.UserDaoImpl; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.sql.SQLException; @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取前端传来的用户名密码 String userName=request.getParameter("username"); String pwd=request.getParameter("pwd"); // 将其打包成User对象传递给DAO层做进一步判断 User u=new User(userName,pwd); UserDaoImpl userDao=new UserDaoImpl(); try { if(userDao.checkUser(u)){ // 如果匹配成功则重定向至主页或其他指定URL地址 response.sendRedirect(request.getContextPath()+"/success.jsp"); }else{ // 否则返回错误提示信息让用户重新尝试登陆动作 response.getWriter().write("<script>alert('Invalid credentials! Please retry.');window.history.back(-1);</script>"); } } catch (SQLException e) { throw new RuntimeException(e); } } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值