snsnsjsn/newFile1.txt

## new_file0 #html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        *{
            margin:0px;
            padding:0px;
        }
        body{
            font-family: verdana;
            background-color: #f9c;;
            padding:50px;
        }
        h1{
            text-align: center;
            /* border-bottom:2px solid #009; */
            margin:0px auto;
            margin-bottom:50px;
            width:550px;
            /* border-style:solid dotted dashed doube; */
            border:5px solid red;
            outline:10px dotted blue;
            border-radius:30px;
            margin-bottom:300px;
        }
        h1:hover{
            outline:solid 30px;
            outline-color:rgba(255,255, 0, 1);
        }
        /* rules for navigation menu */
        /* ================================== */
        /* ul li:nth-child(2n){
            list-style:square;
            padding-left:50px;
            color:red;
        } */
        /* 二级三级菜单平常是隐藏状态 */
        ul#navmenu, ul.sub1, ul.sub2{
            list-style-type:none;
            /* border:1px solid blue; */
            /* outline:1px solid red; */
            font-size:9pt;
        }
        /* 一级菜单有宽度块，浮动显示，变成水平菜单，这里relative和float结合才能正常 */
        ul#navmenu li{
            /* outline:1px solid red; */
            /* border:1px solid blue; */
            display:block;
            width:200px;
            text-align:center;
            position:relative;
            /* left:20px; */
            float:left;
            margin-right:4px;
            /* margin:30px; */
            /* padding:20px; */
        }
        /* 菜单链接文字，显示为block也就是在整个区域都是热点，不单单a文字区域。另外圆角只能作用于a，不能作用于li */
        ul#navmenu li a{
            text-decoration:none;
            display:block;
            width:200px;
            height:25px;
            line-height:25px;
            background-color:white;
            /* border:1px solid #CCC; */
            border-radius:6px;

        }
        /* 子菜单平时隐藏状态，位置是absolute而不是relative，往下平移25px，不能多，否则hover状态不连续 */
        ul#navmenu ul.sub1{
            display:none;
            position:absolute;
            top:25px;
            left:0px;
        }
        ul#navmenu .sub1 li{
            /* border:1px solid blue; */
            /* margin-top:4px; */
        }
        /* 子菜单上下间距 */
        ul#navmenu .sub1 a{
            margin-top:4px;
        }
        /* 这里是所有hover状态下的li里面的a元素，匹配当前hover的li和hover的a的父级，祖父级li里面的a */
        ul#navmenu li:hover>a{
            background-color:#AF8;
        }
        /* 这里是当前hover的li且hover的a */
        ul#navmenu li:hover > a:hover{
            background-color:#ff0;
        }
        /* 通sub1，不过是水平右移 */
        ul#navmenu ul.sub2{
            display:none;
            position:absolute;
            top:0px;
            left:200px;
        }
        /* 这里是三级菜单和二级菜单的视觉间隙，hover连续。因为li元素之间无间隙 */
        ul#navmenu .sub2 a{
            margin-left:25px;
        }
        /* 子菜单hover时显示出来。block */
        ul#navmenu li:hover .sub1{
            display:block;
        }
        /* 三级菜单hover时显示出来 */
        ul#navmenu .sub1 li:hover .sub2{
            display:block;
        }
        /* 把向下箭头定位到正确位置。这里absolute是在relative的前提下，不再是相对于body而是上下文了 */
        .darrow{
            font-size: 11pt;
            position:absolute;
            top:5px;
            right:4px;
        }
        .rarrow{
            font-size: 20pt;
            position:absolute;
            top:0px;
            right:4px;
        }


        .article p:first-child{
            color:red;
            clear:left;
            margin-top:20px;

        }


    </style>
</head>
<body>
    <h1>navigation menu</h1>
    <ul id="navmenu">
        <li><a href="">hyperLink01</a></li>
        <li><a href="">hyperLink02</a><span class="darrow">&#9660;</span>
            <ul class="sub1">
                <li><a href="">sublink 2.1</a></li>
                <li><a href="">sublink 2.2</a></li>
                <li><a href="">sublink 2.3</a></li>
            </ul>
        </li>
        <li><a href="">hyperLink03</a></li>
        <li><a href="">hyperLink04</a><span class="darrow">&#9660;</span>
            <ul class="sub1">
                <li><a href="">sublink 4.1</a></li>
                <li><a href="">sublink 4.2</a></li>
                <li><a href="">sublink 4.3</a><span class="rarrow">&#9654;</span>
                <ul class="sub2">
                        <li><a href="">sublink 4.3.1</a></li>
                        <li><a href="">sublink 4.3.2</a></li>
                        <li><a href="">sublink 4.3.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">hyperLink05</a></li>
    </ul>
    <br>
    <br>
    <br>
    <br>
    <div class="article">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, repellendus?</p>
        <p>Commodi explicabo eligendi accusamus atque, corrupti necessitatibus tempore aliquid temporibus!</p>
        <div>
            <p>Lorem ipsum dolor sit amet.</p>
            <p>Fuga molestias, ipsa eligendi asperiores.</p>
        </div>
        <p>Ipsum perferendis voluptate ipsa mollitia esse quia delectus, saepe velit.</p>
    </div>
</body>
</html>

## newFile1.txt
simple html template
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
	*{
	margin:0px;
	padding:0px;
	}
	body{
	font-family: verdana;
	background-color: #f9c;;
	padding:50px;
	}
	h1{
	text-align: center;
	/* border-bottom:2px solid #009; */
	margin:0px auto;
	margin-bottom:50px;
	width:550px;
	/* border-style:solid dotted dashed doube; */
	border:5px solid red;
	outline:10px dotted blue;
	border-radius:30px;
	margin-bottom:300px;
	}
	h1:hover{
	outline:solid 30px;
	outline-color:rgba(255,255, 0, 1);
	}
	/* rules for navigation menu */
	/* ================================== */
	/* ul li:nth-child(2n){
	list-style:square;
	padding-left:50px;
	color:red;
	} */
	/* 二级三级菜单平常是隐藏状态 */
	ul#navmenu, ul.sub1, ul.sub2{
	list-style-type:none;
	/* border:1px solid blue; */
	/* outline:1px solid red; */
	font-size:9pt;
	}
	/* 一级菜单有宽度块，浮动显示，变成水平菜单，这里relative和float结合才能正常 */
	ul#navmenu li{
	/* outline:1px solid red; */
	/* border:1px solid blue; */
	display:block;
	width:200px;
	text-align:center;
	position:relative;
	/* left:20px; */
	float:left;
	margin-right:4px;
	/* margin:30px; */
	/* padding:20px; */
	}
	/* 菜单链接文字，显示为block也就是在整个区域都是热点，不单单a文字区域。另外圆角只能作用于a，不能作用于li */
	ul#navmenu li a{
	text-decoration:none;
	display:block;
	width:200px;
	height:25px;
	line-height:25px;
	background-color:white;
	/* border:1px solid #CCC; */
	border-radius:6px;

	}
	/* 子菜单平时隐藏状态，位置是absolute而不是relative，往下平移25px，不能多，否则hover状态不连续 */
	ul#navmenu ul.sub1{
	display:none;
	position:absolute;
	top:25px;
	left:0px;
	}
	ul#navmenu .sub1 li{
	/* border:1px solid blue; */
	/* margin-top:4px; */
	}
	/* 子菜单上下间距 */
	ul#navmenu .sub1 a{
	margin-top:4px;
	}
	/* 这里是所有hover状态下的li里面的a元素，匹配当前hover的li和hover的a的父级，祖父级li里面的a */
	ul#navmenu li:hover>a{
	background-color:#AF8;
	}
	/* 这里是当前hover的li且hover的a */
	ul#navmenu li:hover > a:hover{
	background-color:#ff0;
	}
	/* 通sub1，不过是水平右移 */
	ul#navmenu ul.sub2{
	display:none;
	position:absolute;
	top:0px;
	left:200px;
	}
	/* 这里是三级菜单和二级菜单的视觉间隙，hover连续。因为li元素之间无间隙 */
	ul#navmenu .sub2 a{
	margin-left:25px;
	}
	/* 子菜单hover时显示出来。block */
	ul#navmenu li:hover .sub1{
	display:block;
	}
	/* 三级菜单hover时显示出来 */
	ul#navmenu .sub1 li:hover .sub2{
	display:block;
	}
	/* 把向下箭头定位到正确位置。这里absolute是在relative的前提下，不再是相对于body而是上下文了 */
	.darrow{
	font-size: 11pt;
	position:absolute;
	top:5px;
	right:4px;
	}
	.rarrow{
	font-size: 20pt;
	position:absolute;
	top:0px;
	right:4px;
	}



	.article p:first-child{
	color:red;
	clear:left;
	margin-top:20px;

	}



	</style>
	</head>
	<body>
	<h1>navigation menu</h1>
	<ul id="navmenu">
	<li><a href="">hyperLink01</a></li>
	<li><a href="">hyperLink02</a><span class="darrow">▼</span>
	<ul class="sub1">
	<li><a href="">sublink 2.1</a></li>
	<li><a href="">sublink 2.2</a></li>
	<li><a href="">sublink 2.3</a></li>
	</ul>
	</li>
	<li><a href="">hyperLink03</a></li>
	<li><a href="">hyperLink04</a><span class="darrow">▼</span>
	<ul class="sub1">
	<li><a href="">sublink 4.1</a></li>
	<li><a href="">sublink 4.2</a></li>
	<li><a href="">sublink 4.3</a><span class="rarrow">▶</span>
	<ul class="sub2">
	<li><a href="">sublink 4.3.1</a></li>
	<li><a href="">sublink 4.3.2</a></li>
	<li><a href="">sublink 4.3.3</a></li>
	</ul>
	</li>
	</ul>
	</li>
	<li><a href="">hyperLink05</a></li>
	</ul>
	<br>
	<br>
	<br>
	<br>
	<div class="article">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, repellendus?</p>
	<p>Commodi explicabo eligendi accusamus atque, corrupti necessitatibus tempore aliquid temporibus!</p>
	<div>
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Fuga molestias, ipsa eligendi asperiores.</p>
	</div>
	<p>Ipsum perferendis voluptate ipsa mollitia esse quia delectus, saepe velit.</p>
	</div>
	</body>
	</html>