不定期更新的CSS样式设置
头像图片的样式
假设这是一个头像图片,假设展示头像的框为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样式设置的更多相关文章
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- TERSUS无代码开发(笔记04)-CSS样式设置
CSS样式设置 1.常用显示样式 大小尺寸 说明 间距边距 说明 各类颜色 说明 width 宽 margin 外边距 color 颜色 height 高 pad ...
- 各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
- 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...
- CSS样式设置小技巧
1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...
- CSS样式设置记录
在不懂php和wordpress的情况下,需要按照样式内容用php+wordpress+mysql做个网站,网页上有许多样式需要设置,包括颜色字体等要跟要求一致,记录下今天的结果. <div i ...
- HTML+CSS学习笔记 (15) - css样式设置小技巧
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
随机推荐
- linux(2)文件和目录管理(新增,删除,复制,移动,文件和目录权限,文件查找)
一.目录与路径 1.相对路径与绝对路径绝对路径:/开头, cd /usr相对路径:cd ../..2.目录操作(cd:change directory).:当前目录..:上一层目录-:上一个目录~:当 ...
- Activiti-05-.Deployment and MN 2.0 Introduction
Business archives (业务归档) 为了部署流程,业务档案必须被封装,业务档案是activiti 引擎部署的单元,它相当于zip文件,它包含BPMN 2.0 processes, tas ...
- 第4章 同步控制 Synchronization ----Interlocked Variables
同步机制的最简单类型是使用 interlocked 函数,对着标准的 32 位变量进行操作.这些函数并没有提供"等待"机能,它们只是保证对某个特定变量的存取操作是"一个一 ...
- E. Exposition
E. Exposition time limit per tes ...
- P1035
P1035 时间限制: 1 Sec 内存限制: 128 MB提交: 87 解决: 36[提交][状态][讨论版] 题目描述 给出一张n*n(n< =100)的国际象棋棋盘,其中被删除了一些点 ...
- bzoj3997组合数学(求最长反链的dp)
组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...
- System.Object简介
Object中的公共方法解释: 公共方法: Equals: public class Object { public virtual Boolean Equals(Object obj) { //如果 ...
- PE格式第四讲,数据目录表之导入表,以及IAT表
PE格式第四讲,数据目录表之导入表,以及IAT表 一丶IAT(地址表) 首先我们思考一个问题,程序加载的时候会调用API,比如我们以前写的标准PE 那么他到底是怎么去调用的? 他会Call 下边的Jm ...
- SerialPort如何读取串口数据并显示在TextBox上,多线程委托
namespace SerialPort { public partial class Form3 : Form { delegate void UpdateTextEventHandler(stri ...
- winPcap编程之获取适配器信息(二)
首先要读一下这一页的东西:http://www.winpcap.org/docs/docs_412/html/group__wpcapsamps.html 可以结合中文版本看http://www.fe ...