html圆形头像简易实现

html圆形头像简易实现

html圆形头像简易实现

效果如下

代码如下

原型头像样式实现

* {

padding: 0px;

margin: 0px;

}

html,body{

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

}

.main {

width: 100%;

height: 100%;

/* background-color: darkgrey; */

}

.myImageDiv {

width: 100%;

height: 20%;

/* background-color: darkseagreen; */

display: flex;

justify-content: center;

align-items: center;

}

.imageDivFather {

width: 120px;

height: 120px;

border-radius: 60px;

background-color: yellow;

}

.imageDivContainer {

margin: 10px 0 0 10px;

width: 100px;

height: 100px;

background-color: #fff;

border-radius: 50px;

background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602486631477&di=7b59ba2d1b6bde0ce91bdc7d481bedc9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F11%2F20140911211243_3rT4u.jpeg');

background-repeat:no-repeat;

background-size: 100% 100%;

}

html圆形头像简易实现相关教程

微信小程序 - 获取用户头像昵称等信息(带授权检测)

微信小程序 - 获取用户头像昵称等信息(带授权检测) 接口调整官方文档：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 在以前，是否授权可以直接弹出询问用户，但现在微信更改了策略，必须 由用户点击按钮触发 。

HTML5 小结

HTML5 小结 (一) 语义标签 (二)增强型表单 (三)视频和音频 (四)Canvas绘图 (五)SVG绘图 (六)地理定位 (七)拖放API (八) WebWorker (九) WebStorage (十)WebSocket 绘画 canvas;用于媒介回放的 video 和 audio 元素;本地离线存储 localSto

常见的布局情景(头像+标题)

常见的布局情景(头像+标题) 在今天的布局过程中，遇到了一个布局情景，这是一个常用的布局情景 遇到的情景如下图： 为了实现这个布局，使用了flex布局，详细的flex布局如下链接 阮一峰老师flex布局详解 为了方便自己以后的复习，实现了下图的模型 代码如下

Flutter35.Opensource China主界面My的头像数据和名称更新(07)

Flutter35.Opensource China主界面My的头像数据和名称更新(07) profile_page.dart使用EventBus监听 import 'dart:convert';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutterapp2/common/event_bus.d

HTML实现页面跳转

HTML实现页面跳转 要用到两个页面，第一个显示密码和提交按钮，若密码正确，则跳转到另一个页面(第二个页面)。第二个页面中放入几张图片即可。 one： !DOCTYPE htmlhtmlheadstyle.login{ width:350px; height:200px; position:absolute; left:50%; top:50%;

贪吃蛇

贪吃蛇 源码： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title !-- 导入外部的css文件 -- style/* 清除默认样式 */*{ margin: 0; padding: 0;}/* 设置游戏盒子 */#main{ margin: 100px 230px ; /* border : 1px solid red; */ positi

html+css基础-3-flex，浏览器内核，HTML5新特性

html+css基础-3-flex，浏览器内核，HTML5新特性 1，概念 flex布局最核心的两个概念就是容器和轴，容器包括父容器和子容器，轴包括主轴和副轴。 设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用 2，应用场景 1)，单行左右布局 父

微信小程序入门与实战(4)——postDetail页面的html/css页面，以

微信小程序入门与实战(4)——postDetail页面的html/css页面，以及从post页面的数据传送 html页面 !--pages/posts/post-detail/post-detail.wxml--view class=container view class=head-container image class=audio src=/img/music/music-stop.png/image ima