377-379自制mac系统（李游精品前端课程笔记）

刚好遇见小侯

已于 2022-04-14 13:47:32 修改

阅读量391

点赞数

文章标签： javascript

于 2022-04-13 22:32:47 首次发布

本文链接：https://blog.csdn.net/m0_61238657/article/details/124159942

版权

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>李游Leo老师在线课堂</title> 
    <style type="text/css">
    	*{padding: 0;margin: 0;list-style: none;}
    	/*  1布局分析：
    	li的尺寸和dl的尺寸是一致的，为主要显示画面宽83，高91

    	dt的尺寸上部分的，主要包含图片和被点中时的图片的变换，dt的尺寸是宽72，高72，但是为了让dt显示在dl的正中间，需要让dt右移动5.5像素（margin-left）

    	dt里面的图片文件夹的尺寸是宽60，高度可以自适应，同样需要把图片放正中间，可以使用定位的方法
    	 父级相对定位自己绝对定位，然后自己上下左右全为0，margin设定为自动

    	 dd字体大小12培训，元素高度17，行高设定17，由于这个li的高度为91，而dtdd总高度89，margin-top应移动2px*/
        html,body{height: 100%;}
    	body{background: url(1.jpeg) no-repeat;background-size: cover;}
    	#iconUl li{width: 83px;height: 91px;}
    	#iconUl li dl{width: 100%;height: 100%;}
    	#iconUl li dl dt{width: 72px;height: 72px;margin-left: 5.5px;position: relative;}
    	#iconUl li dl img{width: 60px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
    	#iconUl li dl dd{font-size: 12px;height: 17px;margin-top: 2px;line-height: 17px;text-align: center;color: white;}

    	/*文件夹选中的状态*/
    	/*  2选中布局：dt部分需要添加背景颜色并给与0.3的透明度，3px边框圆角，及2px的阴影
    	dd部分同样是给与背景颜色，3px的边框圆角，及1px的阴影*/
    	#iconUl li .active dt{background: rgba(0, 0, 0, 0.5);border-radius: 3px;box-shadow: inset 0 0 0 2px #c3c3c3;}
    	#iconUl li .active dd{background: #0066e5;border-radius: 3px;box-shadow: inset 0 0 0 1px #0066e5;}


    	/*鼠标右键菜单布局   3鼠标右键的菜单布局：大小，背景，定位，边框，圆角，阴影，字体大小及缩进,最后整体上下的内边距调整，鼠标移入的样式
    	宽268，背景2552552550.9，定位绝对左100上200，边框1实线#d5d5d5,阴影005#e2e2e3,字14px,缩进20，头脚内边距3，鼠标默认*/   
    	#menu{width: 268px;background: rgba(255, 255, 255, 0.9);position: absolute;left: 100px;top: 200px;border: 1px solid #d5d5d5;box-shadow: inset 0 0 5px #e2e2e3;text-indent: 20px;padding-top: 3px;padding-bottom: 3px;cursor: default;}


    	/*每个li标签的布局样式  每个li（menuButton）标签26像素的高度，行高26 宽度随父级就可以*/
    	#menu .menuButton{height: 26px;line-height: 26px;width: 100%;}

    	/*下划线的运用，宽度为2px 的div*/
    	#menu .line div{height: 2px;width: 100%;background: #e1e1e2;}

    	/*粘贴选项目前不能使用显示灰色*/
    	#menu .no{color: #bcbcbc;}

    	/*按名称排序的二级菜单三角号
    	背景图片，不平铺，所处位置左246右居中，背景图片大小*/
    	#menu .seted{background: url(ico/sj.png) no-repeat 246px center;background-size: 9px 10px;}

    </style>
</head>
<body>
	<ul id="iconUl">
		<li>
			<dl class="active">
				<dt><img src="ico/file-no.png"></dt>
				<dd>未命名文件夹</dd>
			</dl>
		</li>
	</ul>

	<ol id="menu">
		<li class="menuButton">新建文件夹</li>
		<li class="line"><div></div></li>
		<li class="memuButton">更改桌面背景</li>
		<li class="menuButton no">粘贴</li>
		<li class="menuButton seted">按名称排序</li>
		<li class="line"><div></div></li>
		<li class="menuButton">刷新</li>
	</ol>
	
</body>
</html>

刚好遇见小侯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
377-379自制mac系统（李游精品前端课程笔记）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>李游Leo老师在线课堂</title> <style type="text/css"> *{padding: 0;margin: 0;list-style: none;} /* 1布局分析： li的尺寸和dl的尺寸是一致的，为主要显示画面宽.
复制链接

扫一扫