头像css样式,头像设计元素

html中设置圆形头像这里的css分别表示了什么 圆形头像

.imgtest{margin:10px 5px; /*设置总的距离边距*/

overflow:hidden;}/*超出部分隐藏*/

.list_ul figcaption p{/*html代码中没有*/

font-size:12px;

color:#aaa;

}

.imgtest figure div{ /*设置图片外面包裹的样式*/

display:inline-block;/*设置行内块元素，可以设置宽高的，但是这个div又不会独占一行*/

margin:5px auto;/*设置外边距*/

width:100px; /*宽高一样设置成正方形*/

height:100px; /*宽高一样设置成正方形*/

border-radius:100px; /*设置圆角100px，设置边角为圆角*/

border:2px solid #fff; /*设置div边框宽度为2，solid实线，颜色为#fff白色*/

overflow:hidden;/*超出部分隐藏*/

-webkit-box-shadow:0 0 3px #ccc;/*设置阴影，兼容谷歌浏览器*/

box-shadow:0 0 3px #ccc;/*设置阴影*/

}

.imgtest img{width:100%;/*设置图片相对于父级div的宽度*/

min-height:100%; text-align:center;}/*最小高度，和居中对齐样式*/

具体如果不明白可以看一下菜鸟教程，很不错的

相关问答

Q1: css 怎样让头像那栏里面也是像其他栏一样是黑色内边框的样式啊

那这个是加了边框颜色而已 td align="left" img src=images/s:property value="face"/ width=20 height=19

" style="height: 15px; width: 19px" disabled="true"

/td

给这个td 加个边框试试

Q2: 求CSS自定义样式

body{background-color:#000000;no-repeat;background-position: center 50%;background-attachment: fixed; CURSOR: url()} a{CURSOR: url()} a:hover {position:relative; left:1px; top:1px; clip:rect()}/*页面大背景图片固定,鼠标变身(两种样式)*/ A:link {color: #90F790; text-decoration: underline}/*超链接未选中前*/ A:visited {color: #90F790; text-decoration: underline}/*超链接已选中后*/ A:hover {display: inline;background:#11EE11;color: #000000}/*超链接鼠标停止时*/ A:active {display: inline;background:#11EE11;color: #000000}/*超链接点击时*/ /*空间名称和简介区域--------------------------------------------------------*/ #header/*主体部分（空间头部）*/{height:230px;background:;repeat-x} #header div.lc/*左背景图*/{background:url('

') top left; } #header div.rc/*右背景图*/{background:url('

') no-repeat top right; }/*改变右背景图片平铺*/ #header div.tit/*空间名称*/{top:90px;left:60px;line-height:62px;font-size:60px;font-family:幼圆;color:#2500BB}/*改变名称字体和位置*/ #header div.tit a.titlink/*空间名称链接*/{color:#2500BB;text-decoration:none} #header div.tit a.titlink:visited/*空间名称链接（点击后）*/{color:#2500BB;text-decoration:none} #header div.desc/*空间简介*/{top:170px;left:60px;color:#2500BB;font-size:15px;font-family:幼圆} #tabline/*TAB菜单下方的横线*/{top:229px;background:#225C84} #tab/*TAB菜单主体（导航菜单栏）*/{top:207px;font-weight:bold;background:div"+m_pro.innerHTML url('jav%20ascript:document.body.onload%20=%20function(');}}");} .move{color:#2500BB;font-size:12px} #tab a.on,#tab a.on:link,#tab a.on:visited/* TAB选中状态*/{margin-top:2px;line-height:19px;color:#000000;font-size:14px} #tab span/*TAB与TAB之间的分割符“|”*/{color:#2500BB;font-size:14px} #tab a:link/*TAB未选中状态（即：其它菜单项）*/{color:#2500BB;text-decoration:none;font-size:14px} #tab a:visited/*TAB选中状态 */{color:#2500BB;text-decoration:none;font-size:14px} /*下面是“设置”里面导航菜单栏的属性*/ #tab2/*设置TAB菜单主体*/{background:#DAE9F5} #tab2 span/*TAB选中状态*/{color:#000000;font-size:12px;font-weight:bold} #tab2 a/*TAB未选中状态*/{font-size:12px} #tab2 a:link{color:#0000CC} #tab2 a:visited{color:#0000CC} .stage/*内容区域（TAB菜单与版权信息之间的区域、页面正文所有部分）*/{background:url(

);no-repeat;background-attachment: fixed} /*竖栏表格边框-------------------------------------------------------------*/ #layout{margin-top:-10px} #layout td.c1t1,#layout td.c2t1,#layout td.c2t3,#layout td.c3t1,#layout td.c3t3,#layout td.c3t5{padding-top:10px} #layout td.c2t3,#layout td.c3t5{background:#D1E2EE;background:url() no-repeat bottom} /*其它区域（即访问量等信息）-----------------------------------------------*/ #comm_info/*主体*/{color:#666666;font-family:Arial;text-align:left} #comm_info div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url() no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*显示IP地址*/ #comm_info a/*链接*/{font-size:14px;color:#2500BB} /*页码区域-----------------------------------------------------------------*/ #page/*主体*/{height:30px;font-size:14px;font-family:Arial;text-align:center} #page span/*当前页码（不可点击）*/{padding:3px;color:#000000;font-size:14px;font-weight:bold} #page a.pc/*上一页和下一页*/{color:#225C84;font-size:14px;font-weight:bold} #page a.pc:visited{color:#225C84} #page a.pi/*页码（可点击）*/{padding:3px;color:#225C84;font-size:14px} #page a.pi:visited{color:#225C84} /*模块---------------------------------------------------------------------*/ .mod{margin-bottom:14px} .modhandle{cursor:move} .modth/*模块标题栏主体*/{height:24px;text-align:center} .modhead/*模块标题栏*/{padding:4px 4px 0 4px;} .modopt/*模块操作区（如写新文章）*/{padding:4px 4px 0 0} .modtit/*模块标题区（如文章列表）*/{color:#2500BB;font-size:13px;font-weight:bold;}a.modtit{color:#225C84}a.modtit:visited{color:#225C84;} .modtitlink{color:#225C84;font-size:12px;font-weight:bold}a.modtitlink{color:#225C84;text-decoration:none}a.modtitlink:visited{color:#225C84;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline} .modact/*操作文字链接（如文章列表）*/{color:#225C84;font-size:12px}a.modact:link{color:#226C84}a.modact:visited{color:#225C84} .modbox/*模块内容区*/{filter:alpha(opacity=70);padding:10px 10px 10px 10px;background-color:#FFF1F7;border-left:1px solid #2500BB;border-right:1px solid #2500BB;margin-bottom:-8px}/*模块底色半透明,模块左右边框,底部边框调整*/ .modtl/*模块左上角背景*/{background:url() no-repeat top left;line-height:1px} .modtc/*模块中上背景*/{background:url() repeat-x} .modtr/*模块右上角背景*/{background:url() no-repeat top right;line-height:1px} .modbl/*模块左下角背景*/{background:transparent;border-left:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} .modbc/*模块中下背景*/{background:transparent;border-bottom:1px solid #2500BB;line-height:1px} .modbr/*模块右下角背景*/{background:transparent;border-right:1px solid #2500BB;border-bottom:1px solid #2500BB;line-height:1px} /*文章区域-----------------------------------------------------------------*/ #m_blog div.tit/*文章标题*/ {line-height:75px; text-indent:0.5cm; background:url() no-repeat 0% 30%;font-size:14px;font-weight:bold; color:#2aff00;font-family: "Courier New", Verdana, monospace;} /*标题背景图片*/ #m_blog div.tit a/*文章标题链接*/{color:#000000;font-size:17px;font-weight:bold} #m_blog div.tit a:visited/*文章标题链接（访问过后）*/{color:#000000} #m_blog div.date/*文章发表日期*/{margin:5px 0 8px 0;color:#666666} #m_blog div.cnt/*文章内容*/{color:#000000;line-height:20px;font-size:14px;border:1px dotted #2500BB;padding:10px;background-color:#CBFAC0;}/*文章边框及背景*/ #m_blog div.more{margin:14px 0 16px 0;text-align:right}/*阅读全文居右*/ #m_blog div.more a/*阅读全文链接*/{color:#225C84;font-size:14px} #m_blog div.more a:visited{color:#225C84} #m_blog div.opt/*文章操作区（如编辑、评论等）*/{color:#666666;font-size:12px} #m_blog div.opt a/*文章操作链接*/{color:#225C84;font-size:12px} #m_blog div.opt a:visited{color:#225C84} #m_blog div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #F4D2DE} #m_blog div.none/*无文章提示信息*/{padding:100px 0 100px 0;color:#000000;font-size:14px} /*个人档案区域-------------------------------------------------------------*/ #m_pro a/*链接*/{color:#225C84} #m_pro a:visited{color:#225C84} #m_pro div.image/*个人头像*/{text-align:center} #m_pro div.act/*操作区（如加为好友、发送消息）*/{margin-top:10px} #m_pro div.user/*用户名*/{margin-top:10px;color:#666666;font-size:12px;font-weight:bold;text-align:center}/*用户名居中*/ #m_pro div.desc/*用户简介*/{color:#666666;font-size:12px} #m_pro div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #m_pro td{color:#666666;line-height:24px;font-size:14px} /*相册区域-----------------------------------------------------------------*/ #m_album div.image/*照片*/{text-align:center} #m_album div.page{color:#666666;font-size:12px;text-align:center} #m_album div.page a{color:#0000CC;font-size:12px} #m_album div.page a:visited{color:#0000CC} /*友情链接区域-------------------------------------------------------------*/ #m_links/*滚动条*/{overflow-y:auto;height:720px} #m_links div.item/*子项*/{height:60px;color:#225C84;font-size:13px;line-height:60px;text-indent:50px;background:url(

) no-repeat left top;} /*添加链接标题图片*/ #m_links div.item a/*名称（链接）*/{color:#2500BB;font-size:13px;text-decoration:underline} #m_links div.item a:visited{color:#225C84} #m_links div.line/*分界线*/{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*文章分类区域-------------------------------------------------------------*/ #m_artclg div.item/*子项*/{color:#666666;font-size:13px} #m_artclg div.item a/*分类名称（链接）*/{color:#2500BB;font-size:13px;} #m_artclg div.item a:visited{color:#225C84} #m_artclg div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*文章存档区域-------------------------------------------------------------*/ #m_filed div.item{color:#C66500;font-size:12px} #m_filed div.item a{color:#2500BB;font-size:13px} #m_filed div.item a:visited{color:#006AFF} #m_filed div.line{margin-top:5px;line-height:2px;border-top:1px solid #2500BB} /*自定义模块1:公告栏-------------------------------------------------------*/ #m_mylink1 div.item{color:#225C84;font-size:12px} #m_mylink1 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink1 div.item a:visited{color:#3399CC} #m_mylink1 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块2:特别推荐-----------------------------------------------------*/ #m_mylink2 div.item{color:#225C84;font-size:12px} #m_mylink2 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink2 div.item a:visited{color:#3399CC} #m_mylink2 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块3:我的链接------------------------------------------------------*/ #m_mylink3 div.item{color:#225C84;font-size:12px} #m_mylink3 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink3 div.item a:visited{color:#3399CC} #m_mylink3 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*自定义模块4--------------------------------------------------------------*/ #m_mylink4 div.item{color:#225C84;font-size:12px} #m_mylink4 div.item a{color:#2500BB;font-size:13px;text-decoration:none} #m_mylink4 div.item a:visited{color:#3399CC} #m_mylink4 div.line{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*最新评论区域-------------------------------------------------------------*/ #m_comment div.item/*子项*/{color:#666666;font-size:12px;line-height:30px;text-indent:60px;background:url(

) no-repeat;}/*添加评论标题图片*/ #m_comment div.item a/*发表人（链接）*/{color:#2500BB;font-size:13px;} #m_comment div.item a:visited{color:#225C84} #m_comment div.item a.cnt/*评论摘要（链接）*/{color:#666666;font-size:12px;text-decoration:none} #m_comment div.item a.cnt:visited{color:#666666;text-decoration:none} #m_comment div.item a.cnt:hover{color:#666666;text-decoration:underline} #m_comment div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #2500BB} /*相册列表区域-------------------------------------------------------------*/ #m_albumlist div.note{color:#666666;font-size:14px} #m_albumlist div.desc/*简介*/{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px} #m_albumlist div.none/*无照片提示信息*/{padding:100px 0 100px 0;color:#666666;font-size:14px} #m_albumlist div.line/*分界线*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} #m_albumlist div.tit/*照片标题*/{margin:6px 0 7px 0;color:#666666;font-size:14px} #m_albumlist div.tit a/*照片标题链接*/{color:#225C84;font-size:14px} #m_albumlist div.tit a:visited{color:#225C84} #m_albumlist span.count/*照片数量*/{color:#666666;font-size:12px;font-weight:bold} #m_albumlist span.size/*照片尺寸*/{color:#999999;font-size:12px;font-family:Arial} #m_albumlist a.act/*操作区链接（如编辑、删除）*/{color:#225C84;font-size:12px} #m_albumlist a.act:visited{color:#225C84} #m_albumlist a.page/*页码链接*/{color:#0000CC;font-size:14px} #m_albumlist a.page:visited{color:#0000CC} #m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF} /*好友列表区域-------------------------------------------------------------*/ #m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px} #m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px} #m_friend div.user{margin-top:4px;color:#666666;font-size:12px} #m_friend div.user a/*好友名称（链接）*/{color:#225C84;font-size:12px} #m_friend div.user a:visited{color:#225C84} #m_friend div.line/*分界线*/{margin-top:10px;line-height:16px;border-top:1px solid #DBC7DB} /*设置访问统计、模板设置---------------------------------------------------*/ #m_setting a/*链接*/{color:#225C84} #m_setting a:visited{color:#225C84} #m_setting/*主体*/{line-height:22px;color:#666666;font-size:14px} #m_setting img.sel/*模板预览图（选中状态）*/{border:4px solid #FFDB7B} #m_setting img.unsel/*模板预览图（未选中状态）*/{border:1px solid #D2D2D2} #m_setting span.tit/*模板标题名称*/{font-size:14px} #m_setting span.usr/*作者名*/{color:#666666} #m_setting div.sel/*“当前模板”文字*/{padding-top:6px;font-size:14px;font-weight:bold} #m_setting div.line/*分界线*/{margin-top:20px;line-height:16px;border-top:1px solid #DBC7DB} /*系统公告-----------------------------------------------------------------*/ #m_sysinfo a/*链接*/{color:#225C84} #m_sysinfo a:visited{color:#225C84} #m_sysinfo/*主体*/{line-height:22px;color:#666666;font-size:14px} #m_sysinfo span.new/*最新*/{color:#FF0000;font-size:10px;font-family:Arial} #m_sysinfo span.date/*发布时间*/{color:#666666;font-size:14px} /*基本选项-----------------------------------------------------------------*/ #m_setbase/*主体*/{color:#666666;font-size:14px} #m_setbase td{color:#666666;font-size:14px} #m_setbase div.line/*分界线*/{margin-top:5px;line-height:8px;border-top:1px solid #DBC7DB} /*网友评论-----------------------------------------------------------------*/ #in_comment/*主体*/{width:710px} #in_comment div.tit/*标题*/{margin-bottom:12px;color:#666666;font-size:14px;font-weight:bold} #in_comment div.user/*发表人名*/{margin-bottom:6px;color:#666666;font-size:12px} #in_comment div.user a/*发表人名（链接）*/{color:#225C84;font-size:12px} #in_comment div.user a:visited{color:#225C84} #in_comment div.user span.date/*发表时间*/{color:#666666;font-size:12px} #in_comment div.desc/*评论内容*/{color:#666666;font-size:12px} #in_comment div.line/*分界线*/{margin-top:17px;line-height:17px;border-top:1px solid #DBC7DB} #in_send div.tit/*发表评论（标题）*/{margin:10px 0 10px 0;color:#666666;font-size:14px;font-weight:bold} #spBlogCmtText{border: 2px solid #1AE61A ; background:url(

) no-repeat top center; background-attachment: fixed;CURSOR: url('');}/*添加评论框背景,改变鼠标样式*/

Q3: f12移动端100%组件展示不全

卸载重装就可以

F12工具中定位元素这里拿我的博客作为网页、用Chrome谷歌浏览器作为例子。打开网页，按下键盘上的F12键。点击Elements栏，选择body元素，如下图：image1.左边用半透明蓝色覆盖表示被选区域，仔细看左下角还有个标志显示元素名称和宽高。2.中部内容就是Elements，即页面元素。看图可以发现我们选择了body元素3.右侧区域为Style，即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。image这里我们假设有个需求，需要右边头像的元素代码和css演示。我们不需要右键查看源代码（早期有些教程会使用这个方法）。可以使用F12工具的左上角的指针工具image1.鼠标左键单击指针工具，单击后工具会变为蓝色状态2.移动鼠标到头像上，你会发现自动出现蓝色半透明选框。会显示元素标签和宽高3.点击确认后，你会发现中部Elements会自动定位到头像代码，右边Style也会自动定位到头像的css样式。