头像图片的样式

  

  假设这是一个头像图片,假设展示头像的框为100*100的div,而图片尺寸为510*765,如何让图片显示成这样呢?

  html结构很简单:

            <div class="img">
<img src="../images/eye.jpg">
</div>
<h5>吉米</h5>

  忽略那个h5,其实样式非常简单哦!

  首先,父元素定固定宽高100*100(或者百分比),图片根据需求设置100*120(如果父元素百分比也用百分比)。

  父元素设置overflow:hidden;border-radius:50%;

  最后,注意到图片有一圈灰色吗?只是一个border而已。

  父元素设置border:3px solid #999;

  大功告成。

            >.img{
margin:0 auto;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
border:3px solid #999;
>img{
width: 80px;
height: 100px;
}

  大概就是这样啦。

不定期更新的CSS样式设置的更多相关文章

  1. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

  2. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  3. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. TERSUS无代码开发(笔记04)-CSS样式设置

    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...

  5. 各种CSS样式设置细线边框

    基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...

  6. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  7. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

  8. CSS样式设置记录

    在不懂php和wordpress的情况下,需要按照样式内容用php+wordpress+mysql做个网站,网页上有许多样式需要设置,包括颜色字体等要跟要求一致,记录下今天的结果. <div i ...

  9. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

随机推荐

  1. linux(2)文件和目录管理(新增,删除,复制,移动,文件和目录权限,文件查找)

    一.目录与路径 1.相对路径与绝对路径绝对路径:/开头, cd /usr相对路径:cd ../..2.目录操作(cd:change directory).:当前目录..:上一层目录-:上一个目录~:当 ...

  2. Activiti-05-.Deployment and MN 2.0 Introduction

    Business archives (业务归档) 为了部署流程,业务档案必须被封装,业务档案是activiti 引擎部署的单元,它相当于zip文件,它包含BPMN 2.0 processes, tas ...

  3. 第4章 同步控制 Synchronization ----Interlocked Variables

    同步机制的最简单类型是使用 interlocked 函数,对着标准的 32 位变量进行操作.这些函数并没有提供"等待"机能,它们只是保证对某个特定变量的存取操作是"一个一 ...

  4. E. Exposition

                                                                        E. Exposition time limit per tes ...

  5. P1035

    P1035 时间限制: 1 Sec  内存限制: 128 MB提交: 87  解决: 36[提交][状态][讨论版] 题目描述 给出一张n*n(n< =100)的国际象棋棋盘,其中被删除了一些点 ...

  6. bzoj3997组合数学(求最长反链的dp)

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  7. System.Object简介

    Object中的公共方法解释: 公共方法: Equals: public class Object { public virtual Boolean Equals(Object obj) { //如果 ...

  8. PE格式第四讲,数据目录表之导入表,以及IAT表

    PE格式第四讲,数据目录表之导入表,以及IAT表 一丶IAT(地址表) 首先我们思考一个问题,程序加载的时候会调用API,比如我们以前写的标准PE 那么他到底是怎么去调用的? 他会Call 下边的Jm ...

  9. SerialPort如何读取串口数据并显示在TextBox上,多线程委托

    namespace SerialPort { public partial class Form3 : Form { delegate void UpdateTextEventHandler(stri ...

  10. winPcap编程之获取适配器信息(二)

    首先要读一下这一页的东西:http://www.winpcap.org/docs/docs_412/html/group__wpcapsamps.html 可以结合中文版本看http://www.fe ...